[whatwg] responsive images

[=?GB2312?Q?Kornel_Lesi=A8=BDski?=]

On 22 maj 2012, at 05:53, 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">
> 
> Not to mention, what happens when a 3x device is released?

2x image will be used, upscaled. 

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.

> 1x and 2x are. Is it 2x 72 or 2x 96? 
> and isn't 600-200 at 2 just the same as 1200-400 at 1?

'x' is not a media query, but property of the image. 

600 at 2 is a higher quality version of 300 at 1. 

> Perhaps something like this:-
> 
> <picture>
>    <src="some.img?{width}-{height}@{dpi}">
>    <img src="some-fallback.img">
> </picture>
> 
> You could then define a list of parameters that the browser supports as replacements. Eg. viewport-width/height, dpi, density. This could also be carried over to other tags.

If width/height is a virwport size then it will generate lots of unique URLs (requires server to generate many images and proxies to cache them separately), and may generate lots of requests when window is resized. 

It doesn't work with static file servers, and may be costly/problematic for CDNs. 

Another risk is that authors will create files only for size/DPI of iPhone and iPad and never supply images for 3000 other resolutions of various Android devices. 

-- 
regards, Kornel