'Breaking points and widths for responsive images (srcset) with bootstrap 5?
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|