Problem/Motivation
It's possible to configure responsive images in Drupal so as to optimize their loading time by using modern HTML5 image features: picture, sizes, srcset,... (not to mention modern image formats such as webp, avif,...).
But:
- it's not easy to understand how to do (even more if you're not familiar with those HTML5 features)
- it's not easy/quick to do it in the Drupal admin UI, nor to maintain it (avoid mistakes, make changes afterwards,...)
I have no survey data to support these assertions, but I think anyone who tried could agree.
As a consequence, I guess most Drupal users do not use responsive images or use them poorly, especially the beginners.
First, it's not great because we Drupal want to be easy to use for everyone (see https://www.drupal.org/about/values-and-principles). But it also means having good responsive image defaults or at least a good admin UI or wizard would have much impact on:
- performance of page loads, especially for not-so-good-networks and not-too-demanding devices
- network and device resources consumption, thus ecological footprint
- search engine optimization (because of better performance)
Plus: I guess this would also apply to decoupled websites as soon as they use the markup generated by Drupal responsive image module. And it could even impact non-Drupal websites if the way we handle it becomes a model for other CMS/frameworks.
Oh, and if you're interested about my motivation to create this issue queue, it comes from this discussion with @mgifford on the sustainable Drupal slack channel in January 2022 (!):
Mike Gifford (CivicActions) 15 h 17
The reference to Drupal here https://web.dev/uses-responsive-images/ doesn’t seem to be all that good. Is there a better place to send folks?Also, is this the best way to optimize image sizes - https://www.drupal.org/project/imageapi_optimize
GG : Many great things can already be done with Drupal to optimize images, but it requires some craft to configure modules, image styles and so on. See for example this Drupal website: https://fne.asso.fr/ (picture, srcset, webp,...). Most of the time, respecting the recos from Google Page Speed/Lighthouse is a good way to optimize. To me, what lacks on this with Drupal is easy configuration (not to say good out-of-the-box defaults).
MG : Well, how do we bring that into Core? Surely we'd want performant sites by default. What could be done to make it easier for future releases? Let us know @GaëlG
GG : It's a big topic and would need much work, but on the face of it, some ideas: webp derivatives by default in core (jpg fallback thanks to
<picture>), native lazyloading (this one is in progress), non-technical helpful field descriptions in responsive image config forms (breakpoint_group, sizes,...).
And what would be neat is an image style creation wizard generating a basic responsive image style and the associated image styles of different sizes for different screens from given image proportions (a crop type). This one is hard to think because of the multiple ways images can be used, but there are some common usages (fixed height/width ratio through crop and original height/width ratio seem to be the most common to me). It's a bit like Views: they can be used in many ways but we have a creation wizard with main questions that provide decent defaults. Actually, non-config image styles (entirely computed from a configurable responsive image style) even seems like a good idea to me.
Disclaimer: I've got some ideas because I worked on this kind of needs for our projects, but not much time or money to make happen this kind of core initiative...Ludo.R il y a 6 jours
Sounds nice! :visage_légèrement_souriant:Mike Gifford (CivicActions) il y a 2 heures
Can you draft up something in more detail @GaëlG and see if we can’t either bring more resources to implement it or find someone with the cash?? Implementing a performance improvement on a million sites would have a significant improvement on our collective CO2 emissions.GG: I will take some time to write a core idea (https://www.drupal.org/project/ideas), if there is good chance some attention/time/ressources/money can be given to it. Not today though.
Steps to reproduce
I guess the recommended/optimized way to just display an image nowadays is something like this:
<picture>
<source srcset="myimage800.webp 800w, myimage1280.webp 1280w, myimage1440.webp 1440w, myimage2048.webp 2048w" type="image/webp" sizes="100vw">
<source srcset="myimage800.jpg 800w, myimage1280.jpg 1280w, myimage1440.jpg 1440w, myimage2048.jpg 2048w" type="image/jpeg" sizes="100vw">
<img srcset="myimage800.jpg 800w, myimage1280.jpg 1280w, myimage1440.jpg 1440w, myimage2048.jpg 2048w" sizes="100vw" src="myimage.jpg" alt="something" loading="lazy" typeof="foaf:Image" width="42" height="42">
</picture>
(here my sizes attribute value assumes the image will be displayed full-width on all devices, it's an example value for sizes and a decent default if we don't know)
(actually the very best recommended way should be discussed, for example I'm not even sure the widths I offer in my example are the best ones to handle the most common devices)
To do this in Drupal, I have to use the webp contrib module (or some other contrib/custom module). And I have to understand how to configure adequately the not-so-clear responsive image style admin UI (breakpoint groups, breakpoints, multipliers,...).
But let's put that aside. The main struggle is that before I can configure my responsive image style, I have to configure many non-responsive image styles, one for each offered width (800w, 1280w,...). They will all be configured in the same way, with just a different width. Fortunately, there's a contrib module to ease the creation of those images styles: https://www.drupal.org/project/easy_responsive_images But then, if I want to fix/change something about the image styling, I should fix/change all them manually in the same way.
Most of the time, on a website, there are images displayed at their original aspect ratio (in content bodies for example), and images displayed at various aspect ratios according to the mock-ups (16:9, 3:4, 4:3, 1:1,...). Before responsive images, let's say N image styles needed to be configured. To get responsive images offering 4 widths, it's now 4*N image styles. And we may (should?) offer more than 4 widths for an image.
From an UX point of view, it's a bit odd. For a given aspect ratio, I'd expect to be able to configure everything once at a responsive image style level.
Proposed resolution
I did not create a core initiative proposition for now because I'm not sure it needs to become one and I can't/won't invest much time/energy in making the initiative become reality. However, I create this issue because if others could help with that, it would be a shame not to have tried. What I can give is some basic advice on what would be helpful from a site builder point of view (as I did here), and maybe how we could try to approach some problems at the code level (but I'm not an experienced core dev at all).
Anyway, I guess this issue would first need some exploration phase following the steps at https://www.drupal.org/community-initiatives/proposing-initiatives#s-pro...
And maybe a BoF at next DrupalCon?
I also guess this issue would eventually be divided into child issues and follow ups, the main one being to have "non-config image styles".
PS: I won't be available to read/answer comments in the coming weeks. I will afterwards. But if you read me, I want you to know that this issue is not more mine than yours.
Remaining tasks
To be defined.
User interface changes
To be defined.
API changes
To be defined.
Data model changes
To be defined.
Release notes snippet
To be defined.