How to create images and screenshots well done on your blog
Oscar Wilde said that “there is no second chance for a first impression”.
Applied to a blog, this means that not everything is content, but the first sensations of a person when you visit your blog will largely determine whether it stays or not. And these first sensations are inevitably largely visual.
To be aware of how important this may be, I find the study cited in this HubSpot post very interesting. In this study, psychologist and researcher Dr. Elizabeth Sillence asked a group of people to review a series of hypertension websites. Next, they evaluated whether they trusted or distrusted the website.
The study obtained the surprising result that 94% of the distrustful respondents attributed their attitude to the design of the website.
Luckily, today we have thousands of themes for WordPress, many come from the factory with an attractive design. But it is easy to throw everything away with the details and one of it is to then use images of poor quality in the content: pixelated images, blurred, with poorly chosen dimensions that make it impossible to recognize their content, etc.
In fact, in guest posts, we have had many more problems with images than with written content, especially when it comes to screenshots. In the images of landscapes or people, it is not so noticeable, but the contents of screenshots have typically much more marked outlines and that makes the defects of quality notice much more.
And it is a pity because it is very easy to make screenshots that convey a feeling of excellent quality. However, most people make really bad screenshots that hurt the impression left by their contents. These are totally unnecessary errors.
7 Tips for creating well-made screenshots
For that reason, I am going to give in this post a review of all these vices of poor finish that we have been finding and how to correct them. We started by watching how to make screenshots of very good quality.
- Choose dimensions consistent with the format of your blog
This point is very simple, let’s see it with an example: let’s suppose a post that speaks of the positioning in Google of Corte Inglés and its competition.
At some point the author inserts this screen capture with relevant data from the SEMrush tool to analyze them:
Surely you’ve seen images like that many times; it’s a very typical error. Apart from unpleasant by the fact of forcing the sight, they become an absurd element for useless. What contributes to this image, apart from a bad impression, if you cannot recognize anything of its content?
The problem has been that it has been captured as it is, without thinking what was being done, with a window maximized in a Full HD screen resolution (1920 × 1080 pixels), an increasingly common resolution in desktop monitors.
However, the column width of the posts on this blog is 800 pixels. That is, the original width of 1920 pixels has had to be reduced to less than half to visualize the image in this post, which has made the content so diminished that it has become illegible, both in size and loss of quality, because as much as you want, 1920 pixels “cannot be put” in 800, there is no way. The original contours are completely blurred.
This is something that, by the way, also happens a lot in YouTube videos. Many people make their videos with a Full HD resolution when many people will see them on a laptop with the typical resolution of 1366 × 768, or even with even lower resolutions on a tablet or mobile.
And what happens has to happen: you see it as fatal. Or rather: you do not see it. And let’s not say people with sight problems…
Would not it be much more reasonable to have done this same capture with smaller window dimensions?
Or, applied to YouTube videos, would not it be more reasonable to record them with a basic HD screen resolution of 1280 * 720 pixels (which is, by the way, the one that I personally recommend and use in all of our videos).
- Focus the capture on what matters
If you have noticed the last capture, you will have noticed a detail: the browser window is not there, the image has been limited to the information that is relevant to the reader.
That is not only a bit more aesthetic and good for removing unnecessary elements such as the browser window that does not contribute anything but also helps to reduce even more the dimensions of the capture and get more appropriate dimensions for its publication in the Blog.
In addition, in the part of tools a little lower in this post, you will see, that you do not need to edit the captured image to cut and things for style, but you can capture it so that it goes directly like this.
- Normalize the dimensions for your blog
A very frequent design flaw that applies both to screenshots and to images, in general, is not normalizing the dimensions of the images used.
That is, to insert the images as they come in their original state, one with 624 × 345 pixels, and another with 387 × 201 pixels and so on. This succession of unequal and arbitrary sizes is something that is simply wrong in content.
My advice is that you normalize the images so that they are all of a standard size (s).
For example, in our case we have always used a width of 800 pixels for full width or a width of 300 pixels that would be aligned to the left or right, depending on what is best in each case.
Any image has to correspond to these sizes and that the coherence of the dimensions used is very good for the aesthetic result of the content. But it is more, recently we have decided that we are only going to use full-width images with 800 pixels because we really like them more than they are all full-width, although logically here we also enter a field of tastes.
- If possible, try to make it “pixel-perfect” or, at least, as clear as possible
The only “but” that can be put to the previous image is that it is not “pixel-perfect”. That is to say, since the original image was of more than 1000 pixels when reducing it to 800 pixels in the blog, the pixels can no longer correspond to the original ones. The reduction algorithm tries to achieve the best possible result, but it is inevitable that the image becomes somewhat blurred due to this adjustment process.
Therefore, it would have been better to have reduced the window to about 800 pixels wide to capture its contents. But the problem was that this particular page did not allow it, in doing so it cut part of the content, something that will happen to you more than once. Therefore, there was no choice but to stay in slightly larger dimensions.
For you to better appreciate the effect, compare this “pixel-perfect” version of the previous capture, that is, where the number of pixels used in the display corresponds exactly to the number of pixels used in the capture itself. In our case to demonstrate the effect, the capture has been cut to 800 pixels assuming it is cut to the right (because the web page does not reduce its width to 800 pixels):
In practice, we would not use this capture for the section of the right that has been cut, but it helps me to see the difference between an image that is “pixel-perfect” and another that is not. It is not a flagrant difference, but the “pixel-perfect” version has a perfect sharpness that gives it a plus of quality that is noticeable.
With this particular capture we have had to endure because the limitations of the captured web page prevented us from doing it with a width of 800 pixels, but in other occasions, you will reduce the window perfectly to dimensions that allow a perfect capture at the level of pixels. So, whenever possible, do it.
- Avoid pixelated effects using the PNG format
The pixelated screenshot is something that happens very often and that is really bad conveys a feeling that I cannot qualify more than shabby and that is very demeaning.
Almost always the reason is that the JPG digital image format has been used instead of PNG.
The fundamental difference between these two formats is that PNG uses a lossless compression (without loss of information) and allows working with transparencies, while JPG does not support transparencies, but allows working with loss of information, adjustable by the user.
A greater degree of information loss, or what is the same: worse quality, more pixelated will be the image, but also smaller will be the JPG file.
For us to understand, take a look at the following example, a well-captured capture that is “pixel-perfect” and saved in PNG format. Its file size is 29.9 Kbytes:
- Consider adding a caption
The last advice is very simple: consider always using legends, in each and every one of your images, except in cases where for specific reasons it is not the most convenient.
First, a legend is always a good way to add a little more value highlighting a particularly important aspect of the image and, secondly, it is an item that aesthetically also usually looks very good.
In addition, it helps to break the flow of reading throughout the paragraphs and doing this helps to achieve a more entertaining reading and thus contributes to maintaining the reader’s attention.
What image formats to use for what things
Given the good practices that I have mentioned, I cannot close a post like this without also talking a little about the main formats of images and when to use them, and recommend some tools that will help you a lot in all this.
As for the formats, I will be brief. There are basically two important in this context:
When to use the PNG format
As I said before, PNG is a format with lossless compression. It works especially well when the image contains many very geometric shapes, as is the case for screenshots (for windows, letters, etc.).
In addition, this type of images is especially sensitive to the artifacts generated by JPG images, so it is convenient to use the PNG format for them.
When to use the JPG format
From the above, it is deduced that it is more appropriate for photos without very marked contours, that is, of people, landscapes, etc.
The JPG format allows compression with information loss, which means that if you lower the quality (which the user can adjust) enough information is suppressed by joining pixels with similar color tones, etc. The details of the image are lost.
The advantage is that you can get very small file sizes, but if you do not use it with good judgment, the results can be really bad as you have seen before. Therefore, it is not usually a good option for screenshots.