2.15 Take a More Sustainable Approach to Image Assets

Of all the data that comprises the largest over-the-wire transfer rates within the average website or application, images are usually those that are responsible due to their quantity and usefulness. As such, doing all you can to reduce their size and unnecessary loading will be beneficial for sustainability.

Criteria

Need For Images: The need for images has been determined considering the quantity, format, and size necessary for implementation.
Optimize Images: Resize, optimize, and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Lazy Loading: Provide Lazy Loading to ensure image assets only load when they are required.
Sizing And Deactivation: Let the visitor select the display size, and provide the option to deactivate images.
Management And Usage: Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.

Impact

High

Effort

Low

Benefits

Environmental:
Image assets often make up the largest part of a web page’s overall size. Compressing and delivering them in lightweight formats that improve the user-experience can often reduce the hardware burden on older devices. This in turn can reduce overall consumer e-waste by reducing forced upgrade cycles.
Social Equity:
Lightweight images work better for visitors in low-bandwidth areas and on older devices, as long as the device can support the formats used.
Accessibility:
Delivering images in ways that are meaningful to visitors improves access to information.
Performance:
By optimizing your images, you can significantly speed up your website in terms of HTTP requests, data transfer, and even in some cases the physical rendering effort – all of which have an impact on a visitor’s user-experience and speed of access.
Economic:
Visitors with data caps will benefit from optimized resources as they will be able to consume more content, and hosts of content will endure smaller bills due to lower overheads.

GRI

materials: High
energy: High
water: High
emissions: High

Example

Code:

<img src="image.jpg" alt="..." loading="lazy"/>
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Lazy loading.

Resources

View the Guideline