2.11 Optimize media for sustainability
Ensure all media – including audio, video, animation, images, and other novel formats, when deemed necessary in the design, are optimized, correctly sized and formatted, use lazy loading where appropriate, and managed effectively.
Criteria
- Need for media:
Do not include media unless it adds value. Consider the quantity, format, and sizes required.- 5 terabytes for 30 seconds of homepage video
- 20 ways to make your website more energy efficient
- AFNOR Spec 5.4.4 (French)
- Decarbonizing the media, broadcast, and streaming industry
- GPF – General Policy Framework (PDF) – 5.1 – Content (Image Suitability)
- GR491 – 2-4009 – Meaningful Images
- GR491 – 2-4010 – Image Avoidance
- GR491 – 2-4011 – Text Replacement
- GR491 – 3-4028 – Meaningful Videos
- GR491 – 3-4029 – Video Avoidance
- GreenIT – 023 – Use CSS instead of images
- GreenIT – 030 – Prefer glyphs over images
- The Carbon Impact of Web Standards (PDF)
- Streaming the future of sustainability (PDF)
- Use multimedia wisely
- Web Almanac: Sustainability
- Why, when and how to use video and animation on your website
- Optimized media:
Resize, optimize, and compress all media. Provide media in appropriate sizes for different screen resolutions, user device capabilities, and user needs. Optimize and compress media appropriately. Provide media in compatible and appropriate formats. Avoid non-native embedded media players.- 20 ways to make your website more energy efficient
- AFNOR Spec 5.4.4 (French)
- Avoid Large Base64 data URLs in HTML and CSS
- Dithering Images
- Factcheck: What is the carbon footprint of streaming video on Netflix?
- Fast load times: Optimize Your Images
- GPF – General Policy Framework (PDF) – 4.7 – UX and UI (Media Choices)
- GPF – General Policy Framework (PDF) – 5.2 – Content (Image Compression)
- GPF – General Policy Framework (PDF) – 5.3 – Content (Video Definition)
- GPF – General Policy Framework (PDF) – 5.4 – Content (Video Compression)
- GPF – General Policy Framework (PDF) – 5.6 – Content (Audio Compression)
- GPF – General Policy Framework (PDF) – 5.7 – Content (File Size Reduction)
- GR491 – 2-4008 – Image Compression
- GR491 – 7-5050 – Sizes and Formats
- GR491 – 7-5053 – Convert and Resize
- GR491 – 7-5054 – File Compression
- GR491 – 8-3060 – Video and Animation Usage
- GR491 – 8-3061 – Optimized Images
- Greening The Web: A Study On Low-Carbon Image Formats
- GreenIT – 036 – Optimize vector images
- GreenIT – 080 – Optimized images
- How can we design sustainably?
- How to Build a Low-tech Website?
- How to Compress a Video File without Losing Quality (Video)
- How To Efficiently Encode Images On Your Website
- How to Properly Size Images to Improve Core Web Vitals
- How UX design can help tackle climate change
- Image Carbon
- Is WebP really better than JPEG?
- Learn Images
- Model, estimate or measure? What matters in video energy use
- Modern way of serving images
- My solar-powered and self-hosted website
- Optimize Images to Improve Sustainability
- Optimize multimedia files
- Optimizing Video For Size And Quality
- Optimizing Video for the Web
- Power consumption of JPEG, WebP, and AVIF
- Practical SVG
- Reduce the weight of a web page: which elements have the greatest impact?
- Replace Your Animated GIFs with SVGs
- Sustainable UX is more than reducing your website’s footprint
- Sustainable Web Design
- The carbon footprint of streaming video: fact-checking the headlines
- Tips for Creating and Exporting Better SVGs for the Web
- UI Tools
- Understanding and Mitigating Webpage Data Bloat: Causes and Preventive Measures (PDF)
- Video – an Environmental Monster?
- WebP vs AVIF – Which is better in 2024?
- Web Almanac: Sustainability
- Which SVG technique performs best for way too many icons?
- Why Web Designers Need To Think About Sustainable Web Design
- World Wide Waste
- Lazy loading:
Incorporate lazy/deferred loading from the start: Consider which media elements are immediately required, and which would be better relegated to loading on specific user interaction. Load data-intensive media on the client side, including the media itself, behind a facade – a non-functional and static representational element.- Avoid hotlinking images with Cross-Origin-Resource-Policy
- Fast load times: Optimize Your Images
- GPF – General Policy Framework (PDF) – 4.1 – UX and UI (Autoplay)
- GR491 – 9-5071 – Autoplay
- GR491 – 9-5068 – Lazy Loading
- GreenIT – 037 – Use lazy loading
- How to Defer Offscreen Images and Background Images
- Lazy Load Background Images with the IntersectionObserver API
- Lazy load third-party resources with facades
- Lazy loading (Wikipedia)
- Lazy loading (Performance)
- Lazy Loading Images Based on Screen Size
- Non-blocking cross-browser image rendering on the canvas
- Web Almanac: Sustainability
- User-controlled media:
Disable auto-play functionality on audio, video, and similar media formats. Give the user full agency over media interactions, including a choice of resolutions and formats, and the option to deactivate media. Inform users of the length, format, and data intensity of the media. Provide the option for data-intensive media to be disabled or provide low-fidelity alternatives.- Ditch 4K video and new tech to fight climate change
- Fast load times: Optimize Your Images
- Focus Mode
- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 4.1 – UX and UI (Autoplay)
- GPF – General Policy Framework (PDF) – 4.7 – UX and UI (Media Choices)
- GPF – General Policy Framework (PDF) – 4.11 – UX and UI (Inform Users)
- GPF – General Policy Framework (PDF) – 5.3 – Content (Video Definition)
- GPF – General Policy Framework (PDF) – 6.4 – Front-End (Image Dimensions)
- GR491 – 2-4010 – Image Avoidance
- GR491 – 7-5050 – Sizes and Formats
- GR491 – 7-5053 – Convert and Resize
- GreenIT – 034 – Avoid resizing images in the browser
- GreenIT – 112 – Adapt audio formats to listening contexts
- OpQuast – 114 – Thumbnails and previews are not larger images resized on the client side.
- OpQuast – 118 – The length of video and audio content is indicated.
- OpQuast – 119 – Videos are user-triggered.
- OpQuast – 120 – Sounds are user-triggered.
- Optimize Images to Improve Sustainability
- Video performance
- Media management and use:
Set up a media management and use policy. Include criteria for media compression, rendering impact optimization, file formats, data retention, review, and deletion.- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 4.7 – UX and UI (Media Choices)
- GPF – General Policy Framework (PDF) – 4.11 – UX and UI (Inform Users)
- GPF – General Policy Framework (PDF) – 5.1 – Content (Image Suitability)
- GR491 – 8-3057 – Media Management
- GR491 – 8-3060 – Video and Animation Usage
- Green by Default
- Greening of Streaming
- Guidelines for Multimedia on the Web
- Image management
- Optimized images to Improve Sustainability
- Sustainable Entertainment Alliance
- Tips for Effective Image Management on Your Site
- Using video considerately on sustainable websites
Benefits
- Economic
Eliminating data-intensive media entirely and using alternatives such as transcripts reduce costs associated with hosting and data transfer. - Environment
Reducing the battery drain associated with loading data-intensive content by preventing auto-loading or delaying it until the moment it is required reduces energy emissions associated with data transfer and renering. - Performance
Tailoring user experience to the device, situation, and environment of the user by having different resolutions and quality formats available reduces wasted bandwidth. This can boost performance for users who make choices to reduce the data downloaded. - Social Equity
Providing alternatives to data-intensive media allows with limited bandwidth or older devices to access content.
GRI
- Materials: High
- Energy: High
- Water: High
- Emissions: High