Proposal for native browser support of high-resolution image substitution

In my post yesterday, I outlined how to present high-resolution images in web pages using CSS media queries to users using a high-PPI screen such the iPhone 4's new Retina display. I also mentioned that while this works for background images in CSS, the only solution currently for carrying out this same substitution for images linked to using the <img> tag is to use JavaScript. Finally, I suggested that browsers should natively support substituting high-resolution versions of images when they detect that the user is using a high-PPI display. In this post, I'd like to formalize that suggestion a bit.

Proposal for native browser support of high-resolution image substitution

Authoring web sites to use resolution independent images that display beautifully on high-resolution displays should be made as easy as possible for developers and should not require JavaScript to accomplish.

To accomplish this, I propose a new HTML Meta Tag, resolutions, that can be used to specify that high-resolution versions of images linked to from the page are available and that the browser should use them in place of the lower-resolution default images if it detects that a user is using a high-resolution screen. The resolutions meta tag lists the device-pixel ratios supported by images in the page.

So, for example…


… means that the developer is telling the browser that she has created 2x resolution images for the images linked to from the current page and named them with a @2x suffix.

To illustrate, if her image tag is as follows…

A flower

… then she has two image files under /images: the low-resolution default (flower.jpg), and a higher-resolution (200%) version named flower@2x.jpg.

(This is the same naming convention already used by Apple in its Cocoa Touch framework for automatically loading in higher-resolution versions of images.)

Based on the meta tag, if the browser detects that the user is running at a min-device-pixel-ratio of 2.0, it will automatically ask for the 2x version of the image (flower@2x.jpg) instead of the default image as specified in the image tag.

Finally, so as not to flood external sites with high-resolution image requests, this functionality would only work for local images specified via relative links.

Multiple resolutions

The resolutions tag can also contain a list of supported device-pixel ratios so as to support even higher-resolution displays when and if they become available in the future.

For example:

In this case, the developer would provide 2x, 4x, and 8x versions of all images. So, in the running example, she would make flower.jpg, flower@2x.jpg, flower@4x.jpg, and flower@8x.jpg.

Advantages

The advantages of this approach are several:

  1. Makes it very simple for developers to support high-resolution displays like the iPhone 4's Retina screen
  2. Does not require JavaScript
  3. Does not change the default way that things work (if the meta tag is not specified, the browser simply behaves as it always has).

So, how do we make this happen?

I have to admit that I'm rather clueless about whom to contact about making this happen and wouldn't even know whom to approach in the W3C so I'm planning on leading my rather more clued-up friends to this post and seeing what happens. If you think that this is a good idea and want to point the right people here to get the ball rolling, I'd appreciate it.

Update: I've now submitted this as a proposal to WhatWG. Check it out on the MetaExtensions Wiki page.

And, of course, I'd love to hear your feedback and thoughts.

Comments