Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By heddn on
Change record status:
Published (View all published change records)
Project:
Introduced in branch:
10.1.x
Introduced in version:
10.1.0
Description:
The responsive image field formatter supports toggling loading="lazy". New fields are set to lazyand any existing responsive image field formatters are set to eager. Image dimensions are added to the responsive image as well so that proper space is reserved on page rendering.
Previously with no dimensions or loading attribute:
<picture>
<source srcset="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/large_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 960px)" type="image/jpeg">
<source srcset="/sites/default/files/styles/medium_3_2_600x400/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/medium_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 768px)" type="image/jpeg">
<img src="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg" alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs">
</picture>
<img srcset="/sites/default/files/styles/square_small/public/borscht-with-pork-ribs-umami.jpg 300w, /sites/default/files/styles/square_medium/public/borscht-with-pork-ribs-umami.jpg 600w, /sites/default/files/styles/square_large/public/borscht-with-pork-ribs-umami.jpg 900w" sizes="100vw" src="/sites/default/files/styles/square_medium/public/borscht-with-pork-ribs-umami.jpg" alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs">
Afterwards dimensions and loading eager or lazy are added:
<picture>
<source srcset="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/large_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 960px)" type="image/jpeg" width="768" height="512">
<source srcset="/sites/default/files/styles/medium_3_2_600x400/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/medium_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 768px)" type="image/jpeg" width="600" height="400">
<img loading="lazy" src="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg" alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs">
</picture>
<img loading="eager" srcset="/sites/default/files/styles/square_small/public/borscht-with-pork-ribs-umami.jpg 300w, /sites/default/files/styles/square_medium/public/borscht-with-pork-ribs-umami.jpg 600w, /sites/default/files/styles/square_large/public/borscht-with-pork-ribs-umami.jpg 900w" sizes="100vw" src="/sites/default/files/styles/square_medium/public/borscht-with-pork-ribs-umami.jpg" alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs" width="300" height="300">
Impacts:
Site builders, administrators, editors
Themers
