Sustainable UX design: reducing your digital carbon footprint

Sustainable UX design is a design methodology that treats energy consumption and carbon emissions as first-class design constraints, alongside performance and usability. It involves making design and engineering decisions that minimise data transfer, device processing overhead, and server energy consumption — reducing the environmental impact of digital products. Practically, it includes optimising images and fonts, removing unused code, supporting dark mode, designing efficient user journeys, and choosing green hosting providers.

Digital infrastructure accounts for an estimated 3–4% of global carbon emissions — comparable to the aviation industry. A single web page visit might emit a few grams of CO₂, but at scale (millions of page views per month), this accumulates significantly. The exact impact depends on page weight, server energy source, network infrastructure, and the user's device. For high-traffic properties, meaningful carbon reductions are achievable through design and engineering optimisation, particularly image and asset reduction which directly reduces data transfer emissions.

Image optimisation is typically the highest-impact action because images account for 50–70% of most web pages' total weight. Converting images to AVIF (50% smaller than JPEG), correctly sizing responsive images, implementing lazy loading for below-fold images, and removing images that don't add genuine user value can reduce page weight by 40–60% on image-heavy pages. JavaScript bundle size reduction and removing unused CSS are the next highest-impact actions for most modern web applications.

On OLED screens (the dominant technology in premium smartphones and increasingly in laptops), individual pixels generate their own light. Dark pixels consume significantly less power than light pixels, and pure black pixels on OLED screens consume effectively zero power. Supporting system dark mode via CSS prefers-color-scheme allows OLED users to reduce their screen's power consumption, extending battery life and reducing energy use. This makes dark mode simultaneously a usability feature, an accessibility feature (for light sensitivity), and a sustainability feature.

Website carbon can be estimated using tools like Website Carbon Calculator (websitecarbon.com), Ecograder, or the CO2.js JavaScript library. These tools estimate emissions based on data transfer per page view, the estimated energy consumption per GB of data, and the carbon intensity of the hosting provider's energy mix. For more rigorous measurement, integrate CO2.js into your analytics pipeline to calculate per-session and per-page emissions using real traffic data. Green hosting (AWS, Google Cloud, Azure renewable energy regions, or verified green hosts via the Green Web Foundation) significantly reduces emissions per GB served.

AVIF is the most sustainable image format for photography and complex imagery in 2026, delivering approximately 50% smaller files than equivalent-quality JPEG with browser support exceeding 95%. WebP is a solid alternative with slightly larger files but broader older browser support. For simple graphics, logos, and illustrations, SVG is the most sustainable option as it's resolution-independent and typically very small. PNG should be reserved for images requiring transparency where SVG is not appropriate. Avoid GIF for animations — use video (WebM/AV1) instead, which can be 80–90% smaller for equivalent animated content.

Rarely. Most sustainable UX practices are simultaneously better UX practices: faster page loads improve conversion rates and user satisfaction; efficient user journeys reduce friction; correctly optimised images are indistinguishable from oversized originals; and dark mode improves readability in low-light conditions. The main tension is with heavy video, complex animations, and rich 3D experiences — these can be high-carbon and may need to be used more judiciously. However, even these can be made more sustainable through efficient compression, user control over autoplay, and loading only when in viewport.

Implement a page weight budget using CI pipeline tooling. For JavaScript bundles, use size-limit or bundlesize in your CI pipeline to fail builds that exceed defined size thresholds. For overall page performance including images and total weight, Lighthouse CI can run performance audits on every PR and block merges that fall below defined scores. Set budgets per asset category: for example, JavaScript bundle below 200KB gzipped, total images per page below 1MB, total page weight below 2MB. Track these metrics over time in your monitoring dashboard to catch regressions before they reach production.