Images in different <source> elements shouldn’t be the same

[rocc-o]

Hello it's me again,

I know I shouldn't do it, but I'm using same images with same aspect ratio and format, but with different sizes, in different elements as escamotage to prevent mobiles with pixel density above 2 to download a too big image - as I know that a double sized image is enough even for pixel density 3 and above and so I can have a better performance. In this way I can have more granular control. Other way, I see in Chrome DevTools that a mobile DPR3 viewport 36o width is downloading a too big image instead of the 720 width image that I want to serve (360x2=720).

This specific problem of mobiles with a major pixel density that makes browsers to download a too big image, while a double sized is just enough for the human eye even with DPR 3 and above, is discussed here. But for now it seems that there is no final solution for the problem: whatwg/html#4421

So, I wonder, my escamotage is that bad? It may cause problems with different borwsers? As I've seen that in Chrome DevTools works perfectly, even if Lint is hurting my feelings. What do you think?

Here's my code:

    <picture>

       <source
       media="(max-width: 360px)"
       sizes="(max-width: 720px) 100vw, 720px"
       srcset="
       /assets/images/{{ folder_hero_images }}/webp/portrait/320.webp 320w,
       /assets/images/{{ folder_hero_images }}/webp/portrait/640.webp 640w,
       /assets/images/{{ folder_hero_images }}/webp/portrait/720.webp 720w"
       type="image/webp">

       <source
       media="(min-width: 361px) and (max-width: 428px)"
       sizes="(max-width: 856px) 100vw, 856px"
       srcset="
       /assets/images/{{ folder_hero_images }}/webp/portrait/750.webp 750w,
       /assets/images/{{ folder_hero_images }}/webp/portrait/856.webp 856w"
       type="image/webp">

       <source
       media="(min-width: 429px) and (max-width: 1024px)"
       sizes="(max-width: 2048px) 100vw, 2048px"
       srcset="
       /assets/images/{{ folder_hero_images }}/webp/portrait/1536.webp 1536w,
       /assets/images/{{ folder_hero_images }}/webp/portrait/1620.webp 1620w,
       /assets/images/{{ folder_hero_images }}/webp/portrait/2048.webp 2048w"
       type="image/webp">

       <source
       media="(min-width: 1025px) and (max-width: 2560px)"
       sizes="(max-width: 3840px) 100vw, 3840px"
       srcset="
       /assets/images/{{ folder_hero_images }}/webp/landscape/1600.webp 1600w,
       /assets/images/{{ folder_hero_images }}/webp/landscape/2560.webp 2560w,
       /assets/images/{{ folder_hero_images }}/webp/landscape/2880.webp 2880w,
       /assets/images/{{ folder_hero_images }}/webp/landscape/3072.webp 3072w,
       /assets/images/{{ folder_hero_images }}/webp/landscape/3840.webp 3840w"
       type="image/webp">

       <source
       media="(max-width: 360px)"
       sizes="(max-width: 720px) 100vw, 720px"
       srcset="
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/320.jpg 320w,
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/640.jpg 640w,
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/720.jpg 720w"
       type="image/jpeg">

       <source
       media="(min-width: 361px) and (max-width: 428px)"
       sizes="(max-width: 856px) 100vw, 856px"
       srcset="
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/750.jpg 750w,
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/856.jpg 856w"
       type="image/jpeg">

       <source
       media="(min-width: 429px) and (max-width: 1024px)"
       sizes="(max-width: 2048px) 100vw, 2048px"
       srcset="
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/1536.jpg 1536w,
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/1620.jpg 1620w,
       /assets/images/{{ folder_hero_images }}/jpeg/portrait/2048.jpg 2048w"
       type="image/jpeg">

       <img
       sizes="(max-width: 3840px) 100vw, 3840px"
       srcset="
       /assets/images/{{ folder_hero_images }}/jpeg/landscape/1600.jpg 1600w,
       /assets/images/{{ folder_hero_images }}/jpeg/landscape/2560.jpg 2560w,
       /assets/images/{{ folder_hero_images }}/jpeg/landscape/2880.jpg 2880w,
       /assets/images/{{ folder_hero_images }}/jpeg/landscape/3072.jpg 3072w,
       /assets/images/{{ folder_hero_images }}/jpeg/landscape/3840.jpg 3840w"
       src="/assets/images/{{ folder_hero_images }}/jpeg/landscape/1600.jpg" width="1600" height="900"
       alt=""
       class="hero-banner-img">

     </picture>

And here's Lint:

It seems the image 720.webp shows the same contents as 856.webp does and it has the same aspect ratio and format.

It seems the image 720.jpg shows the same contents as 856.jpg does and it has the same aspect ratio and format.

The <source> element should only be used for art direction and format-based selection. For providing multiple resolutions of the same image use the srcset attribute instead. More information on CSS-Tricks.

[Martin Auswöger]

So, I wonder, my escamotage is that bad?

I don’t think it’s particularly bad.

It may cause problems with different borwsers?

I don’t know any problems/bugs with this pattern. The only problem is that resizing the browser might cause an unnecessary download of another image, but that is negligible I think.

…even if Lint is hurting my feelings. What do you think?

I’m not a huge fan of it, but I think it’s perfectly fine if you know that it is a tradeoff.

But there is also a different approach that you can use: One <source> with (min-resolution: 2.3dppx) that loads the images in the correct resolutions but with a lower quality level. See also #13 (comment)

[rocc-o]

Thanks! Indeed I was checking #13 (comment) before and I find it very interesting. I will definitely go with that. Thanks so much.