
Supporting high-dpi pixel-dense displays like iPhones/iPad with CSS or IMG - joeyespo
http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx
======
ars
I think this should be done by using content negotiation. The browser should
include a header with the desired resolution (in DPI, not screen pixel width).

The server should then redirect to a new image url (to maintain caching).
Something like images/foo.png;dpi=100

Or, perhaps better:

    
    
        <img src="images/foo.png" dpi="100 70 200">
    

A browser with support for the dpi attribute would pick the best one from the
list, then send a request for an image:

    
    
        images/foo.png?dpi=100
    

Older browsers would use the regular image. This would avoid the redirect and
the need for special programming on the server (which is hard with ordinary
hosting).

One thing that would still need to be worked out is the scaling factor for
pixel sizes written in the css for the image.

------
connor
Good article to a very common problem. The only thing I'd add- use CSS when
possible instead of an image. I often see low resolution shapes as images
(like rounded buttons for example) that could easily just have been done in
CSS- which look great on any resolution and all modern browsers.

------
joubert
and if you're dealing with <canvas> —[http://joubert.posterous.com/crisp-
html-5-canvas-text-on-mob...](http://joubert.posterous.com/crisp-
html-5-canvas-text-on-mobile-phones-and)

