9925838612 [email protected]

The weight of the optimizing images on your site has a direct impact on the loading time of your pages. Optimizing your visuals can save you precious seconds, as long as you respect the JPEG or PNG formats and choose the appropriate compression!

Why reduce the weight of its images?

One in two users abandons their search if a mobile site takes more than 3 seconds to load, and each additional second impacts up to 20% of conversions on mobile. You understand the importance of having a site that loads as quickly as possible!

Reducing the loading time of your pages will allow you to:

  • Lower the risk of a user abandoning a page when loading
  • Ensure more pleasant navigation for your users
  • Allow Google to crawl more pages with the same allotted time, which will have a positive impact on your SEO.

The first precaution to take to have reasonable image weights: use visuals with the right dimensions. A high-quality visual that is not resized will often weigh 10 to 20 times too high! Imagine the disaster in terms of page load time.

But there are other methods available to optimize your photos and illustrations. We explain the basics to choose the right image format (JPEG, PNG) in order to ensure lightweight and without loss of quality.

When to use the JPEG format?

JPEG is one of the most widespread formats because it allows obtaining images with a low weight. It uses a mechanism called compression which slightly degrades the quality to lighten the amount of information to be stored.

It is, therefore, necessary to know in which case it can be used without damaging the image.

✔️Jpeg is ideal for photographs, which are very rich in information. The compression algorithm optimizes the weight necessary to store the information, and any loss of quality is not visible to the naked eye.

❌On the other hand, JPEG is to be avoided for illustrations and logos: with their large areas of color, deterioration will be seen very quickly.

Note: If you are working on your images in Photoshop, the “Save for web” function will allow you to choose advanced options for your export.

By selecting the JPEG format there, you will be asked to choose a quality index between 0 and 100: this is the compression setting that the JPEG format allows.

The lower this value, the more the image will be compressed: its weight will be lower, but it will lose quality.

So, you can look for the best quality-to-weight ratio for your image. In a photo, you can usually go down to a quality of 70 with no visible deterioration, and sometimes even down to 50.

When to use the PNG format?

Conversely, an image in PNG format will always ensure optimal quality: you will not have any loss. PNG also makes it possible to use transparency in images.

On the other hand, PNG has a much higher weight with complex images.

✔️It is perfect for illustrations and logos, which require lossless export and will not be very heavy due to their low complexity.

❌ Conversely for photographs, PNG is therefore not at all suitable: the great richness of pixels will be very heavy to record.

Please note: your image processing solution will sometimes offer you to choose between PNG 24 and PNG 8: we strongly recommend that you opt for PNG 24.

Indeed, the second, similar to the gif format, only saves a maximum of 256 different colors in your image, which will degrade your image.

Does it really work?

By applying these few rules, you will quickly observe radical differences in weight between the export in JPEG and the export in PNG of the same visual.

Below is a comparison: for a photograph with large dimensions, the weight is divided by 5 by choosing the right format!

o further optimizing images the loading time of its site

You now have the fundamentals to optimize the weight of the images on your site. But you can go even further to save some precious kilobytes when your pages load:

  • Integrate illustrations in vector format: thus, by displaying your logo thanks to its source file in SVG format, you will save weight even better than if you had used an export in PNG.
  • Take an interest in new-generation image formats: WebP, JPEG XR or JPEG 2000 formats can offer you even more interesting weight savings. Be careful, however, they are not yet supported by all browsers: you should therefore always provide images in JPEG or PNG just in case.

Do you want to optimize the loading speed of your site by going beyond images? The experts of our agency specializing in ergonomics and web design are at your disposal to set up a performance-optimizing images strategy for your site!