Retina

Implementing Retina-Ready Images on the Web.

Written by on Monday, February 11th, 2013 in Tutorials.

Since the launch of the iPhone with retina display, and subsequently the iPad and MacBook Pro with retina display, there has been an increased need for higher resolution images on the web. The higher DPI (dots per inch) of retina displays means they provide a sharper image to the eye, but this requires high resolution graphics.

Currently, the vast majority of websites are not ready for retina displays. MacBook Pro with Retina display owners frequently complain about this, as most of the web looks blurry to them. Similarly, if you look closely on most sites, you’ll notice that graphics displayed using ordinary sized PNGs or JPEGs will look blurry on an iPhone or iPad with retina display.

For anyone who designed their website using vector graphics originally, catering for retina displays shouldn’t be too much of a problem. If your graphics were designed solely as bitmap, a little extra work will probably be required.

The Problem

Currently, different browsers all treat this problem in different ways. And different devices have different resolutions, some of which are not standardized. This presents web designers and developers alike with a problem. There is no ‘best’ way – every method has its own advantages and disadvantages. On top of all this, we are back to a familiar battle – compensating for browser and device shortcomings.

Retina.js – JavaScript method

Probably the easiest way of delivering retina images is by using Retina.js, a small JavaScript file which detects @2x images and displays them on retina devices. Download retina.js, and include it in your web page with the following between the tags, or alternatively, place it just before the closing tag.

1
<script type="text/javascript" src="js/retina.js"></script>

Make sure, for every image that needs a high res counterpart, that you place a corresponding image with the suffix @2x. For example, if your image is called logo.png, the retina version will be called logo@2x.png. Place both into your images folder.

It should be noted that Retina.js only works on a real server, such as an Apache server, or a local server setup via MAMP, for example. When loading pages locally using Retina.js, it won’t load the high resolution images.

The problem with using Retina.js? Both images are always loaded, so it increases bandwidth and server load. It doesn’t provide the best performance, and it also requires the use of JavaScript, so if that is disabled, it won’t work. It also requires us to generate two versions of every image, when one should be enough.

Media Queries – Targeting Pixel Ratio and Resolution

Media Queries can be used to target retina devices in order to include high res graphics, for example:

1
2
3
4
5
6
7
8
9
@media

(-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

/* Retina graphics */

}

By using min-resolution, we can target specific resolutions, such as 192dpi. Resolution media queries are currently supported in IE9+, FF3.5+, Opera9.5+ but support in webkit browsers is lacking. This means we can continue to use -webkit-min-device-pixel-ratio for webkit browsers, but use min-resolution for the others.

CSS Tricks has written in further detail about using media queries to target retina displays. Brett Jankord has also explored the usage of media queries and cross-browser compatibility.

The problem with this method is that it might add considerable code to your CSS, and there are alternatives that don’t require us to write so much code simply to display high res graphics. Different browsers treat the media query declarations differently.

Media Queries with SASS

1
2
3
4
5
6
7
// only include 1x size image for 'non-retina' screens

@include if-max-resolution(1.49) {

background-image: url('img/footer-anchor@1x.png');

}
1
2
3
4
5
6
7
// only include 2x size image for 'retina' screens

@include if-min-resolution(1.5) {

background-image: url('img/footer-anchor@2x.png');

}

Using Fonts for Retina-Ready Graphics

The CSS declaration @font-face allows us to use our own web-ready fonts in web pages. One of the latest trends is the use of web fonts to display icons that would have traditionally been displayed using GIFs, JPEGs or PNGs.

The benefit of using a web font to display icons is that it will render correctly across multiple browsers and platforms, and it will retain its high resolution at any DPI. Zoom in as much as you like, fonts are always sharp.

Modern Pictograms is a great font for interface designers and programmers. There is also Social Media Icons, a package of 74 social icons in a font.

Certain browsers only accept specific file formats when using @font-face. For example, Internet Explorer only supports .eot (going all the way back to version 4). As such, it is advisable to use .ttf, .otf, .eot and .svg formats of your font. My favorite way of converting a licenced font for use on the web is the @font-face generator by Font Squirrel.

More information on using @font-face can be found at ThemeForest and in an article by Milton Bayer.

Using .SVGs for Retina-Ready Graphics

.SVGs are vector graphics, so in the same way that fonts can be used, they are ideal as they are resolution independent.

HTML:

1
<img alt="" src="logo.svg" width="250" height="75" />

CSS:

