Breaking points and widths for responsive images (srcset) with bootstrap 5?-CodePudding

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>

CodePudding user response：

Based on the most common resolutions listed at browserstack.com, I determined the closest Bootstrap equivalent for both portrait and landscape widths.

1920×1080 (8.89%) Bootstrap: 2048w, 1400w (could use 1200w)
1536×864 (3.88%) Bootstrap: 2048w, 992w
1366×768 (8.44%) Bootstrap: 1400w, 992w
414×896 (4.58%) Bootstrap: 576w, 992w
375×667 (3.75%) Bootstrap: 576w, 768w
360×640 (7.28%) Bootstrap: 576w, 768w

For now, until I hear something better from someone else, I am going with the following image widths/breakpoints for scrset for full-screen display: 576w, 992w, 1400w and 2048w.

For example,

<picture>
<source type="image/jpeg" media="(max-width: 575px)" srcset="assets/img/faith-in-action/faith-in-action-cropped-sm.jpg">
<source type="image/jpeg" media="(min-width: 576px)"
srcset="assets/img/faith-in-action/faith-in-action-md.jpg 992w,assets/img/faith-in-action/faith-in-action-xl.jpg 1400w, assets/img/faith-in-action/faith-in-action-xxl.jpg 2048w">
<img src="assets/img/faith-in-action/faith-in-action-cropped-sm.jpg" alt="drummers">
</picture>