1

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.

gijswijs
  • 1,958
  • 19
  • 24

0 Answers0