Skip to Main Content
Sustainable Web Design Logo
  • Home
  • Guidelines
  • Emissions
  • Ratings
  • Contact

◂ User Experience Design guidelines

2.16 Optimize media for sustainability

User Experience Design

Ensure media, if required, are optimized, correctly formatted, and sized, with deferred loading as appropriate, and are managed effectively.

Criteria

  • Need for media: Machine-testable
    Do not include any video or audio unless it provides positive value. Disable auto-play functionality on audio and video.
    • 20 ways to make your website more energy efficient
    • AFNOR Spec 5.4.4 (French)
    • Decarbonizing the media, broadcast, and streaming industry
    • GR491 – 3-4028 – Meaningful Videos
    • GR491 – 3-4029 – Video Avoidance
    • Streaming the future of sustainability (PDF)
    • The Carbon Impact of Web Standards (PDF)
    • Use multimedia wisely
    • Web Almanac: Sustainability
    • Why, when and how to use video and animation on your website
    • Zoom Emissions
  • Optimized media: Machine-testable
    Optimize and compress media appropriately. Provide media in compatible and appropriate formats. Avoid non-native embedded media players.
    • AFNOR Spec 5.4.4 (French)
    • Factcheck: What is the carbon footprint of streaming video on Netflix?
    • 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 – 7-5054 – File Compression
    • GR491 – 8-3060 – Video and Animation Usage
    • How can we design sustainably?
    • How to Compress a Video File without Losing Quality (Video)
    • Model, estimate or measure? What matters in video energy use
    • Optimize multimedia files
    • Optimizing Video For Size And Quality
    • Optimizing Video for the Web
    • Reduce the weight of a web page: which elements have the greatest impact?
    • The carbon footprint of streaming video: fact-checking the headlines
    • UI Tools
    • Video – an Environmental Monster?
    • Web Almanac: Sustainability
    • Why Web Designers Need To Think About Sustainable Web Design
  • Deferred loading: Machine-testable
    Load data-intensive media on the client side, including the media itself, behind a facade – a non-functional and static representational element.
    • GPF – General Policy Framework (PDF) – 4.1 – UX and UI (Autoplay)
    • GR491 – 9-5071 – Autoplay
    • Lazy load third-party resources with facades
    • Lazy loading
    • Lazy loading (Performance)
    • Web Almanac: Sustainability
  • Labels and choice: Machine-testable
    Let the user control media, including a choice of resolutions and formats and the option to deactivate media. Inform users the length, format, and data intensity of the media.
    • Ditch 4K video and new tech to fight climate change
    • 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.3 – Content (Video Definition)
    • GR491 – 7-5050 – Formats and Sizes
    • GreenIT – 112 – Adapt audio formats to listening contexts
    • OpQuast – 118 – The length of video and audio content is indicated.
    • OpQuast – 119 – Videos are user-triggered.
    • OpQuast – 120 – Sounds are user-triggered.
    • Video performance
  • Management and usage: Machine-testable
    Establish media management and use policy to evaluate and reduce the overall impact of media, such as audio, video, or emerging media formats. Include criteria for media compression and file formats.
    • 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)
    • GR491 – 8-3057 – Media Management
    • GR491 – 8-3060 – Video and Animation Usage
    • Greening of Streaming
    • Guidelines for Multimedia on the Web
    • Sustainable Entertainment Alliance
    • 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

View the Guideline

Tags

PerformanceSoftwareUIUsabilityContentAssetsHTML

Share

More user experience design guidelines

2.1 Display any factors that have a negative impact on your project

User Experience Design

2.2 Understand user requirements or constraints, resolving barriers to access

User Experience Design

2.3 Understand the impact for non-users

User Experience Design

Learn about W3C’s Sustainable Web Interest Group:

A global community advancing sustainability on the web.

Explore the group

This site is brought to you by

Mightybytes Wholegrain Digital
Website Carbon

This page loaded in 0.25 seconds and emitted just 0.5g of CO2

Visit Website Carbon
Ecograder

How green is your website?

Visit Ecograder
© Copyright Sustainable Web Design 2025. Privacy Policy.