Images are a key feature for many sites. Without them we would be looking at plain lines of text. But large high-resolution images can really slow down the loading process making websites heavy and slow. Optimizing images can become a crucial point for front-end web performance improvement.
There are several different options for image optimizations. We recommend trying some of them to boost the website performance.
Standard image formats contain a lot of additional information that increase their initial size. They are not used in any way on the website but can seriously increase the loading time for your users. That's why you should consider compressing such images with external tools like MozJPEG or Guetzli. Or you can simply turn those images into WebP files.
WebP images are 25 – 35% smaller than typical images like JPEG and PNG. Simply switching all images to WebP can decrease the size of the web page making it faster to load which is exactly what we want for that front-end optimization. This format is supported in all frequently used browsers so you don't have to worry about your images not showing up to users.
You can use Squoosh
to get smaller images. This tool is made by the Google team. Squoosh supports a bunch of formats and fine-tuning for each of them. Besides, it is also available as a CLI application for easy integration into the automation pipeline.
Although we have to warn you that WebP has its downside too. This format doesn't support progressive rendering so it might take some time for users to finally see the image.