[css3-images] Re: Intrinsic image size scaling factor

On May 20, 2012, at 5:10 PM, Kornel Lesiński <kornel@geekhood.net> wrote:

> 
> I've suggested on whatwg[1] that there should be a possibility of easily embedding all images on a page at 192dpi/2dppi *by default*.
> 
> My reasoning is that in not-so-far future high-DPI displays will be common enough, and bandwidth cheap enough, that authors will want to design primarily/only for "2x" displays.
> 
> Images at intrinsic size of 1 image pixel to 1 CSS pixel look awful on high-DPI displays, so 1:1 scale with CSS pixels is going to become a bad default.
> 
> Currently the only solution is to specify explicit size for all <img>/background-image, and that is quite tedious. In the future the need to specify img-set(…2x) and <img srcset="…2x"> every time just to get "normal" resolution will seem like an annoying historical quirk, and basic forms of <img> and url() will become useless.
> 
> 
> To alleviate that I suggest adding a property that scales intrinsic size of images embedded on a page via <img> and url() (except image-set()).
> 
> The property would be inherited to allow pages easily make *all* images high-dpi:
> 
> html {image-size-scale: 2x}
> 
> 
> For example a 100x100 pixel image without width/height set, but with image-size-scale:2x applied would be displayed at 50x50 CSS pixels.
> 
> Image with size explicitly set via <img width/height> or CSS width/height would not be affected by image-size-scale.
> 
> 
> Same for background-image: background:url(100x100px) without background-size would show double-density background 50x50 CSS pixels large. image-set(url() 1x) or background-size would take precedence over image-size-scale property.

I believe the CSS image-resolution property already does this, though using the harder-to-remember official CSS resolution units. For instance you could say:

* { image-resolution: 2dppx; }

and I believe it would have the effect you suggest.

Regards,
Maciej

Received on Monday, 21 May 2012 01:19:30 UTC