Smart Imaging Styles

The goal of this module is to present users with the best possible image derivative (thumbnail, crop, size, etc.) depending on the actual client side context.

This module acts like Drupal's responsive images formatter on steroids.

Responsive images (using the <picture> element and breakpoints) allow to serve different images depending on view-port width. But in Drupal it is often not clear where an image will eventually be used. Admins can for example place the same image via core's Layout builder in a tiny section and/or a full width section. In both scenarios the view-port stays the same, but the required image differs. You may want a different crop or aspect radio, but in any case you never want to consume too many MB's of your user.

Initially a low-res image is loaded, and using JavaScript the actual needed images is calculated based on the available size of the parent element.

This module integrates greatly with dedicated smart imaging services like Thumbor (module) and Cloudinary (module) that generates the derivatives of your uploaded image on the fly and serve it to your visitor. By using an imaging SaaS service, all kinds of smart cropping (face detection) are usable.