Eco display

Eco Display lets visitors choose a lighter website. It adds a toggle that lets them hide images, maps and inline SVG. 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.
• Media is never 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.
• 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 adding data-eco-display-keep to a single element.
• Cache-friendly. 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 choice is stored in the visitor's 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; 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 (Drupal core)
• HTTPS is recommended so the service worker can run. Without it, media is still removed while the page loads.

Installation and configuration

1. Install the module as you would normally install a contributed Drupal module: composer require drupal/eco_display, then enable it.
2. Go to Configuration » User interface » Eco Display (/admin/config/user-interface/eco-display) to choose the storage mode and the keep classes.
3. 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.