How to Effortlessly Manage Responsive Images in Drupal
Thirty responsive image styles on one site is a configuration problem, not an image problem. How Dynamic Responsive Image (Drimage) Improved generates what each device needs from a single aspect ratio, and what that removes from your build.
Key Takeaways
- Drimage Improved generates the image each device needs on demand, from an aspect ratio, viewport, and pixel ratio.
- Aspect ratios preserve proportion across devices, which is what prevents the distortion manual resizing introduces.
- Drupal core handles WebP natively since 9.2 and AVIF since 11.2, so no separate conversion module is needed.
- WebP can be up to 34% smaller than JPEG; AVIF up to 50% smaller.
Drimage Improved is an open-source Drupal module, maintained by Vardot and integrated in Varbase, that replaces hand-configured image styles by generating the right image size on demand from an aspect ratio, the viewport, and the device pixel ratio. It outputs optimized modern formats using Drupal core's native WebP and AVIF support, then caches the result, which cuts configuration, reduces server load, and improves page speed, Core Web Vitals, and SEO.
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.
Modern image formats make a measurable difference. WebP can be up to 34% smaller than JPEG and 26% smaller than PNG, and AVIF can be up to 50% smaller than JPEG. Drupal core generates both natively, so Drimage Improved can serve them without an extra conversion module.
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_improved2. 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.
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.
FAQs
Drimage Improved (Dynamic Responsive Image Improved) is an open-source Drupal module, maintained by Vardot and integrated in Varbase, that handles responsive images without configuring image styles or the Responsive Image module. It generates the image size each device needs on the fly, based on the viewport and a pre-defined aspect ratio, then caches the result to keep server load low.
The traditional approach requires building and maintaining a separate image style for every breakpoint, often dozens on large sites, which is time-consuming and error-prone. Drimage Improved instead generates only the size a device needs on demand from an aspect ratio, so there are far fewer configurations to maintain, less disk used on pre-generated derivatives, and smaller files served to each visitor.
Yes. Drupal core has supported WebP through the GD image toolkit since Drupal 9.2, and it is enabled by default in core image styles from Drupal 10. Drupal core added AVIF support in version 11.2. Because of this, Drimage Improved can output optimized WebP and AVIF images through core without a separate conversion module, provided the server's PHP GD build includes that support.
Install it with Composer using composer require drupal/drimage_improved and enable the module. Configure its global settings at admin/config/media/drimage_improved, including device pixel ratio detection and modern-format output. Then, on the Manage display tab of your content type, choose Dynamic Responsive Image as the format for the image field and set the aspect ratio, lazy loading, and optional link.
Drimage Improved serves the smallest appropriate image for each device in a modern format, WebP or AVIF, which can be up to 34% and 50% smaller than JPEG respectively. Generating sizes on demand and caching them reduces data transfer, requests, and server storage, which lowers page load time. Faster image delivery improves Core Web Vitals, and search and answer engines favor fast experiences, which supports SEO.