RespImageLint Linters

Descriptors must be unique

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 2x">
<img src="200x100.jpg" srcset="200x100.jpg 200w, 400x200.jpg 400w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg, 400x200.jpg 1x">
<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 1x">
<img src="200x100.jpg" srcset="200x100.jpg 200w, 400x200.jpg 200w">

Malformed descriptor

The syntax of the descriptors is defined in the spec.

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x">
<img src="200x100.jpg" srcset="200x100.jpg 200w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 1a">
<img src="200x100.jpg" srcset="200x100.jpg 100h">
<img src="200x100.jpg" srcset="200x100.jpg 200w 100h">
<img src="200x100.jpg" srcset="200x100.jpg 1x 200w">
<img src="200x100.jpg" srcset="200x100.jpg 200.0w">

X and W descriptors must not be mixed in one srcset attribute

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 2x">
<img src="200x100.jpg" srcset="200x100.jpg 200w, 400x200.jpg 400w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 400w">
<img src="200x100.jpg" srcset="200x100.jpg, 400x200.jpg 400w">

Sizes attribute must be set if W descriptors are used

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x">
<img src="200x100.jpg" srcset="200x100.jpg 200w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 200w">

W descriptor doesn’t match the image size

Correct

<img src="200x100.jpg" srcset="200x100.jpg 200w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 100w" sizes="200px">

X descriptor doesn’t match the image size

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 2x">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 3x">

X descriptor must not be used if sizes attribute is set

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x">
<img src="200x100.jpg" sizes="200px" srcset="200x100.jpg 200w">

Incorrect

<img src="200x100.jpg" sizes="100vw" srcset="200x100.jpg 1x">

Missing src attribute

Older browsers or other user agents which don’t understand the srcset attribute should get a fallback image.

Correct

<img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 2x">

Incorrect

<img srcset="200x100.jpg 1x, 400x200.jpg 2x">

Images in srcset attribute must not be different

The srcset attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the image contents.

Correct

<img src="cat-200x100.jpg" srcset="cat-200x100.jpg 1x, cat-400x200.jpg 2x">

Incorrect

<img src="cat-200x100.jpg" srcset="cat-200x100.jpg 1x, dog-400x200.jpg 2x">

Images in srcset attribute must not have different aspect ratios

The srcset attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the ratio.

Correct

<img src="200x100.jpg" srcset="200x100.jpg 200w, 400x200.jpg 400w" sizes="200px">

Incorrect

<img src="200x100.jpg" srcset="200x100.jpg 200w, 400x100.jpg 400w" sizes="200px">

A fitting image source should be available for all screen sizes

Loading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.

Correct

<img style="width: 200px" src="200x100.jpg">
<img
    style="width: 100%"
    src="200x100.jpg"
    srcset="200x100.jpg 200w, 400x200.jpg 400w, 800x400.jpg 800w, 1600x800.jpg 1600w, 2000x1000.jpg 2000w"
    sizes="100vw"
>

Incorrect

<img style="width: 100%" src="200x100.jpg">
<img
    style="width: 100%"
    src="200x100.jpg"
    srcset="200x100.jpg 200w, 4000x2000.jpg 4000w"
    sizes="100vw"
>

Images in different <source> elements shouldn’t be the same

The <source> element should only be used for art direction and format-based selection. For providing multiple resolutions of the same image use the srcset attribute instead. More information on CSS-Tricks.

Correct

<picture> <!-- different content -->
    <source srcset="cat-200x100.jpg" media="(max-width: 600px)">
    <img src="dog-200x100.jpg">
</picture>
<picture> <!-- different aspect ratio -->
    <source srcset="cat-100x100.jpg" media="(max-width: 600px)">
    <img src="cat-200x100.jpg">
</picture>
<picture> <!-- different image type -->
    <source srcset="cat-200x100.webp" type="image/webp">
    <img src="cat-200x100.jpg">
</picture>

Incorrect

<picture> <!-- same contents, aspect ratio and format -->
    <source media="(max-width: 900px)" srcset="cat-400x200.jpg">
    <img src="cat-200x100.jpg">
</picture>
<picture> <!-- exact same image but different URL -->
    <source media="(max-width: 900px)" srcset="cat-200x100.jpg?foo">
    <img src="cat-200x100.jpg">
</picture>

The sizes attribute has to match the width of the image

The sizes attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.

Correct

<img
    style="width: 200px"
    sizes="200px"
    srcset="200x100.jpg 200w, 400x200.jpg 400w"
    src="200x100.jpg"
>
<style>
.wrong-sizes-demo-1 { width: 200px }
@media (min-width: 600px) {
    .wrong-sizes-demo-1 { width: 400px }
}
</style>
<picture>
    <source
        media="(min-width: 600px)"
        sizes="400px"
        srcset="400x400.jpg 400w, 800x800.jpg 800w"
    >
    <img
        class="wrong-sizes-demo-1"
        sizes="200px"
        srcset="200x100.jpg 200w, 400x200.jpg 400w"
        src="200x100.jpg"
    >
</picture>

Incorrect

<img
    style="width: 100%"
    sizes="200px"
    srcset="200x100.jpg 200w, 400x200.jpg 400w"
    src="200x100.jpg"
>
<picture>
    <source
        media="(min-width: 600px)"
        sizes="200px"
        srcset="200x100.jpg 200w, 400x200.jpg 400w"
    >
    <img
        style="width: 200px"
        sizes="400px"
        srcset="400x400.jpg 400w, 800x800.jpg 800w"
        src="400x400.jpg"
    >
</picture>

Multiple <img> elements are not allowed

Only one <img> element is allowed inside of <picture>.

Correct

<picture>
    <img src="200x100.jpg">
</picture>

Incorrect

<picture>
    <img src="200x100.jpg">
    <img src="200x100.jpg">
</picture>

Only <source> and <img> tags are allowed inside of <picture>

You should not use <picture> as a wrapper to put additional elements inside it.

Correct

<picture>
    <img src="200x100.jpg">
</picture>

Incorrect

<picture>
    <img src="200x100.jpg">
    <span>Image Caption</span>
</picture>

The <img> element must not be omitted inside of <picture>

The <picture> element needs an <img> element in order to display something.

Correct

<picture>
    <img src="200x100.jpg">
</picture>

Incorrect

<picture>
    <source srcset="200x100.jpg">
</picture>

The src attribute has no effect on a <source> element

The <source> element only supports the srcset attribute.

Correct

<picture>
    <source srcset="200x200.jpg">
    <img src="200x100.jpg">
</picture>

Incorrect

<picture>
    <source src="200x200.jpg">
    <img src="200x100.jpg">
</picture>

The <source> element must not appear after an <img> element

The <img> element has to be the last element inside of <picture>.

Correct

<picture>
    <source srcset="200x200.jpg">
    <img src="200x100.jpg">
</picture>

Incorrect

<picture>
    <img src="200x200.jpg">
    <source srcset="200x100.jpg">
</picture>