This post advises on optimizing website images for better performance. Tips include using CDNs, compressing images with tools like Squoosh and ImageOptim, lazy loading, serving responsive images, ensuring correct dimensions, and using modern formats like WebP. Improving image efficiency enhances user experience and boosts search engine rankings.
Are you working on improving your websites performance and you encountered a warning on PageSpeed Insights saying you need to encode images efficiently?
We’ll talk about what you can do to improve the images you’re serving on your website. More specifically, we’ll go over some of the best practices and approaches to offer your visitors the best possible user experience.
——————————————
In essence, you’re getting this warning because you need to optimize them and reduce their file size, which will result in your page loading faster while consuming less data. However, there are multiple ways to conserve bandwidth and load data more efficiently.
Use image CDNs
Image content delivery network (CDN) is an excellent option for optimizing images. These types of CDNs specialize in transformation, optimization and delivery of your images. Furthermore, they usually offer tens, and in some cases even hundreds of different image transformations, which typically result in a significant reduction in image file sizes.
Compress images
This is one of the most important image optimization techniques every website today should employ. One of the main reasons for this is because images are candidates for largest contentful paint (LCP), one of the three Core Web Vitals (CWV).
There are multiple tools out in the world wide web that can compress images for you, however we’re only going to mention a couple here. One option you could go for is a tool called Squoosh, which is an online image compression tool, maintained by Google Web DevRel team. Another way you could go about this is by installing a compression tool locally on your computer. One of these tools is ImageOptim, which allows you to drag and drop images into its user interface. Furthermore, it will automatically compress images without sacrificing their quality.
Lazy loading images
Lazy loading is a process, where images, or other types of resources, are being loaded as they are needed. This is one of the best practices you need to employ on your website, in order to conserve users’ bandwidth and make your pages appear to load faster.
Serve responsive images
You can improve your visitors’ user experience by serving different image sizes to different devices. There is no point in loading a desktop sized image on a mobile device, since the screen is so much smaller. It might look good on both devices but, the real crux here is that you’d waste so much bandwidth when loading it on a mobile device, it can make your website appear slow.
In other words, serving responsive images saves data for your users by serving smaller images to devices with smaller screens. Furthermore, the effects of faster image loading can also extend to better LCP times and website performance overall.
Serve images with correct dimensions
Lighthouse makes it easy to identify incorrectly-sized images, which is also a tool that PageSpeed Insights uses to evaluate web pages performance. The best approach regarding this optimization technique is to use srcset and sizes attributes, which allow you to serve different images to different display densities. To clarify, we’re referring to different versions of the same image that differ in size.
Moreover, by employing this technique you can also avoid layout shifts, which will have a positive effect on cumulative layout shift (CLS) metric, which is another one of the core web vitals.
Serve images in modern format (WebP)
WebP images are smaller than their JPEG and PNG counterparts. Furthermore, by converting your images to WebP, you can reduce 25%-35% in their file sizes. Therefore, it’s an obvious choice of optimization techniques, when it comes to improving user experience for your visitors.
Conclusion
To wrap it up, we went through several different steps and techniques you can use to optimize the images on your website. Moreover, by improving the performance of your website wherever you can, you’ll create a better user experience for your visitors, which will also make search engines like Google like you more and reward you for your efforts by ranking your website higher.
