[whatwg] Defaulting new image solution to 192dpi

[Kornel Lesiński]

On Thu, 17 May 2012 19:32:51 +0100, Jeremy Keith <jeremy at adactio.com>  
wrote:

> Kornel wrote:
>> Note that the scale multiplier can be omitted already when only the  
>> size is specified
>
> I'm confused by what you mean by scale multiplier. The x value describes  
> the pixel density of the device/screen, not the image, right?

I think it only makes sense if it describes the image, so that:

<img srcset="100x100image-pixels.jpg 2x">

would display at 50x50px (CSS px).

Of course the UA is likely to match 2x with double-density displays, so it  
acts as both description of the image and a "hint" media query.


If it were purely a media query unrelated to the image, then this:

<img srcset="100x100image-pixels.jpg 2x, 50x50image-pixels.jpg 1x">

would only select between pixelated large image and pixelated small image,  
never making use of a high DPI display.


The goal is to avoid having to specify explicit <img width/height>. Not  
only it's tedious and annoying, it also makes it impossible to adapt  
images to viewport and screen density at the same time:

<img srcset="
	phone-retina-640imgpx.jpg 2x max-width:320px, phone-regular-320imgpx.jpg  
1x max-width:320px,
	desktop-1000imgpx.jpg 2x, desktop-500imgpx.jpg 1x">


In the case above I'd want to have phone* images on <=320px viewport,  
matching display density, and desktop* images on larger viewports, taking  
full advantage of display density as well (i.e. "desktop-1000imgpx.jpg 2x"  
displayed at 500px).

There is no value of <img width="" height=""> that can work for that case  
without ruining the adaptation <img width=500> would work for desktop, but  
ruin phone versions.

So the only way to use srcset in that case would require additional media  
queries that react to same breakpoints as srcset and set explicit pixel  
sizes of this image for each breakpoint. Awful.

So for me the only logical conclusion is that images with "2x" descriptor  
must have their intrinsic size halved (2 img pixels to 1 css pixel).  
That's what iOS does when you use @2x images in Cocoa.

-- 
regards, Kornel Lesiński