[whatwg] <img srcset> for responsive bitmapped content images

[Kornel Lesiński]

On Thu, 10 May 2012 21:18:41 +0100, Maciej Stachowiak <mjs at apple.com>  
wrote:

>>> For two, I'm not sure that it's particularly obvious that when you say
>>> "2x", you should make sure your image was saved as 196dpi.  You have
>>> to already know what the default resolution is.  As well, I think that
>>> values like 300dpi are pretty common, and they don't map to integral
>>> 'x' values.  If people say "screw it" and use "3x", this'll be
>>> slightly wrong and I think will cause ugly blurring.  If we make this
>>> take <resolution>, people can just use the dpi unit.
>>
>> Can we just use CSS's 'dpi' instead?
>>
>> <img src="default.jpg" srcset="highres.jpg 300dpi">
>
> CSS's 'dpi' is confusing, because it actually defines the ratio of  
> device pixels to CSS inches, not device pixels to physical inches, as  
> most users would expect 'dpi' to mean in the context of a graphics  
> program. So 300dpi would mean the same thing as 3.125x, and would likely  
> itself result in ugly blurring, since scaling by a fractional scale  
> factor rarely looks crisp.

I doubt whether support for non-integer scale factors/arbitrary DPI is  
going to be useful in practice.

While it's relatively easy to resize photos for any DPI, it's not  
desirable from caching/processing perspective (hosting and serving as many  
different variants of a file as there are screen densities). A pragmatic  
solution is to have few sizes and serve a good enough size, which may as  
well be integer multiplies of a CSS pixel.

And when it's important to serve pixel-perfect images for arbitrary DPI,  
then probably it's equally important to have pixel-perfect CSS as well.  
Unfortunately, it's very hard to write device-pixel-perfect CSS for  
non-integer multiplies of a CSS pixel. I don't expect many (if any)  
authors to actually write `border: 0.6024096386px solid` to achieve this.

Most artists won't spend time to prepare dozens of pixel-perfect manually  
resized versions of icons for varying screen densities, so most of the  
time assets for resolutions between 1x and maximum will be automatically  
resized one way or another.

Therefore, I expect browsers/systems to continue using fake 96dpi/192dpi  
snapped to device pixels, and artists to focus only on those ratios. It's  
simplest for everybody and gives device-pixel-perfect rendering on varying  
screen densities.

-- 
regards, Kornel Lesiński