ausi / respimagelint

Linter for Responsive Images - https://ausi.github.io/respimagelint/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

clearing the ambiguity regarding the performance of responsive images in 3-column sections

socialreza opened this issue · comments

parts of the site that are 3 columns, using inspect-> toggle device toolbar , from width 1157px and above, the width of each column is 365 pixels and less than 1157 maximum image width of 728 pixels, why are the sizes 1170x658 and 1480x833 suggested for this screen width?

<img width="1920" height="1080" src="https://xxx.com/wp-content/uploads/2022/12/8.jpg" class="attachment-full size-full" alt="" loading="lazy" srcset="https://xxx.com/wp-content/uploads/2022/12/8.jpg 1920w, https://xxx.com/wp-content/uploads/2022/12/8-365x205.jpg 365w, https://xxx.com/wp-content/uploads/2022/12/8-1170x658.jpg 1170w, https://xxx.com/wp-content/uploads/2022/12/8-730x411.jpg 730w, https://xxx.com/wp-content/uploads/2022/12/8-1480x833.jpg 1480w" sizes="(min-width: 1260px) 365px, (min-width: 1040px) calc(17vw + 154px), (min-width: 780px) 50vw, calc(100vw - 22px)">

https://ibb.co/Jnj9NVM

Looks like the linter detected a maximum with of 740px of the image and suggests to use double the size for 2x (retina) screens.