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.

More info

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))

More info

Compress images

After you resize and optimise your images, compress them. You can use tools like Shortpixel, ImageCompressor, TinyPNG before you upload them online.

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.

If you are using a CMS like Wordpress, you can also use plugins like shortpixel.com or imagify.io.

Optimization example

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.

Default
  • 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
Image of a colourful dish.
More info

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 <img />.

Example

<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>
                    
More info

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.

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.”

Unless specified otherwise, the content of the website is available under the licence terms Creative Commons Attribution 4.0 International license.

Come talk with us on https://slack.designersethiques.org, channel #projet_ecoconception.

Authors of the guide: Aurélie Baton and Anne Faubry.