Images are the resources that are used the most on the web according to the archive report (Report: Page Weight et Report: State of Images). The average page weight on a desktop machine is about 2062 kB, and the average weight of the images transferred for one web page is around 973 kB. Images represent a good part of the page weight!
Optimize images and reduce their size
The photos and images we use are often oversized. For example, a photo that is not resized, often has a width between 2000 and 4000 pixels. This width is too large as it is displayed on a desktop web page at about 700 to 800 pixels. The browser then makes an extra effort to resize it.
You can also adjust the image quality and choose a lower definition that doesn’t impact the overall quality.
Choose the right format
|Photo||Use .jpeg or .webp|
|Image||Use vector formats like .svg rather than .png or .jpeg when possible.
But don’t forget to minimize or optimize the .svg using tools like compressor.io
|Icons||Use glyphs when possible, or icons and CSS styles|
Work preferably with vectors and glyphs
Vector images and glyphs are lighter than bitmaps. For example, when images are simply decorative and don’t bring any information, it’s best to use vector images or explore another aesthetic approach.
For example, this site use illustrations representing cardboard boxes instead of pictures: Carton plein - Boutique de cartons de déménagements (French)
When you have to choose icons that represent technology practices, favor metaphors that show the true digital impact: “download” instead of “play a video”, “connect to another computer” rather than “transfer to the cloud”... (Proposals made by the Bam collective Cahier d'idées pour un navigateur écologique (French))
For a retro look, often the style of sustainable websites, you can also use the site: Dither it!. However make sure you choose the right options and images you want to apply it on, as it doesn’t always lead to a reduction in weight. This type of rendering may also interfere with the understanding or interpretation of the images for visually impaired people.
Here is an example of an image that has an original size of 1.4 MB and 2800 × 3823 pixels. This image weight and size can be optimized. After resizing, adjusting the quality, and compressing it, this image is at least 14 times lighter. The quality is sufficient for the web.
- Weight: 1.4 MB
- Size: 2800 × 3823 pixels
- After resizing
- Weight: 123 KB
- Size: 640 × 874 pixels
- After resizing and 70% quality
- Weight: 90 KB
- Size: 640 × 874 pixels
- After resizing, quality and compression
- Weight: 72 KB
- Size: 640 × 874 pixels
Display images depending on the size of the screen
A “responsive image” loads the image in a specific size depending on the user device. This requires computing power for the server, which dynamically resizes the image according to the terminal.
To avoid this useless request, it is recommended to compress and resize the images properly and upload one image for each size (desktop, tablet, and smartphone) with the appropriate resolution.
You can do this with the html tag
<picture>, which is widely supported by browsers The good news is that this also works with the “fallback” tag
<picture> <source media="(min-width: 599px)" srcset="large.jpg"> <source media="(max-width: 598px)" srcset="small.jpg"> <img src="fallback.png" alt="My description"> </picture>
- Nicolas Hoizey’s presentation on responsive images: La petite clinique des images responsives (French)
Think about group photos instead of multiple photos
To avoid multiple photos to show an entire team for example, use one photo of the group rather than one photo per team member.
As tempting as it might be to use free and open-source images, these photos do not represent the real world, and the diversity of its population.
As Gerry McGovern wrote in his book World Wide Waste :
If you need to use images, optimize them and consider using real ones of real people doing real things.
Explore other alternatives
Other alternatives do exist, and should be explored. For example displaying images on-demand, or on-click, or even with low resolution.
- Option to display images: The low-tech lab website offers an option to display images (Low-tech Lab – News / blog.)
- Display images on click as suggested in Green by Default
- Images with low resolution or special visual treatment: you can also play with visual treatment of images as suggested in this article Faire un site low tech (French).
Check image accessibility
Text added directly in an image is not accessible and cannot be read by a screen reader. It is therefore important not to include text in images but instead in the alt-text description.
To write a good description you can follow the guidance in How to write an image description. The description has to include the object, the action, and the context of the image. For example, ”Black Lives Matter sign seen in a crowd.”