Smart Imaging Styles
This module provides an advanced responsive images solution that serves the most appropriate image derivative based on the actual display context on the client's device. It goes beyond standard responsive images by considering image usage within layout builders and dynamically adjusts image loading with JavaScript to optimize performance and deliver best-quality images without wasting bandwidth. The module also integrates with smart imaging services for on-the-fly derivative generation and advanced features like face detection.
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.