Using , srcset cause layout shift

Question

I have been trying to replicate this interesting guide on smashingmagazine: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

... but missing image heights are giving me some serious trouble with layout-shifts. Does anyone have a suggestion as to how I could improve this code to avoid layout-shifts?

<picture>
<source type="image/webp" media="(max-width: 599px)" srcset="{{ asset($assetespath.'/images/bg_crop_small.webp')}} 640w" sizes="100vw">
<source type="image/jpg" media="(max-width: 599px)" srcset="{{ asset($assetespath.'/images/bg_crop_small.jpg')}} 640w" sizes="100vw">
<source type="image/webp" media="(min-width: 600px) and (max-width: 899px)" srcset="{{ asset($assetespath.'/images/bg_crop_large.webp')}} 1200w" sizes="100vw">
<source type="image/jpg" media="(min-width: 600px) and (max-width: 899px)" srcset="{{ asset($assetespath.'/images/bg_crop_large.jpg')}} 1200w" sizes="100vw">
<source type="image/webp" media="(min-width: 900px)" srcset="{{ asset($assetespath.'/images/bg_large.webp 1920w, /assets/images/bg_small.webp')}} 1024w"
     sizes="100vw">
<source type="image/jpg" media="media (min-width: 900px)" srcset="{{ asset($assetespath.'/images/bg_large.jpg 1920w, /assets/images/bg_small.jpg')}} 1024w"
     sizes="100vw">
<img src="{{ asset($assetespath.'/images/bg_large.jpg')}}" alt="Exclusive street">

Many thanks.

Does this answer your question? [For responsive images with different aspect ratios, what's a good way to minimize Cumulative Layout Shift?](https://stackoverflow.com/questions/62722094/for-responsive-images-with-different-aspect-ratios-whats-a-good-way-to-minimiz) — Sysix, Aug 19 '21 at 11:35
I will definitely try. So the solution could be to add heights for each source, I guess. However in my example the aspect ratio of the images are the same, so it is not exactly the same issue. — nitro29, Aug 19 '21 at 12:30

Using , srcset cause layout shift

0 Answers0