Overly-verbose results when image has zero width
eeeps opened this issue · 5 comments
Ran the bookmarklet on a page with an image whose initial state was display: none today. Hoo boy.
Here's a reduced test case: https://codepen.io/eeeps/pen/YJKPew
And the results:
I wonder if the output here should be "Try using sizes="0px"", or if the bookmarklet can be even smarter about display: none’d images than that (skip them?).
I think the specific rule that checks the sizes attribute should ignore display:none images.
But maybe we should add a new rule that checks for display:none?
Something like “The image seems to be hidden. It should be removed from the webpage to reduce bandwidth.”.
Sounds good to me. There are good use cases for having the image preloaded but initially invisible -- but most of the time, best practice is going to be to lazy-load it when whatever event that makes it visible happens.
Here's an example of an image hidden <768px:
However, once I added sizes="(min-width: 2540px) 2400px, (min-width: 780px) calc(93.1vw + 54px), 100vw", the linter no longer complained.