Possibility to mark image candidate as high compressed

[aFarkas]

It would be nice to have a descriptor that marks an image candidate as high compressed (following the compressive images pattern).

For brevity also an attribute, that marks all candidates inside of a srcset as high compressed would be nice.

Use case:

1. High compressed images look good on high DPI devices and have much lower file size.
2. By using high compressed images low DPI and high DPI devices can better share the amount of images, which reduces the number of needed images.

Currently this technique can only be used in combination with the picture element, which doubles the amount of needed images and doesn't fit the pure art direction use case.

[tabatkins]

Yeah, this ties into earlier ideas that the x descriptor, while useful, assumes that the filesize scales in relation to it; having the ability to explicitly specify the filesize and use that as input to the selection algo might also be useful to reflect techniques like this.

Can you just, for example, use a single 2x source or something? Can you provide an example of your <picture>-based code?

[aFarkas]

I basically came up with two ideas:

<picture>
    <source
        srcset="image-w1600-q10.jpg 1600w,
            image-w1440-q10.jpg 1440w,
            image-w1200-q10.jpg 1200w,
            image-w800-q10.jpg 800w,
            image-w600-q10.jpg 600w"
        media="(min-resolution: 2dppx)" />
    <source
        srcset="image-w1440-q80.jpg 1440w,
                image-w1200-q80.jpg 1200w,
                image-w800-q80.jpg 800w,
                image-w600-q80.jpg 600w,
                image-w400-q80.jpg 400w" />
<img
    alt="picture but without artdirection" />
</picture>

And:

<picture>
    <source srcset="img-1500w-10q.jpg 1500w" sizes="100vw" media="(max-width: 800px)" />
    <source srcset="img-3000w-10q.jpg 3000w" sizes="100vw" media="(max-width: 1600px)" />
    <source srcset="img-4000w-10q.jpg 4000w" sizes="100vw" media="(max-width: 2500px)" />
    <source srcset="img-6000w-10q.jpg 6000w" sizes="100vw" />
    <img />
</picture>

Filesize descriptor or a quality level descriptor sounds interesting.

[nhoizey]

A few years later, I indeed have a few projects where I use <picture> to send more compressed images to screens with density 3dppx and more, like in @aFarkas’ first example.

It looks like @eeeps will convince me to even do it down to 2dppx: https://twitter.com/etportis/status/1107768548435218432

I'm not sure we can do it with something better than <picture>, but I wanted to confirm the usecase is there, and unfortunately most Responsive Image developers send useless heavy images to high density mobile screens.

[yoavweiss]

@nhoizey have you seen the discussion on https://github.com/whatwg/html/issues/4421?

[nhoizey]

@yoavweiss I didn't, thanks a lot!

I guess this issue can be closed, then?

[yoavweiss]

I think the discussion here is looking to somehow annotate high DPR images as "compressive". While related, the discussion on https://github.com/whatwg/html/issues/4421 does not do exactly that.

[nhoizey]

You're right, not exactly the same indeed.