Possibility to mark image candidate as high compressed #273

Open
aFarkas opened this Issue Oct 13, 2015 · 2 comments

Projects

None yet

2 participants

@aFarkas
aFarkas commented Oct 13, 2015

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
aFarkas commented Oct 15, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment