We have written a lot about content and website optimization recently. There is one more very important element influencing the perception of your website by the user. These are, of course, photos, graphics or infographics. How should they be prepared to become your website’s showpiece? Is it enough to take a picture and simply upload it to the website?
Remember the consistency of all photos on the page
Even on very simple pages you can find a few photos on various thematic pages. Larger pages have several dozen visual elements “inside”, and the online store has thousands of different photos. It is important that when publishing photos, you make them consistent with yourself. We write here primarily about visual aspects, i.e. colors, brightness and contrast. If one photo is very bright and an underexposed photo appears next to it, the effect is very weak.
Standardization for websites is very important. After all, it is a showcase of your company. Of course, the budget often does not allow a professional to take photos of all products from the offer (this would be the best solution), but even photos taken at home can be adapted to other photos with graphic processing. The quality will be worse, but, although in the miniatures, the disproportion should not be so visible. Otherwise, the potential customer may simply not pay attention to some of the products or even exit the page.
Of course, there are a lot of graphic tricks to sharpen, improve a given photo. However, you have to be careful, if we start playing with one photo in this way, it may turn out that the others start to differ significantly from it. The same standard must be ensured for all photos to avoid confusion and inconsistency. It takes a lot of time, but it is still worth fine-tuning this element of our website.
Proper photo optimization
An article without the word optimization would not be complete, but in the case of photos it is really important, although many people forget about it. First of all, the size of the photo is very important, it is obvious that it cannot be too small. However, you also have to be careful that it is not too big. Unreduced photos increase the size of the site and slow down its loading. On the page, the effect is the same, because the photo can automatically shrink to the size of the field, but its weight is still high. As a result, there is a problem in the usability of the site for people with a slow Internet connection or using the network on a mobile phone.
The photo should not be wider than the width of the text at which it is inserted. In the case of our blog, the text has a maximum width of 1140 pixels and the photo should not exceed this size. Therefore, before adding them to the page, you have to reduce them (even in a simple and often free graphics program) to the necessary dimensions. You can also reduce weight by compressing the photo. There are special tools for this (e.g. https://compressor.io/) that allow you to reduce the file size by up to 80% without losing quality. 30 seconds and it’s ready, photo reduced, page weight too.
Don’t forget about altos!
Before adding a photo to the website, it is worth doing one more important thing, which is adding alts to it. Thanks to this, the image will be displayed, for example, in Google Images, for phrases entered as alt (higher or lower, depending on the position of the site). What does alt look like? It’s just the file name you want. If the photo shows a computer lying on a desk, the alt might look like a computer-on-the-desk.jpg instead of DSCN7899.jpg. Again – a few seconds and we have a better website for search engines, as well as a chance for more traffic from image searches.
In conclusion, adding photos to a website is not as easy as it may seem. You should work out a pattern that we repeat each time when publishing a new photo. Small graphic processing, adding the same filter as for other photos and of course optimization – reducing the size, compression, adding altos and only publishing. A few minutes and we are sure that the uploaded image matches the rest and is properly optimized.