Retina Display and high-definition embeded media

We can use CSS media queries to detect high definition displays and trigger the browser to use high-definition artwork. But there are no HTML attributes to do the same for image-replaced elements within the mark-up. This is a potential solution.

Read more about it on the associated blog entry.

You'll need to be on an iPhone 4 to see any differences.

Standard rendering in CSS

Targeting HD displays in CSS

This will only be enhanced resolution on High Density displays, such as iPhone 4. It should look sharper and more detailed on those devices.

Standard rendering in HTML

Proposed HD solution for HTML

This is baked into the HTML, and as such isn't good for non-retina devices as there's bandwidth overhead

Proposed HD solution for HTML, using jQuery to substitute the HD image

Provides HD <img /> elements for iPhone4, without causing bandwidth overheads on other devices.

The first image has the width and height specified in the mark-up, the second doesn't.