I'm trying to ensure a complicated picture element is behaving the way I want and would love some tools to help me out. Some things that would help: a way to know which source is currently displaying a way to test that all the sources are valid images a way to know which media/sizes pair is the current match <picture>
<source
media="(max-width: 767px)"
srcset="
/media/img/news/projects-mobile-375.jpg 375w,
/media/img/news/projects-mobile-720.jpg 720w,
/media/img/news/projects-mobile-976.jpg 976w,
/media/img/news/projects-mobile-1232.jpg 1232w,
/media/img/news/projects-mobile-1450.jpg 1450w"
sizes="calc(100vw - 16px)">
<source
srcset="
/media/img/news/projects-desktop-1032.jpg 1032w,
/media/img/news/projects-desktop-1953.jpg 1953w,
/media/img/news/projects-desktop-2056.jpg 2056w"
sizes="
(min-width: 768px) calc(83wv - 24px),
(min-width: 1312px) calc(75vw - 32px),
(min-width: 1440px) 1028px,
calc(75vw - 32px)">
<img loading="lazy" src="/media/img/news/projects-mobile-1450.jpg" alt="">
</picture>
... View more