CSS Sprites for Retina Display

Written on August 9, 2012

While in the process of upgrading a Tumblr theme I thought, “You know what would be a good idea, let’s make an optimizing mobile version.” Being one of the first times I’ve really dug into media queries I was a little nervous. The nerves were unnecessary, it turned out to be incredibly easy!

I stumbled into a problem, though: Why are all of my icons gross and blurry? It was my good ol’ iPhone 4′s beautiful screen. It’s high resolution display caused my icons to look like poop.

Turns out fixing this problem was a simple matter of a few lines of CSS and a little bit of time in Photoshop.

// double resolution icons
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .menu .icon {
    background:url(path/to/image/menu-sprite-2x.png) no-repeat;
    background-size: 90px auto;
  }
}

The key here is using the background-size property. My new high resolution sprite now measures a total of 180px wide, but we don’t want the icons to be big, we just want them to be crisp. Using the background-size method means you don’t need to adjust the background-position of any elements, neat eh?