How to optimize images for the web?

Everyone is aware of it, today, the performance of your website is a priority. You can’t allow yourself to put it aside. And that’s not about to change, as the news on Core Web Vitals indicates.

Influencing the code is never easy. Influencing your server may incur an additional cost. Influencing the images does not cost much, except a little time and a certain rigor.

List images that are too heavy or too big

PageSpeed ​​Insights does this very well. Launch an analysis, once it is finished, go to the Opportunities section. The tool notifies you directly of images that are too heavy or images that are too large for the displayed size.

List images that are too heavy or too big

PageSpeed ​​Insights does this very well. Launch an analysis, once it is finished, go to the Opportunities section. The tool notifies you directly of images that are too heavy or images that are too large for the displayed size.

Optimize poorly sized images

Example of results for incorrectly sized images

Simply upload the reported images. Then resize them to the size of their location. To do this, you can go through the element inspector.

Right click > Inspect > Item Selector

inspector element selector

Thanks to this tool, you see live the display size of the element by hovering your mouse over it.

Now all you have to do is resize the images to the indicated size. For this, you can use software like Gimp, Photoshop, Paint or online tools like the one offered by IloveImg .

Optimize heavy images

When your images are resized, you can compress them. Check that PageSpeed ​​is not reporting other images that are too heavy. If so, download it. Then, two solutions: use a plugin which will save you precious time or do it manually.

To do this, select the images to compress and go to the Compress JPEG site or another one. Load your images in the insert provided for this purpose and click on compress. Once the compression is complete, download the images one by one or all at once with the button provided for this purpose.

What is the ideal format for an image on my site?

Once the image is the right size, it is necessary to take an interest in its format. As a general rule, we prefer the JPEG format in 72 dpi, ideal for web display. If your images are in PNG, check that this is really necessary.

A logo in PNG can be understood (for not having a background), a cover or slider image in png is of no interest. Only use the PNG format if you don’t want to display the background of your images. For icons or logos without a background, it is even recommended to use the SVG format.

Recently, Google recommends the use of new generation web format such as WEBP or WEBPage format.

It’s a relatively optimized format (25-30% smaller than JPEG images), but it’s not compatible with all browsers, so be careful. The XNConvert software is very effective for those who want to convert their images to WEBP, the online tool Convertio.co also (limited to 10 images per day for free).

 

As you have understood, it is not very complicated to optimize the images of your website. The hardest part is finding the time to do it. If you don’t have time, you can find many plugins to do it. Some are free for use on small sites, others work on a flat rate basis, the choice is yours.

Note: no one has been paid for this article.

Leave a Reply

Your email address will not be published.

Scroll to top