2.15 Take a More Sustainable Approach to Image Assets

https://w3c.github.io/sustainableweb-wsg/#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.

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