Explicitly setting height
and width
on an image is a recommendation of Lighthouse and Pagespeed insight. But I also want to make use of the srcset
and sizes
attributes to offer responsive images.
But I can only conclude that setting height
and width
explicitly, nullifies the sizes
attribute.
The image below will only be rendered at 1500px width, regardless of the viewport width.
<picture>
<img
srcset="
./images/original_s.jpg 100w,
./images/original_m.jpg 200w,
./images/original_l.jpg 550w
"
sizes="(max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 12em), 550px"
src="./images/original.jpg"
alt="Responsive image"
width="1243"
height="1500"
/>
</picture>
I have a work-around for this, that uses CSS instead of the sizes
attribute
img.styled {
width: 550px;
height: auto;
}
@media (max-width: 1376px) {
img.styled {
width: calc(50vw - 12em);
height: auto;
}
}
@media (max-width: 768px) {
img.styled {
width: calc(100vw - 3em);
height: auto;
}
}
<picture>
<img
srcset="
./images/original_s.jpg 100w,
./images/original_m.jpg 200w,
./images/original_l.jpg 550w
"
sizes="(max-width: 768px) calc(100vw -
3em), (max-width: 1376px) calc(50vw - 12em), 550px"
src="./images/original.jpg"
alt="Screenclip of Stefan's Twitter"
loading="lazy"
decoding="async"
width="1243"
height="1500"
class="styled"
/>
</picture>
I don't like this work-around. I would love to see this working with the sizes
attribute instead, but I don't know if this is possible. I have cooked up a page where you can see the work-around (first image) and the original html (second image), and some other combinations as well: https://www.gijsvandam.nl/responsive-picture-element/
The repo is here https://github.com/gijswijs/responsive-picture-element
I would love to know if there is a way to get this to work without CSS.