Overly-verbose results when image has zero width

[eeeps]

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:

[eeeps]

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?).

[ausi]

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.”.

[eeeps]

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.

[danielbachhuber]

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.

[ausi]

Fixed the overly verbose suggestion in 51ecc89

I keep this issue open for the feature to report warnings for display:none images in general.