How to Effortlessly Manage Responsive Images in Drupal

At Vardot, handling responsive images has been one of the recurring challenges in building Drupal websites with Varbase. The traditional approach, using image styles and the Responsive Image module, means a lot of repetitive configuration and manual tuning to make images behave across every screen size. On large sites we maintained more than 30 responsive image styles, which did not scale and became hard to keep in sync. Our module, Dynamic Responsive Image (Drimage) Improved, now integrated in Varbase, takes a different approach: it generates the image each device needs on the fly, based on a pre-defined aspect ratio.

Why is responsive image management in Drupal so time-consuming?

Responsive image management in Drupal is time-consuming because the traditional approach, image styles plus the Responsive Image module, requires configuring and maintaining a separate style for every resolution and breakpoint. On each project, that means hours spent building image styles and managing a growing network of configurations across the whole site. The process is also error-prone, especially on large-scale websites where more than 30 image styles are sometimes required, and each new design context adds more to keep in sync.

What is Drimage Improved?

Drimage Improved, the Dynamic Responsive Image (Drimage) Improved module, is Vardot's open-source Drupal module that handles image responsiveness without you configuring image styles or the Responsive Image module. It is actively maintained, compatible with Drupal 11, and integrated in Varbase. Instead of pre-generating a fixed set of sizes, it generates the size each device needs on the fly, based on the viewport and a pre-defined aspect ratio that keeps proportions consistent across screens.

The module generates an optimized image at the moment it is needed and caches it for later requests. By serving the appropriate size for each device, it reduces page load time, and by working from aspect ratios it keeps images sharp without the distortion that manual resizing can introduce. This removes the need to create and maintain a large library of image styles.

Image

How does Drimage Improved work?

Drimage Improved works by detecting the device and generating only the image size it actually needs, rather than pre-generating multiple sizes and injecting them into the HTML. When you set up an image field, you define the aspect ratios that set the proportion for each display context. When the image loads, the module reads the user's screen, device resolution, pixel density, and viewport size, then produces the optimal size for that request.

Once the aspect ratio and size are determined, the module caches the generated image so subsequent requests are served from cache, which keeps server load low. For older browsers or devices that do not support the latest techniques, it includes a fallback so images still display correctly. Because Drupal core supports WebP natively (since Drupal 9.2, and enabled by default in core image styles from Drupal 10) and added AVIF support in Drupal 11.2, the module can output these formats through core rather than relying on a separate conversion module.

Why do aspect ratios matter for responsive images?

Aspect ratios matter because they preserve the proportional integrity of an image across every device, preventing the stretching or squishing that traditional resizing can cause and keeping the visual experience consistent. That consistency is what makes images look intentional rather than distorted, on a phone and a widescreen alike.

Working from aspect ratios also has a performance payoff. Generating sizes on the fly and caching them removes the need to store many pre-generated image styles on the server, which lowers data transfer, reduces requests, and improves page speed. Faster, optimized image delivery feeds directly into Core Web Vitals, and since search and answer engines favor fast, efficient experiences, it supports SEO as well. The approach aligns with current web standards and keeps a site's image handling maintainable over the long term.

Our view: generate images on demand instead of pre-building image styles

Our view: the era of hand-configuring dozens of responsive image styles is over. With Drupal core now generating WebP and AVIF natively, the more maintainable approach is to generate the exact image each device needs on demand, driven by an aspect ratio, rather than pre-building and policing a matrix of image styles that has to stay in sync as the design grows.

This is the shift Drimage Improved is built around, and in Vardot's own projects it has saved hundreds of development hours while producing smaller files and a lighter server. Fewer configurations to maintain, less disk used on pre-generated derivatives, and better Core Web Vitals, without a spreadsheet of breakpoints. For teams running large or content-heavy Drupal sites, that trade is worth making deliberately rather than defaulting to the old image-style workflow out of habit.

How do you set up Drimage Improved in Drupal?

You set up Drimage Improved in three steps: install the module, configure its global settings, and set it as the display format on your image fields.

1. Install the module

Install the module from the Drupal repository using Composer, then enable it as you would any contributed module.

composer require drupal/drimage_improved

2. Configure global settings

Go to the module configuration page at admin/config/media/drimage_improved and set your global options, such as the minimum difference between two generated image styles and the maximum allowed ratio distortion. Enabling device pixel ratio detection is advisable, since it produces higher-quality images on high-density screens. For modern formats, make sure your PHP GD build includes WebP and AVIF support and use Drupal core's native WebP and AVIF handling; you no longer need a separate WebP conversion module for this, as core has supported WebP since Drupal 9.2 and AVIF since Drupal 11.2.

3. Manage the display

On the "Manage display" tab of your content type, choose Dynamic Responsive Image as the format for the image field. From there you configure image rendering, aspect ratio, lazy loading, and an optional link. With that in place, you no longer rely on the Responsive Image module, image styles, or long lists of pre-defined displays for each view, which were the parts that were hardest to maintain.

Image

Where responsive images in Drupal go next

Responsive images in Drupal are moving toward native, on-demand delivery of next-generation formats. With WebP standard in core and AVIF supported from Drupal 11.2, the practical direction is to serve AVIF where the server and browser support it, fall back to WebP, and let the platform generate the right size per device instead of maintaining image styles by hand. That is the approach Drimage Improved takes, and it is one of the reasons it ships in Varbase.

Vardot maintains Drimage Improved as part of making Varbase faster and easier to build on. If you manage a large or image-heavy Drupal site, it is worth trying in place of the image-style workflow. You can install Drimage Improved from Drupal.org and share feedback through its issue queue.