Re: [whatwg] responsive images

On Tue, May 22, 2012 at 3:53 AM, Paul Court <paul@pmcnetworks.co.uk> wrote:
> As a HTML author and programmer, I just cannot see myself implementing the current srcset proposal on sites. As a programmer, it has very much got what we would call a "bad code smell".
>
> <img src="face-600-200@1.jpeg" alt="" srcset="face-600-200@1.jpeg 600w 200h 1x, face-600-200@2.jpeg 600w 200h 2x, face-icon.png 200w 200h">
>
> Not to mention, what happens when a 3x device is released?
> Do I have to change all my code again?

In the short term, the 3x browser can choose to either download the 1x
or 2x, whichever it feels would be better.

If you want to address it directly, yes, you'd need to change your
@srcsets to have a new 3x url as well.  Unfortunately you can't get
away from that unless you abstract the functionality into CSS or
similar, which forces the images to start downloading later.


> I'm also confused about what exactly 1x and 2x are. Is it 2x 72 or 2x 96?

Standard resolution for the web is 96dpi.


> and isn't 600-200@2 just the same as 1200-400@1?

Yes and no.  They have the same number of pixels, yes, and may even be
the same image.  However, the former has a better intrinsic size,
which is used when you don't specify an explicit @width or @height.
As well, the main reason for specifying a 2x image is that the browser
*knows* that it's 2x, and so is probably about 4 times the size of 1x
image in similar circumstances, plus is specifically designed for
retina displays and the like.  All of this is very useful information
to allow the browser to decide which one to download.


> Wouldn't it be more future proof, instead of making the author supply a never ending string of image names, implement variable logic (I think first suggested by Matthew Wilcox). However, instead of the suggestion of putting as a head <meta> tag, perhaps the logic could be confined to the <img> tag (or a <picture> tag to allow slightly smoother transition).
[snip details]

That's a possibility, yes.  However, it's substantially more complex,
as it invokes an entirely new mechanism of url rewriting in addition
to the existing complexity.  It also means that every responsive image
on your page needs to serve images for the full cross-product of
things that you support - you can't, say, only do multiple resolutions
for your large images.


On Tue, May 22, 2012 at 7:26 AM, Kornel Lesiński <kornel@geekhood.net> wrote:
> I think that 3x device is very very unlikely to ever happen, since 2x screens are may be dense enough to have pixels smaller than human eye can see.

Tell that to printers, which can easily hit 400+dpi.  You need more
than 2x before you make anti-aliasing fully unnecessary.

~TJ

Received on Tuesday, 22 May 2012 20:58:31 UTC