Get ready for Retina – using SVG images and web font icons for pixel perfection

retina images with CSS

Retina displays, or high pixel density displays are becoming more mainstream, so it's time to start adopting techniques to ensure our websites don't start looking fuzzy around the edges with pixelation.

SVG images

If you have spent time designing for mobile, no doubt you have delved into the device-pixel-ratio media query for loading 2x images for elements such as logos and icons. Example:

@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min--moz-device-pixel-ratio:1.5),
only screen and (min-resolution:240dpi) {  
  #logo { /*assuming logo size is 400px x 200px*/
    background-image: url(images/logo@2x.png); 
    background-size: 200px 100px;
  }
}

For simple vector images, using the SVG file format can be both simpler and smaller in file size. Since SVG isn't supported by IE8 or below, you'll need to use feature detection to load an alternative for those unfortunate browser users.

#logo {
  background-image: url(images/logo.svg);
  background-size: 100%;
}
.no-svg #logo {
  background-image: url(images/logo.png);
}

The above snippet assumes that you have loaded a build of Modernizr which includes a test for SVG.

Now your logo will automatically scale up to retina screen resolution, and scale down to a smaller mobile resolution, without the need to 2x versions of the image files.

You might also need to check support for the background size property; this is as simple as adding a .no-backgroundsize CSS rule.

Web font icons

The tedious task of using icons in a web page has now been turned into a simple pleasure with the use of an icon web font, such as Font Awesome. In addition to being extremely easy to load a font icon, you can adjust the size color of the icon in CSS without the need to recreate the icon image file. Just like text, the font icon will scale up or down to any size, which means your icons will automatically look wonderful on retina displays.

Just like any web font, using an icon font involves loading the font files with the @font-face rule:

and then referencing the relevant font-family property in your CSS, like so:

/*ensure you set the url path to reference
 the directory containing the font files*/

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), 
    url('../font/fontawesome-webfont.woff') format('woff'), 
    url('../font/fontawesome-webfont.ttf') format('truetype'), 
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
.selector {
  position: relative;
}
.selector:before {
  content: "/f002"; /*the search icon*/
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  position: absolute;
/*adjust as necessary*/
  top: 2px; 
  left: 2px;
}

I like to use absolute positioning for the icon, which requires the selector to be set to relative.

Now it is simply a matter of using the matching character encoding for the icon you need. I have created a list of all 249 Font Awesome icons and their corresponding CSS content values here.

Conditionizr

When it comes to feature-detection, the newest kid on the block is Conditionizr and as its name would suggest, works much like Modernizr by adding CSS classes to the HTML element to output <html class="retina">

#hero-image {
  background-image: url(images/hero-image-normal.jpg);
}
/* load larger image if retina supported */
.retina #hero-image {
  background-image: url(images/hero-image-retina.jpg);
}

The conditionizr.js JavaSript file must be loaded, much like modernizr.js, however it requires initialization in your document head

<script>
$(function() {
  // initialise conditionizr
  $('head').conditionizr();
});
</script>

The documentation recommends placing conditionizr.js near the top of your scripts so that it will run first and then running the initiating script directly after your JavaScript files.

In addition to the retina test, Conditionizr has a bunch of other very handy tests for browser versions which will add additional CSS classes such as ie7, ie8, chrome, mozilla.

One Response to “Get ready for Retina – using SVG images and web font icons for pixel perfection”