Hello, I am curious to hear from others what width sizes they would choose for full-width picture/srcset image replacement with Bootsrap CSS framework. Do you follow Bootstrap’s breakpoints? For example, 576w for <576px, 768w for ≥576px, 992w for ≥768px, 1200w for ≥992px, 1400w for ≥1200px, and 2048w for ≥1400px. In this example, the width of image is the max width of its breakpoint. (Technically, the max width would be -1px its breakpoint. For simplicity, I’ve chosen the same as next breakpoint up).
As in:
<picture>
<source type="image/avif" sizes=”100vw” srcset="/img/lion-sm.avif 576w, /img/lion-md.avif 768w, /img/lion-lg.avif 992w, /img/lion-xlg.avif 1200w" />
<source type="image/webp" sizes=”100vw” srcset="/img/lion-sm.webp 576w, /img/lion-md.webp 768w, /img/lion-lg.webp 992w, /img/lion-xlg.webp 1200w" />
<img sizes="100vw" src="/img/lion.jpeg" srcset="/img/lion-sm.jpeg 576w, /img/lion-md.jpeg 768w, /img/lion-lg.jpeg 992w, /img/lion-xlg.jpeg 1200w" alt="lion">
</picture>
In other words, what breaking points and image widths would you recommend for responsive sites? Also, any suggested online resources?