1

I want to provide always the most optimized image to the viewer based on the browser capabilities and viewport/screen properties. My CMS allows me to dynamically generate images as AVIF, WEBP or original format in resized versions. The theme I am using has a media query for @media (min-width: 768px) { .md\:w-2\/3 { width: 66.666667%; } } and this is the element I came up with:

<picture>
  <source srcset="<?= $image->thumb(['width'   => 400, 'quality' => 80, 'format' => 'avif'])->url() ?> 400w, <?= $image->thumb(['width'   => 800, 'quality' => 80, 'format' => 'avif'])->url() ?> 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif">
  <source srcset="<?= $image->thumb(['width'   => 400, 'quality' => 80, 'format' => 'webp'])->url() ?> 400w, <?= $image->thumb(['width'   => 800, 'quality' => 80, 'format' => 'webp'])->url() ?> 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
  <img src="<?= $image->url() ?>" srcset="<?= $image->thumb(['width'   => 400, 'quality' => 80])->url() ?> 400w, <?= $image->thumb(['width'   => 800, 'quality' => 80])->url() ?> 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" decoding="async" loading="lazy" alt="">
</picture>

The problem with this code is that always the highest width is provided even if I am emulating a small device screen/viewport with the browser developer tools. What am I missing?

HTML Result:

<picture>
  <source srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.avif 400w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.avif 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif">
  <source srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.webp 400w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.webp 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
  <img src="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img_20170217_122206.jpg" srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.jpg 400w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.jpg 800w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" decoding="async" loading="lazy" alt="">
</picture>
Peleke
  • 891
  • 2
  • 10
  • 23
  • Could you show us the resulting HTML? – KIKO Software Aug 09 '21 at 12:45
  • I have added the current result in HTML. – Peleke Aug 09 '21 at 13:09
  • That's rather complex. I would suggest simplifying it. Remove the styling first, and start with one type of `srcset`. If you have the same problem with simpler HTML code then the problem is at least simplified. – KIKO Software Aug 09 '21 at 13:26
  • try with `media` – Lalji Tadhani Aug 09 '21 at 13:31
  • I also wonder whether the way you inspect, with the developer tools, which image is loaded is correct. It's just a thought. I would use the "Network" tab to see which image is actually loaded. – KIKO Software Aug 09 '21 at 13:36
  • I always open the loaded image via right click in a new tab to check. I simplified the code and used this article as a source for the code: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ – Peleke Aug 09 '21 at 13:39

0 Answers0