55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Adding Retina Graphics to Your Website

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 screen1. 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

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

comments powered by Disqus