All You Have To Know About Optimizing Images, from an SEO Point of View
This topic is, at this moment, highly debated by SEO specialists. In this article, we will carefully analyze all aspects of optimizing images, from simple pieces of advice to complex techniques.
How to choose the format, size, and dimensions
The size of an image can impact the page loading time. This is why it’s important to consider this factor. JPEGs are much more friendly, in terms of SEO than PNGs, especially if you don’t need transparent backgrounds. For logos and high-resolution graphics, we can always use vectorial formats, such as SVG (just make sure that the server can cache, compress and resize this format). The GIF format should be used only for simple animations, that don’t need a great number of colors (color depth), with GIF being limited at 256. For more complex or longer animations, it’s indicated to opt for a true video format.
An important factor is the actual size of images (measured in Kb). You will have to keep this size under 100 Kb if it’s possible. If you are obliged to use higher resolution images (for banners, hero products, etc), you can then opt for progressive JPGs, that instantly load the image at a lower resolution, becoming more and more clear as the site loads. It’s important to pay attention to these SEO tactics that Google takes into consideration and that can affect your positions in SERP.
When it comes to dimensions (the height and width of images), make sure they don’t exceed the biggest desktop formats (usually 2560 pixels in width), and that the CSS will automatically adjust them to the display or window size. According to your site, this can mean saving multiple dimensions of the same image, which will be displayed according to the resolution of the device that is used (mobile, tablet, normal or expanded desktops, etc). This step can be taken automatically, using plug-ins or using the attributes <picture> or <srcset>.
If you prefer to do this manually, here are some of the most used tools for compressing images:
GIMP, cross-platform, image editor which can be downloaded;
TinyPNG, which uses intelligent compression techniques to reduce PNG and JPG size;
MinifyWeb, a free service that offers you the possibility to compress files online.
Images of inappropriate sizes will not only affect the loading time of your site but will also increase the number of requests to the server before loading the page, competing with other critical resources. Nevertheless, the format, the size, and the dimensions are not the only factors that affect a site’s loading speed. It depends very much on the way loading is done.
Even if the newest HTTP/2 protocol has improved the process of loading multiple images at once, in some cases you can opt for advanced techniques, especially with very long blog articles or image galleries. Therefore, you can use the lazy loading technique, which will significantly improve your performance. This technique delays the loading of non-critical resources once the page loads. In terms of SEO, “non-critical” usually translates into “off-screen”, which means the elements you can’t visualize yet, located in the bottom of the page. Even if this technique will increase the loading speed, it’s necessary to apply it correctly, in order not to negatively impact the indexing of images.
Note: If you are optimizing an “infinite scroll” page, make sure you check “paginated loading”, using tags such as <no script> for images, etc. Also, if you have problems with the crawling of images, you can include them in the XML sitemap or you can create a separate sitemap for images.
How to use image tags?
If you want the images on your site to be indexed correctly (and to rank high in Google Images), you have to assign them HTML tags, such as <img src>. Until now, Google didn’t index resources such as “background images”, loaded directly from the CSS. Make sure, as well, that the rules in robots.txt don’t prevent the crawling of images.
How to name and describe images, in terms of SEO
This SEO technique is one of the least used, so is often overlooked. First of all, the title of an image is a very good opportunity to use the keyword. Ideally, these keywords should be related to the page on which the image was loaded or to the blog post. If you use a long tail or multiple keywords (pay attention to keyword stuffing), separate them using the minus symbol (“-“). For example, an image for this article should be named “SEO.jpg”, not IMG-349534.jpg.
Title and alt attributes are very simple settings that will not only allow you to obtain a better ranking in Google but will also increase the relevance of the page and enhance users’ experience.
The WebP format
Developed by Google, this format aims to replace JPG, PNG, and GIF. In terms of SEO, Google sets the format WebP as a top preference, therefore your site will have to gain from using it. Moreover, it benefits from a very good compression, being 50 to 60% easier to load than classic formats. JPG is a lossy format, even if it can be compressed easily. PNG is lossless and benefits of transparency, which WebP can do as well. GIFs have fewer colors and take more space compared to WebP, which benefits of 24-bit colors, and the animations are less smaller.
Today, Safari is the only browser that doesn’t support this format yet, but neither do apps for creating images, such as Photoshop, are yet ready for it. It looks like, for a while, we will have to convert images using one of the multiple online tools, such as Convertio.
Conclusion
Both user experience and the site’s loading speed will benefit from the information above. Choose the optimal SEO strategy and you will benefit from high-quality images, without compromising the site’s loading speed.
