Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG - Init

<body> <h1>Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG</h1> <div><p>I'm loving responsive design and am slowly updating all my websites to support mobile browsers as well as tablets. Currently <a href="http://www.hanselman.com/">Hanselman.com</a> (this site), <a href="http://www.hanselminutes.com">Hanselminutes.com</a> (my weekly podcast), <a href="http://www.speakinghacks.com">SpeakingHacks.com</a> (a video I sell on how to be a better presenter) as well as <a href="http://www.lostphonescreen.com/">LostPhoneScreen.com</a> (where I sell my Windows Phone 7 application.)</p> <p>All of this "mobilization" has stemmed from my frustration with other folks' sites that look lousy on my phone. It's SO frustrating to reach a site that could take 10 minutes and make its mobile experience 100% better.</p> <p>Now that I've updated my main sites I'm tidying up a few things that continue to bug me. On my iPhone 4S with a DPI of 326 dpi, the logo on my site and a few other graphics look lousy. Why?</p> <p>Well, for example, the image for the logo is a PNG that is literally 100px by 100px. This is a foreground image (not a CSS background image on an elements, yes, people still use those) and it has its height and width both set to 100px. The size of the image and the img tag are both really 100x100.</p> <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="A blurry image on a Retina Display" border="0" alt="A blurry image on a Retina Display" src="http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/Updating-your-blog-or-website-for-high-d_DB82/photo%201_3.png" width="640" height="497" /></p> <p>You can see that not only is the logo blurry but the search magnifying glass and social icons are as well. That's because the browser has scaled up the images to manage the super high-res display of this device. Better that they scale it up than make it too tiny. The overall size of all the other elements on the page are scaled up as well so the fonts and form elements like the dropdown are crystal clear.</p> <p>There's a few ways to fix this.</p> <h3>Support (High DPI) Retina Display with CSS Background Images</h3> <p>Since I am already using CSS Media Queries to change my site's CSS for smaller screens like this already:</p> <pre class="brush: css; toolbar: false; auto-links: false;">@media screen and (max-width:720px)<br />{<br /><br />}</pre> <p>I can certainly do the same and detect high resolution displays. It's not just the iPhone. A lot of the <a href="http://www.lukew.com/ff/entry.asp?1142">newer Nokias and HTCs have displays over 200dpi</a>. </p> <p>I could create a media query like this:</p> <pre class="brush: css; toolbar: false; auto-links: false;">@media screen and (min-device-pixel-ratio: 2) {<br /><br />}</pre> <p>Or do conditional inclusion like this (or -webkit-min-device-pixel-ratio):</p> <pre class="brush: xml; toolbar: false; auto-links: false;"><link rel="stylesheet" media="screen and min-device-pixel-ratio: 2" href="justforhighres.css"/></pre> <p>Do your testing and be aware you likely need to use both the webkit prefix and one without:</p> <pre class="brush: css; toolbar: false; auto-links: false;">only screen and (-webkit-min-device-pixel-ratio : 2),<br />only screen and (min-device-pixel-ratio : 2) {<br />}</pre> <p>You may decide that 1.5 is a better ratio for you. </p> <p>The <a href="http://www.webkit.org/blog/55/high-dpi-web-sites/">WebKit folks are thinking about this</a> and I could use background-size like this:</p> <pre class="brush: css; toolbar: false; auto-links: false;">div {<br /> background: url(logo-low.png);<br /> background: url(logo-high.png) (100px 100px);<br />}</pre> <h3>Handling Foreground Images (with the IMG tag)</h3> <p>Ideally I should be using SVG (Scalable Vector Graphics) for my images like the magnifying glass and they'll scale everywhere </body>