Images and site performance, optimization’s advice
At the risk of sounding repetitive, today our blog is going to cover again the topic of the SEO optimization interventions and, particularly, to the tools and techniques that can help us optimize images and onpage multimedial contents, allowing us not to be a burden on site performance.
Reiterating the value of the images to the SEO
The issue is pretty frequent on these pages, and could not be any different, given the attention Mountain View invites you to keep both about site speed and SEO (lately, with Martin Splitt and John Mueller’s video a few weeks ago) and on Google Images value as an alternative and strategic organic traffic source. Moreover, all it takes is a glance at the images search‘s evolution to understand how hot still is this dish and how much the american company is investing on it.
7 suggestions to optimize images and performances
Therefore, the new guide published on web.dev provides us a 7 steps path to succeed in reaching the target (or better, targets) of images optimization in order to impact the least on site performance, through some tools and techniques fairly simple to use even for beginners.
- Use Imagemin to compress images
- Replace animated GIFs with videos for faster page loads
- Use lazysizes to lazyload images
- Serve responsive images
- Serve images with correct dimensions
- Use WebP images
- Use image CDNs to optimize images
1. Compress images with specific systems
Katie Hempenius, Google’s software engineer, is the one describing the process to follow in order to effectively use Imagemin, a tool available both as CLI and npm form that allows to compress images without losing quality. The starting point is pretty clear: the uncompressed images bloat pages with unnecessary bytes, even because the average user would never notice the difference in quality.
A transition on Google Lighthouse allows us to check the opportunities to improve page load by compressing images, while using Imagemin is “the perfect choice” because the software supports a wide variety of image formats and it can also be easily integrated with auto-fill scripts and tools.
Without further details, with this tool one can decide if the compression should be “lossy” or “lossless”, meaning how many data to lose; obviously, lossy compression reduces the file’s sizes at the expense of a possible quality decrease, while there is no such loss in the other typology. According to the Googler’s experience, though, the former is generally the best choice, because it allows to considerably reduce the size of the files and customize levels of compression to perfectly meet the needs.
2. Convert heavy gifs in other video formats
The second issue is entrusted to Houssein Djirdeh, another member of the Google team, that offers us some technical advice regarding the inclusion of animations on page: to make loading faster, he says, it is better to use videos instead of gifs. The are multpiple reasons for that, starting from the fact that animated gifs can really be huge.
Djirdeh reassures us, though: converting huge GIFs to videos is a relatively fast process, that nonetheless offers great results in terms of user bandwidth savings. In this case as well, first step is to check on Lighthouse the actual presence of gifs that can be converted, while the suggested software to carry on this operation is FFmpeg, that indeed transforms the animation in a MP4 or WebM video (a format not really suitable for every browser).
The saving rate between the weight of a gif and a video is blatant: in the example, we move from the 3.7 MB size of the original animation to the 551 KB of the MP4 version, up until the 341 KB of the WebM version. Through several commands and elements (such as <video>) it is possible to set videos that have gifs’ same peculiarities, so that have an automatic play, that go on and on on loop (but it is also possible to block the ongoing reproduction) and that are silent.
3. Use lazysizes to the lazyloading of the images
Again, here is Katie Hempenius to explain how to use images lazyloading, a.k.a the “slow loading” that allows us to plan the onpage resource loading whenever necessary, rather than in advance, and so to avoid waiting for a complete loading that inclued unnecessary resources. Images placed out of the screen during initial pageload are ideal candidates for this technique, and using lazysizes makes this strategy very simple to implement.
Lazysizes, the main library to perform the operation, is a script that loads images in a smart way while the user moves throughout the page, giving priority to the ones the user is going to meet sooner. It is deemed to be a good choice because it is highly efficient in detecting the visibility of page elements.
4. Use responsive images
Next piece of advice is very easy to understand: is once again Hempenius to highlight how the simple use of responsive images can solve slow loading problems, because “serving desktop-sized images to mobile devices can use 2–4x more data than needed”, while a different approach to multimedial contents – moving beyond the general responsive site – allows us to offer different size images to different devices.
Other than suggest several tools to carry out the operation (sharp npm package and ImageMagick CLI tool, as well as Thumbor and Cloudinary), the expert Googler also answers to a frequent question: “How many image versions should I create“? Obviously, there is no such thing as a unified or correct answer, but “it is common to serve 3-5 different sizes of an image: serving more image sizes is better for performance, but will take up more space on your servers and require writing a tiny bit more HTML”.
The attributes of the images
Is equally important to know which <img> tag attributes to use in order to reach the desired result:
- srcset – is a comma-separated list of image filenames and their width or density descriptors; the width descriptor prevents the browser to download the image in order to determine its size.
- sizes – the sizes attribute tells the browser how wide the image will be when displayed. However, the sizes attribute has no effect on display size (you still need CSS for that). To determine which image to load, the browser uses this information, along with what it knows about the user’s device, like dimensions and pixel density. Under equal conditions, a high pixel density display would appear sharper than a low pixel density one, that is why we need to use several versions if we wish to provide our users of the sharpest images possible despite the device’s pixels.
- src – the src attribute makes this code work for browsers that do not support previous attributes, allowing the loading of the resource specified by the src attribute.
5. Offer correctly sized images
Let’s further proceed with very practical suggestions, starting from a frequent oversight: not to scale down an image before adding it to the page, therefore wasting users’ data and hurting page performance. Katie Hempenius suggests yet again to launch a check on Lighthouse in order to detect all those images with wrong dimensions, but also clarifies how to actually determine the right measurements.
According to the Googler, this topic can be “deceptively complicated” and there are two kind of approaches, the good and the better: both use CSS units and allow to enhance performance, but the latter requires a bigger effort and more time to understand and implement, bringing better results anyway.
- The good approach is based on relative and absolute units: the formers allow to resize the image to a size that will work across all devices, while the others will resize the image to match the size that it is displayed at. The DevTools Elements panel could be used to determine the exact dimension an image is being shown.
- The best approach takes longer: first of all, we need to set the absolute units with the srcset and sizes attribute of the image, and then the relative ones using responsive images. The starting point is always the same: an image suitable for all devices will be uselessly heavy for smaller devices, Il punto di partenza è sempre che un’immagine che funziona su tutti i dispositivi sarà inutilmente grande per i dispositivi più piccoli, and so it is possible to set more suitable dimensions to different devices.
There also are some specific tools able to support this work, such as ImageMagick to resize images to 25% the size of the originals and to scale them to fit within “200px wide by 100px tall”.
6. Take advantage of the WebP format
Straighter to the point is the sixth suggestion, the one advising to use WebP file format instead of any other typology. Reasons are pretty clear: WebP images are smaller of the JPEG and PNG ones, with an average reduction of 25–35% on the entire file size, directly impacting the page’s dimensions and improving its performance.
Even two giants such as YouTube and Facebook use these kind of files: on YouTube the transition to WebP previews generated a 10% quicker page load; moving to the new format, Facebook registered instead a 25-35% saving compared to JPEG files sizes and a 80% one on PNG files.
7. Use image CDNs to optimize resources
Last Katie Hempenius’s piece of advice regards image CDNs (Image content delivery networks), the image distribution network that, according to the Googler, are excellent for optimization given the fact that they allow a 40/80% saving on the entire file dimension.
CDNs are systems specialized in conversion, optimization and deliver of images. For every image uploaded through them, the URL of the resource will not only display which image to load, but also parameters such as dimension, format and quality, simplifying the creation of different versions of an image for different cases of use. They differ from image optimization scripts during the creational phase because they generate new versions of the images when necessary, and so they are generally more suited to create strongly customized images for each single client compared to build scripts.
How to choose an image CDN
There are many good options for image CDNs: some providers will have more features than others, but all of them will probably help you save bytes on your images and therefore load your pages quicker. Besides feature sets, other factors to consider when choosing a network are cost, support, documentation, and ease of setup or migration.