1
2
3
4
5
6
7
8
9
10
11
.image {

background-image: url(example.svg);

background-size: 250px 75px;

height: 75px;

width: 250px;

}

Using Retina-Ready Images with WordPress

WordPress is one of the most popular content management systems available. When it comes to displaying retina images on a WordPress site, the options available remain the same as if you were developing a static site without a CMS. You could choose to use media queries, JavaScript, @font-face and .svg, or a combination.

There are also plugins available which claim to make it easier to display retina images when using WordPress. I personally believe it is best practice to use the least amount of plugins possible, and to use plain ol’ code instead whenever possible. With that said, the way I implemented retina graphics on my personal site, which uses WordPress, was with retina.js.

In the functions.php file of your WordPress theme, add the following code to enqueue the retina.js script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 * add the retina.js file to all pages

*/

function zk_retina_ness()

{

wp_register_script( 'retina', get_template_directory_uri() . '/javascripts/retina.js');

wp_enqueue_script( 'retina' );

}

add_action('wp_enqueue_scripts', 'zk_retina_ness');

CSS 4 Specification – image-set () function

In webkit-based browsers, image-set () is already supported. Given time, hopefully more browsers will support it.

1
2
3
4
5
body {

background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

}

Compressive Images

Last year, Daan Jobsis wrote about using image scaling to display high res graphics. By using this method, you can benefit from using just one image, and simply rely on the browser to handle the downscaling. Another benefit is actually a reduced filesize thanks to the use of JPEG compression. Because the starting point is a larger file, even with an increased compression, the difference in quality is still noticeable on retina displays.

Summary

In this article, I have explored the different methods which can be used to display retina images on a web page. As of yet, the market share of laptops with high resolution displays is small, in particular the MacBook Pro with Retina Display. However, with time this should increase, and retina-ready websites will become more relevant. It’s important that web designers recognize this fact and learn the various methods of using retina-ready images. It’s also an interesting area because it is constantly evolving as new browsers are released, new standards are released, and as hardware is repeatedly improved each year. While we wait for a standard that helps us solve this problem better, the easiest solution that works across multiple browsers/devices is by using the Retina.js script, and also using media queries to target pixel ratio to provide retina-ready background images.

If you have a method not covered in this article, please feel free to comment below.

  • http://mauryaratan.me/ Ram Ratan Maurya

    That was a great post Joshua. I totally hate retina.js as it always leaves the 404 in the console when there is no @2x images. My personal favorite is icon fonts, no glitches. Cheers!

  • http://twitter.com/weavermedia Dan Weaver

    Nice post. I was hoping for some more details about using the .svg format – are there any downsides to it? Stubborn browser incompatibilities? SVG seems an ideal format for logos too. As someone who can handle Illustrator/Sketch/iDraw pretty well I’d love to see it become more popular.

    • http://jamessann.com/ James S

      Check out David Bushell’s recent blog post on SVG. It might prove helpful :) http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

      • http://twitter.com/weavermedia Dan Weaver

        Thanks James, that answered a lot of my questions about modern use of SVG. Unfortunately Googling for the information returned floods of aged articles with out of date techniques.

        With the surge of RWD I think SVG may become a much handier format than it previously was.

        • http://jamessann.com/ James S

          Absolutely. I implemented SVG for my site logo but haven’t got around to IE8 & lower fallbacks yet…

          • Lars

            use modernizr:

            if (!Modernizr.svg) {

            $(“img”).attr(“src”, function (idx, attr) {

            return attr.replace(/.svg$/, “.png”);

            });

            }

  • http://www.totorotimes.com/ Jordy Meow • Totoro Times

    It’s a hassle to generate all the images for Retina with WordPress. I developed the WP Retina 2x plugin for that purpose, please check it out :)

    • Rudd

      I came across your plugin few weeks ago but never had a time to give it a try. I think I should try your plugin first :-)

      • http://www.totorotimes.com/ Jordy Meow • Totoro Times

        You will not regret it :) And don’t hesitate if you have any issue!

  • Dalton

    I’ve been testing out the Adaptive Images method, seems to work well: http://adaptive-images.com/

  • Pingback: Fuzz Weekly Wrap Up #2 | Fuzz Productions

  • Pingback: Development

  • http://www.mathewporter.co.uk/ Matt Porter

    The CSS4 solution is again another step in the right direction, it seems that specs that wont be final releases for a few years aren’t able to keep up with the rate of tech hardware development and release.

  • http://www.e-foreknowledge.co.uk/ e-foreknowledge

    Thanks for giving me a solution on retina, can’t wait to try it for my website… Thanks..