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.

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