This project is not covered by Drupal’s security advisory policy.

Dynamic Responsive Image (or drimage) is an alternative to the Responsive Image Style module (Drupal core). It is meant to take the pain away from configuring and maintaining responsive image styles by simply not needing any configuration.

It will generate perfectly scaled (or cropped) images on-the-fly in Drupal. No more messing about with calculating image styles for all breakpoints, grouping them in responsive image styles, having to change them all when the design changes a few pixels, then creating some more for all possible multipliers, ... It all just works without any configuration!

Install the module as usual and configure your image field to display with the "Dynamic Responsive Image" formatter. There is no further configuration needed.

Drimage requires some JavaScript and CSS, so you will have to be comfortable with that.

Drimage assumes the width of images is set in CSS, either directly in the wrapper-div or inherited through a parent element. Any grid system will do just fine for this.
Drimage provides option to crop your images to fixed aspect ratios automatically. You can also render images as background images and configure basic background CSS properties. All in the config of the formatter for your image field.

Drimage is fully compatible with the focal point module. This makes sure that if you instruct drimage to crop images, the focal point will never be cut off.

If you want to limit the amount of image styles drimage ceates (to save on diskspace) you can tinker with the drimage settings to allow images to not be pixel-perfect. Resulting images will the ben up-/downscaled or distorted in the browser to fit the available space defined in CSS. Any modern browser can handle this very well.

Known issues

My custom Javascript is changing the size of containers with images in it and drimage does not respond to that

If you have Javascript that is resizing containers that contain drimage images you will need to delay drimage until your scripts have finished!
Add a class "js-delay-drimage" on any element that wraps the images (it can even be the body element). Remove the class once everything is in place and call "Drupal.drimage.init()" with your element as argument. (no argument will default to the entire document, effectively rerendering all drimage images)

el.classList.remove('js-delay-drimage');
Drupal.drimage.init(el);

I'm exporting (or importing) config and I notice a lot of image styles in the config. Do I need them?

If you are exporting config you will notice that drimage has created image styles. You can delete those config items, drimage will keep working with or without these configurations. If you import your config on a site (for example when deploying code to live) and you have not included the drimage image styles, drimage will be forced to rerender all images and your site might slow down considerably for the first requests.
There is an open Issue to try and prevent the configs from being deleted on an import: https://www.drupal.org/node/2826291

Project Information

Downloads