7.1 Images

Images are the most widely used resource type according to HTTP archive reports (Report: Page Weight and Report: State of Images). The average size of a desktop page was 2,174 kB according to a sample tested in January 2022, and the average size of images loaded per page was 958 kB. In other words, images represent on average 44% of the size of a webpage in 2022!

Resizing images

Photos and images we use are often oversized. A non-resized photo typically measures between 2,000 and 4,000 pixels in width. This is useless since it will be displayed on a desktop webpage at about 700 to 800 pixels in width. Not only is the image too heavy, but the browser is having to compute for the resizing as the page loads.

This is why it is important to crop the images to fit the maximum display size for the users (such as for a wide computer screen). The smaller the image, the more it can be resized and the lighter it will be. Therefore, prioritizing smaller or medium sized images over large ones is a good design practice.

Questions to be answered

• Is a full-width image necessary?
• What is the maximum user display size?
• Can the page design be adjusted so that my image is displayed in a smaller size without sacrificing the visuals?

Choosing the best-suited format

Compressing images

After resizing and optimizing your images, compress them before uploading them. Compressing consists in simplifying the image's code in a way that is imperceptible to the human eye. For instance, this can be achieved by reducing the number of colors in an image: if two shades of black have a very similar color code, the compressing tool can harmonize them by making them the same color. The human eye will not be able to pick up on this. However, the amount of information stored in the image, and its size, will be reduced.

Some tools even allow different types of compression based on the purpose of your image. You could pick between "lossy" compression, where the image weight will be reduced as much as possible at the expense of some quality, and a "lossless" compression where the weight reduction will not be as significant but the quality will be preserved (more information available on Shortpixel). For instance, if your image contains text or important details, you might want to opt for a "lossless" compression. However, if it is a photo, a "lossy" compression might well be enough.

To compress your images, you can use tools such as: Shortpixel, ImageCompressor, or TinyPNG.

To achieve an 'old school' halftone screen effect, often associated with eco-designed websites, you can use the following tool: Dither it!. But be mindful to select the options and images you want to apply them to carefully, because not all will result in a drop in file size. Be mindful also that this type of output can get in the way of easy comprehension and interpretation for people with visual impairments.

If you are using a CMS like WordPress, you can also use plugins such as shortpixel API tools or imagify.io.

Adapting images to screen size

The concept of “responsive images” makes it possible to provide an array of image formats and sizes to the browser from which it selects the most adequate one to load depending on the terminal and connectivity of the user.

Thus, after compressing an image, it is recommended to provide the web developer with several versions of it with different resolutions so that they can be stored on the website - at least one for mobile and one for desktop.

This has several benefits:

• Savings in data transfer: Avoids loading a 1,600 pixel image on a 375 pixel mobile screen.
• Savings in power used by the servers: Avoids having the browser perform dynamic resizing for the user terminal's display, which requires computing power from the server.

To achieve this, there are two HTML attributes available for images:

• <srcset>: Lists available images and their sizes, separating them with a comma
• <sizes>: Shows the storage used by an image based on its resolution

If we pair this with the HTML tags <picture> and <source> that make it possible to use more efficient formats such as webp, the browser will not only be able to select the most adequate size, but also the most optimal format.

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>

No cause for concern on the support side, browsers that are not compatible will rely on the usual src attribute.

Delaying the loading of images

This technique, more commonly known as lazy-loading, aims to delay loading images that are not yet visible on screen, such as those found lower on the page. The direct consequence is a substantial saving in data used since users who do not end up scrolling down will not download those images.

This practice used to require a Javascript tasked with verifying which images had to be loaded up onto the page as it scrolled, which could come with a hefty technical cost. Nowadays, the HTML attributeloading is available to accomplish this. When its value is lazy, the browser can natively accomplish this task, while also being compatible with "responsive images".

Example

<img src="regular.jpg"

alt=""

width="960"

height="540"

loading="lazy" >

Support for this feature is already substantial (source: Can I use) and incompatible browsers simply ignore it.

Considering group photos rather than individual ones

To avoid having a multitude of pictures, a group photo can be an interesting asset to take advantage of. For instance, to introduce a team, choosing a group photo can be just as effective as having one photo for each member.

In addition to this, it can be tempting to use copyright-free photos from image banks. However, these photos are often devoid of meaning for your context, and too far-removed from the reality and diversity of the population.

As Gerry McGovern wrote in his book World Wide Waste, if you are going to use photos, you might as well use photos of real people:

Exploring other alternatives

Other alternatives could be pursued, such as displaying images on click, or in low resolution.

• "Show images" option: The Low-tech lab website offers an option to display images by clicking a button (News on low-tech technologies (French)).
• Display the image on click as suggested in Green by Default.
• Low resolution or special visual treatment: You can also use a visual treatment, such as a halftone screen effect, on photos and images as suggested in Creating a low-tech website (French).

Ensuring accessibility for images

Text included in an image is not accessible: it cannot be read by a screen reader. It is therefore important not to include essential text in an image, but rather in the alt-text description.

The alt-text description is a description of the image integrated into the website's code. It is read by the screen readers used by people with visual impairments, with attention deficits, or who have trouble reading. It is also displayed when the connection is too slow and unable to load up images. In France, alt-text descriptions were made compulsory by the General Repository for the Improvement of Accessibility (Référentiel Général d'Amélioration de l'Accessibilité - RGAA (French)).

To learn how to write a good description you can follow the advice presented in this guide, How to write an image description. The description should contain the subject/object, action, and the context. For instance: "Black Lives Matter placard in a crowd.”