Adding Retina Graphics to Your Website

By Richa on Dec 08, 2011

If you’re building your site using responsive web design and testing on the iPhone 4, you’ll immediately notice that standard web graphics appear chunky or blurry compared to the iPhone’s razor-sharp text. This is due to how web pages are rendered on the iPhone’s “retina display”, or more generically, its higher-than-1.0-pixel-density screen¹. Getting a sharp image on these screens requires a bit more work. Here’s a practical example.

Say I begin with markup that looks like this:

<div id="page">
  <header>
    <a class="home" href="/"><div class="logo">&nbsp;</div></a>
    <nav>
      <a class="gallery" href="gallery.html">Gallery</a>
      <a class="pricing" href="pricing.html">Pricing</a>
      <a class="contact" href="mailto:hello@mycompany.com">Contact</a>
    </nav>
  </header>
</div> <!-- /#page -->

markup.html – View Gist

and styles that look like this (written in Sass using the SCSS syntax):

#page > header
{
  .logo
  {
    width: $logo-width;
    height: $logo-height;
    background: image-url("logo.png") no-repeat center center;
    @include background-size(100%);
  }
}

style-01.scss – View Gist

To get a nice crisp logo to appear on the retina display, I’ll need to create a double-resolution image file. Assuming my original logo is vector-based, this is straightforward: just rasterize it at twice the size. The convention is to name this new file with the suffix “@2x”.

After creating my double-resolution image file, all I would need to do is add a CSS3 media query for the pixel density, like so:

#page > header
{
  .logo
  {
    width: $logo-width;
    height: $logo-height;
    background: image-url("logo.png") no-repeat center center;
    @include background-size(100%);
  
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
    {
      background-image: image-url("logo@2x.png");
    }
  }
}

style-02.scss – View Gist

Pretty simple, right?

Notes

For background on designing for the high-pixel-density displays that most smartphones boast nowadays, read Luke W’s roundup on the subject. ↩