Eco display

This module let visitors choose a lighter website. Eco Display adds a toggle that lets visitors hide images, maps and inline SVG. The hidden media isn't just covered up: it's removed before the browser downloads it, which cuts page weight, data transfer and energy use.


It suits sites aiming for a better EcoIndex score, sites following sustainable web design guidelines, and sites with visitors on slow or metered connections.


Features
Three independent options
Hide images: raster images, responsive picture and srcset, .svg files, and image preloads.
Hide maps: Leaflet and Geofield maps, map iframes, and common tile providers.
Hide inline SVG: svg elements and external sprite references.
The media isn't downloaded. It's removed from the page before the browser requests it. On HTTPS sites, a service worker strips it from the HTML before the browser even reads the page, so the requests never appear in the network panel.


A ready-made block with an accessible toggle switch. Show one combined toggle or separate toggles, choose which media types it handles, and set your own labels.
Keep what matters. Site logos are always kept. You can also protect any area by wrapping it in one of your configured CSS classes (default eco-display-keep), or by putting data-eco-display-keep on a single element.
Cache-friendly. It works with Internal Page Cache, Dynamic Page Cache, reverse proxies and CDNs.



Two ways to store the visitor's choice

localStorage (default, recommended) Every visitor gets the same HTML, so your page cache, reverse proxy or CDN works unchanged. The visitor's choice is stored in their browser and applied there.


Cookie + PHP render The choice is stored in a cookie, so Drupal can leave image, media and map fields out of the HTML altogether.


Visitors without the cookie still get the fully cached page from Internal Page Cache.
Visitors who hide media bypass that cache automatically and are served by Dynamic Page Cache, where only the media fields are rebuilt for them.
The settings page includes an example configuration for reverse proxies such as Varnish.



For developers

Place the controls anywhere with the eco_display.controls_builder service, from a module or a theme.
hook_eco_display_controls_alter() changes the controls before they're rendered.
hook_eco_display_keep_classes_alter() adds keep classes from code.
Hooks are written as object-oriented #[Hook] classes, and services use dependency injection and strict types.
Examples are in eco_display.api.php and docs/api-examples.md.



Requirements

Drupal 11.1 or later, or Drupal 12
PHP 8.3 or later (PHP 8.5 or later with Drupal 12)
Block module (in Drupal core)
HTTPS is recommended so the service worker can run. Without it, media is still removed while the page loads.



Configuration

Enable the module.
Go to Configuration » User interface » Eco Display to choose the storage mode and the keep classes.
Place the Eco Display block in a region, or render the controls from code.



Similar projects

Unlike lazy-loading or image-optimisation modules, Eco Display lets the visitor decide to skip media completely, while keeping the site cacheable.