Support sizes=auto

[eeeps]

Currently, when running the tool on a page that uses the brand-new sizes=auto syntax, RespImageLint complains,

The sizes attribute has to match the width of the image
The size of the image doesn’t match the sizes attribute auto

At a minimum, auto should be an allowed sizes value. A better solution would check that images with sizes=auto were also lazy-loaded, and had an extrinsic width + height, showing informative errors/warnings if not.

[TechAurelian2]

Maybe this issue should also be opened in the repository of the alternative Chrome extension recommended in the README of this project:

https://github.com/peter-neumann-dev/responsive-image-linter

[ausi]

@eeeps so sizes=auto is only allowed together with loading=lazy, right?

Regarding extrinsic width and height, do you think the linter should report this as an error if they are missing?

[ausi]

sizes=auto is not yet shipped by any browser, right?

[peter-neumann-dev]

Maybe this issue should also be opened in the repository of the alternative Chrome extension recommended in the README of this project:

https://github.com/peter-neumann-dev/responsive-image-linter

@TechAurelian2
I think we should not duplicate the issues in general. The Chrome extension is just a wrapper around the linter.

Issues regarding the extension itself are of course part of the extension's repo (that's how the issue template is asking for as well). I would add a hint that issues related to the linter are listed in this repository 🙂

[eeeps]

@ausi Auto-sizes is shipping in Chrome 126 which should go stable... tomorrow! (Tuesday)

loading=lazy is required for auto-sizes. Without it, auto is ignored.

Note that auto can be a part of a sizes that includes multiple values (for fallback purposes in browsers that don't support auto), but it can only be the first value. So sizes="auto, 80vw" is valid but sizes="(min-width: 800px) 800px, auto" is not.

I think the linter should report an error if there is no extrinsic height + extrinsic width, height+aspect-ratio, or (most commonly) width+aspect-ratio. Without these, the image will fall back to an imposed 2:1 intrinsic aspect ratio, which probably isn't what people want.

<img height width> in HTML + width: 100%; height: auto; in CSS is probably the easiest way to do this, but is not the only way; the linter should allow for other intentional cases like:

.hero-image {
  width: 100%;
  aspect-ratio: 4 / 3;
}

<img loading=lazy class=hero-img sizes=auto srcset="big 1000w, little 500w">

I haven't given a lot of thought as to how this could or should be checked.

[ausi]

At a minimum, auto should be an allowed sizes value. A better solution would check that images with sizes=auto were also lazy-loaded,…

Done in cb36c06
It checks now for loading="lazy" and ensures the attribute starts with auto or auto,.

I think the linter should report an error if there is no extrinsic height + extrinsic width, height+aspect-ratio, or (most commonly) width+aspect-ratio.

This is still missing, therefore keeping this issue open.

[peter-neumann-dev]

I will try to update the Chrome extension within the next days as well then. 🙂

Thanks, @ausi