Skip to main content
WES-GBeta
  • Guidelines
  • About
  • Contribute
  • Get The Badge

Filter by topic

Governance

  • 0.1 Documented Policy
  • 0.2 Essential Tracking and Ads

UX / Design

  • 1.2 Rich Content
  • 1.3 Use of Images
  • 1.4 Awareness
  • 1.5 Data Transfer and Emissions
  • 1.6 Carbon Aware Design
  • 1.7 Colour Scheme
  • 1.8 User Retention

Images

  • 2.1 File Formats
  • 2.2 Image Optimisation
  • 2.3 Image Resolution
  • 2.4 Browser Cropping

Video

  • 3.1 Autoplay
  • 3.2 Script Loading
  • 3.3 Streaming Resolution

Content

  • 4.1 Content Audit
  • 4.2 Digital First
  • 4.3 Easy Access
  • 4.4 Descriptive Headings

Fonts

  • 5.1 Font Variations
  • 5.2 File Formats
  • 5.3 Clean Files
  • 5.4 System Fonts

Web Development

  • 6.1 Lazy Loading Images
  • 6.2 Responsive Design
  • 6.3 Modular Design
  • 6.4 Minification
  • 6.5 Templates
  • 6.6 Asset Loading
  • 6.7 Analytics
  • 6.8 Data Minimisation
  • 6.9 Stylesheet
  • 6.10 Text Compression
  • 6.11 Carbon Aware Development

Development Operations

  • 7.1 Bad Robots
  • 7.2 Dev Environments
  • 7.3 Dataset
  • 7.4 Site Architecture
  • 7.5 Caching
  • 7.6 Pipeline Code
  • 7.8 Green Hosting

6.2 Responsive Design

Ensure that images are responsive so that images are optimised for the screen size and pixel density that they are being displayed on.

Easy to implement

5 High impact score

Introduction:

Utilise image srcsets so that the browser can pick the most appropriate image based on the device’s resolution. 

Resources:

Article by the engineering manager on Google Chrome. 

Smashing Magazine

Industrial Empathy

← Previous Next →

© 2025

Sustainable Website Design by: Kyan, development: Complex Creative & Studio 24

Privacy Policy Cookie Policy