Better handling of srcset and sizes

Created on 27 December 2024, about 1 month ago

Problem/Motivation

I have made some image styles. From 100px to 1400px width, scale effect, no upscaling.

In the responsive image style:

(min-width: 1400px), (min-width: 1300px), (min-width: 1200px), (min-width: 1100px), (min-width: 1000px), (min-width: 900px), (min-width: 800px), (min-width: 700px), (min-width: 600px), (min-width: 500px), (min-width: 400px), (min-width: 300px), (min-width: 200px), (min-width: 100px)

The problem is with a small image, natural width 170px. As there is no upscale, variations are 100px width and 170px width.

So for all image styles above 200px it is the same width.

In app/modules/contrib/cqri/src/HookHandler/PreprocessCqriItem.php:

// Use the image width as key so we can sort the array later on.
          // Images within a srcset should be sorted from small to large, since
          // the first matching source will be used.
          $srcset[(int) ($dimensions['width'])] = $dimensions;

So it is overridden multiple times and in my case/test, it is the image style 100w and 900w which are kept.

<container-picture>
                  <source width="171" height="200" srcset="/sites/default/files/styles/w900/public/2024-10/drupalcon_2024_barcelona_attendee.png.webp?itok=mYoLIsDT" container="(min-width: 1400px)" type="image/webp">
              <source width="100" height="117" srcset="/sites/default/files/styles/w100/public/2024-10/drupalcon_2024_barcelona_attendee.png.webp?itok=Tv0bY4WF" container="(min-width: 1300px)" type="image/webp">
                  
<img loading="lazy" width="100" height="117" src="/sites/default/files/styles/w100/public/2024-10/drupalcon_2024_barcelona_attendee.png.webp?itok=Tv0bY4WF" alt="" class="img-fluid">
  </container-picture>

But there is a mismatch between the srcset and sizes conditions.

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France Grimreaper France 🇫🇷

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024