[whatwg] responsive images
glenn at zewt.org
Tue May 22 08:02:10 PDT 2012
(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
<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.
More information about the whatwg