I would like some feedback on the SIZES attribute when using SRCSET in Bootstrap 5.
My code example is valid html, the design looks great but I would like to find a simpler method than my code example, I can’t imagine doing all these pixel-perfect calculations for every image.
My design works without the SIZES attribute but fails the w3 validator. Is it acceptable to omit the SIZES attribute even though the HTML specification says it should be present when using width selectors? https://html.spec.whatwg.org/multipage/embedded-content.html#attr-source-srcset
Or is it okay to use something like sizes="90vw" and let the browser do its job selecting the right file from the srcset?
<div class="container py-3">
<img src="images/hero0600.png" class="img-fluid rounded" alt="Responsive"
srcset="images/hero0600.png 516w, images/hero0750.png 750w, images/hero1000.png
1000w, images/hero1250.png 1250w, images/hero1366.png 1366w,
images/hero1500.png 1500w, images/hero2000.png 2000w,
images/hero2500.png 2500w, images/hero3000.png 3000w"
sizes="(min-width:1400px) 1296px, (min-width:1200px) 1116px,
(min-width:992px) 936px, (min-width:768px) 696px, 516px">
</div>
Bootstrap 5 has responsive breakpoints at 576px, 768px, 992px, 1200px and 1400px
.container is around 90% width, it sets a max-width at each responsive breakpoint - xs, sm, md, lg, xl, xxl (the last one xxl is new in Bootstrap 5) - 540px, 720px, 960px, 1140px, 1320px
https://getbootstrap.com/docs/5.0/layout/containers/
However in practice, with borders, corners, padding, margins, my real-world measurements using a browser inspector show the actual responsive image widths as 516px, 696px, 936px, 1116px and 1296px.