drimage

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 (nearly) perfectly scaled (or cropped) images on-the-fly in Drupal based on the client's browser and device.

Install the module as usual and configure your image field to display with the "Dynamic Responsive Image" formatter. You can configure images to scale, to maintain an aspect ratio or to render as background image.

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 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.

Drimage is fully compatible with the image_widget_crop module.

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 be up-/downscaled or distorted in the browser to fit the available space defined by 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?

They are not required to make drimage work, drimage will create them as needed. It is recommended however you do not delete them. The image styles store a cache for all generated images so your site will work considerably faster if you never delete them. If you've played with the drimage settings a lot, there might be some unused image styles taking up precious space on your server's disks, so you could delete them all in this case.

You should use config_split and add "image.style.drimage*" to the blacklist so they are ignored on importing.