1

On my Drupal 9 installation when I create an "image" field, Drupal automatically adds the loading="lazy" attribute.

When I create a "media" field with an "Adaptive Image Styles" display, the loading="lazy" attribute is not applied.

How to apply the loading="lazy" attribute to responsive media?

If I go to a media image, there is "lazy" :

enter image description here

If I go to a media image with the adaptive image style, there is no "lazy" :

enter image description here

UPDATED WITH cilefen REPLY

I tested on Drupal 9.4 and it seems that the update does not fix the problem. loading="lazy" is unavailable for "Responsive image" :

enter image description here

While it is available for non-responsive image :

enter image description here

So I rest my question, how to apply loading="lazy" on the "Responsive image" ? This is a big problem for page performance.

6
  • If you are using the Blazy contrib module, this sounds like a feature request for that module: drupal.org/project/issues/blazy Commented Jun 4, 2022 at 15:44
  • @PatrickKenny I don't use a contrib module, it's drupal 9 which adds blazy on all images except for adaptive image styles
    – zoulou66
    Commented Jun 4, 2022 at 15:46
  • @zoulou66 That is not true. Core adds loading=lazy attribute: drupal.org/node/3173719
    – mona lisa
    Commented Jun 4, 2022 at 15:55
  • @cilefen This is what I want on my images, but it does not add it on the media with the adaptive image style
    – zoulou66
    Commented Jun 4, 2022 at 16:07
  • I updated my question, with screenshots to better explain
    – zoulou66
    Commented Jun 4, 2022 at 16:10

1 Answer 1

2

This is an active area a research and development in Drupal Core. Although there is no quick fix, this issue is the locus of work. Test the patches and provide feedback.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.