[whatwg] responsive images

[Glenn Maynard]

(I wish people would stop starting new threads about the same topic.)

On Tue, May 22, 2012 at 5:53 AM, Paul Court <paul at 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 at 1.jpeg" alt="" srcset="face-600-200 at 1.jpeg 600w
> 200h 1x, face-600-200 at 2.jpeg 600w 200h 2x, face-icon.png 200w 200h">
>

Actually, it's pretty clean; you've just made it ugly by sticking it all on
one line.

<img src="face-600-200 at 1.jpeg" alt=""
     srcset="face-600-200 at 1.jpeg 600w 200h 1x,
             face-600-200 at 2.jpeg 600w 200h 2x,
             face-icon.png       200w 200h">

It's no uglier than CSS syntaxes like background.

Not to mention, what happens when a 3x device is released?
> Do I have to change all my code again?
>

It'll use the best match, which is most likely the 2x version.

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

It means two hardware pixels per CSS pixel, which is what you get on
iPhones, and also what you'll get if the user has zoomed in by 2x (eg.
ctrl-+ in most desktop browsers).  It's not related to DPI.

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

First, "600w 200h" does not mean a 600x200 image; it means an image
targetting 600x200 screens.  Some syntax changes have been discussed to
make this more clear.

Second, the "2x" means the the width and height of the image are 1/2 the
intrinsic dimensions of the image.  For example, if you have a logo which
is 400x150 on regular 1x displays, then a "2x" option would be an 800x300
image which is displayed as if you wrote <img src=url width=400
height=150>.  That means it takes the same amount of space in CSS
pixels--400x150--but you get the higher detail from the 2x density screen
(like iPhones), without changing the layout of the page.

-- 
Glenn Maynard