ausi
srcset incompatibility with sizes
after scanning my site, it suggested the following
650×366 1230×692 1610×906 1920×1080
sizes="(min-width: 1260px) 325px, (min-width: 1040px) calc(15vw + 139px), calc(100vw - 22px)"
but there is a problem : (min-width: 1260px) 325px => while she did not suggest size 325px
Most (min-width: 1260px) screens have a retina (2ppx) resolution and therefore need an image width of 650 (= 325x2). The file size difference between a 650×366 and a 325×183 image is so low, that the linter decided it’s not worth the extra image file.
@ausi I'm a bit surprised with "Most (min-width: 1260px) screens have a retina (2ppx) resolution".
What about the many desktop Full HD screens (1920x1080)? I thought most have a 1dppx resolution.
https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
Most (min-width: 1260px) screens have a retina (2ppx) resolution and therefore need an image width of 650 (= 325x2). The file size difference between a 650×366 and a 325×183 image is so low, that the linter decided it’s not worth the extra image file.
so 650×366 size should not be made and it should be made in the size of 325×183? that's mean :
325×183 1230×692 1610×906 1920×1080
sizes="(min-width: 1260px) 325px, (min-width: 1040px) calc(15vw + 139px), calc(100vw - 22px)"
if yes, isn't it possible to set the condition that if such a situation occurs, it will correct the size by itself so that the user does not fall into a mistake?
@ausi I'm a bit surprised with "Most (min-width: 1260px) screens have a retina (2ppx) resolution".
My bad. My brain read it as max-width instead of min-width, sorry for the confusion 🙈
There is a megapixel threshold set in https://github.com/ausi/respimagelint/blob/b9233f2e787868fe52e243f285164a5e268ba82f/src/linter/images/missingFittingSrc.js#L8 that means if two detected sizes are less than 0.2 megapixels apart it removes the smaller one from the list. 650×366 and 325×183 are only 0.18 megapixels apart so the 325×183 gets removed.
As these are just suggestions, I’d say that in this case you can add a 325×183 image to the srcset and the linter should not complain about it.
Thanks for the details 👍
I agree a 0.2 megapixels threshold is a good idea.