- From: Simon Pieters <simonp@opera.com>
- Date: Thu, 10 May 2012 15:47:51 +0200
- To: "Edward O'Connor" <eoconnor@apple.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: whatwg@whatwg.org
On Thu, 10 May 2012 15:24:28 +0200, Tab Atkins Jr. <jackalmage@gmail.com> wrote: > This proposal has a similar issue to image-set() - if the 2x means > "twice the resolution" (which it should), this will *not work by > default*. If you make a 5 inch wide image and save it as 200dpi, when > you send it to the browser its automatic size will be 10 inches wide. > Browsers are constrained by back-compat to always display images at > 96dpi. You can get around this by explicitly setting <img width>, but > we shouldn't require that if we can avoid it. > > This isn't hard to fix, of course; the fix just isn't included right now. We should indeed fix it. > CSS3 Images has the image-resolution property, which lets you tell the > browser what resolution to display the image at (that is, how it > should determine the automatic size). You can say "image-resolution: > from-image;" to get it to use the image's native resolution, whatever > it is. So, we need to add a rule to the UA stylesheet that says > "img[srcset] { image-resolution: from-image; }". Do we want from-image here? Or do authors prefer to serve 96dpi images that are bigger, and specify the intended dpi in the markup? > In the closely-related case of using image-set() in CSS, we can just > have the "winning image" set the default resolution. An earlier > version of the image() function let you set an image's resolution > immediately, but we punted it for simplicity at level 3. This would > do the same thing. > > That all said, I don't like the "2x" notation. It's declaring "this > image's resolution is twice that of a normal image". This has two > problems. For one, we already have a unit that means that - the dppx > unit. Using "2dppx" is identical to the meaning of "2x". Since > image-set() is newer than the dppx unit, we should change it to use > <resolution> instead. > > 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"> > I agree overall that this is the right approach - declaring relevant > information to the browser and letting it decide what to do is better > than trying to set up constraints by yourself. For example, using MQ > could result in the silly situation of downloading a high-res image at > first because you're on 4G, then throwing them away and downloading > low-res images when you drop to 2G. Using image-set() or @srcset > would let the browser keep the images it had already downloaded. Indeed. -- Simon Pieters Opera Software
Received on Thursday, 10 May 2012 13:48:44 UTC