Warning about using srcset over <source> is incorrect

[Duncan Wilcox]

Tested respimagelint and it says Images in different <source> elements shouldn’t be the same, and 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..

While this might be the consensus, as implied by the link to CSS tricks, there are cases where it makes sense to specify an identical image differently based on the screen pixel density.

Perceptual tests show that you can get away with higher image compression at higher screen densities, because the noise introduced by a lossy compressor such as jpeg or webp is less visible at higher screen densities.

Or in other words you would compress a 1024x1024 @ 1x image less than a 512x512 @ 2x image, despite them having an identical number of pixels.

It is consequently a shortcoming of the responsive image standard to not account for pixel density, and bad advice to let browsers pick the image based solely on the pixel dimensions of an image.

Ultimately the linter shouldn't warn about this.

[Martin Auswöger]

Ultimately the linter shouldn't warn about this.

You are right, it shouldn’t. I added a check specifically for the use case of different compression levels as you described. You can find more information about it in #13 (comment)

Can you post a link to the affected page so I can debug why the detection didn’t work in your case?

[Duncan Wilcox]

This is a sample page https://sparkleapp.com/fun/respimg/ (generated by sparkleapp.com).

Looking at it more closely I was mistaken, it seems that the complaints are about two images with the same pixel density but different sizes.

I'd say the warning is still incorrect because there's no way to specify one srcset for 1x images and a different one for 2x images.

[Martin Auswöger]

Looking at it more closely I was mistaken, it seems that the complaints are about two images with the same pixel density but different sizes.

Yes, the two images with the same pixel density (and compression level) should be put together into the same srcset attribute.

I'd say the warning is still incorrect because there's no way to specify one srcset for 1x images and a different one for 2x images.

There is a way. And it would be the correct solution for your use case in my opinion. Your example can be rewritten to something like this:

<picture>
  <source
    media="(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"
    sizes="(max-width:479px) 200px, (max-width:767px) 256px, (max-width:959px) 400px, 512px"
    srcset="image-400-2.jpg 400w, image-512-2.jpg 512w, image-800-1.jpg 800w, image-1024-1.jpg 1024w"
  >
  <img
    sizes="(max-width:479px) 200px, (max-width:767px) 256px, (max-width:959px) 400px, 512px"
    srcset="image-200-1.jpg 200w, image-256-1.jpg 256w, image-400-3.jpg 400w, image-512-3.jpg 512w"
    src="image-200-1.jpg"
    alt=""
  >
</picture>

This behaves basically the same as your example, but the browser can now make better use of the cache.

[Martin Auswöger]

@duncanwilcox any updates on this?

Does my suggested solution work for your use case?

[Duncan Wilcox]

Sorry for not replying earlier. I guess what you suggest is acceptable though I haven't had time to wrap my head around all the possible edge cases. We also interchangeably use the code generation for the art direction case, and having common code makes it much simpler, though if your proposed solution works we generate sub-optimal code in that case.

[Martin Auswöger]

Thanks for the update. I think we can close this issue for now then. If you find any issues with the proposed solution, feel free to reopen the issue.