Making Drupal Websites "Retina Ready"

Dec 2, 2013 · by Suzanne Kennedy Dergacheva

If you've used a Retina screen to browse the web or develop a website, you might have noticed that some images look a little fuzzy. Retina devices require images that have twice the number of pixels to appear normally on the screen. This is a bit of a pain for front-end developers. It means that if you want to display a 100x100 image on a website, you also need a 200x200 version of that image retina devices, and then you need to scale it down to size when it's displayed.

When you're making a Drupal website, there are a couple different techniques for this, depending on the type of image.

Images as Content

Your Drupal website is probably already using a bunch of image styles to resize images that are included as content (fields or embedded in HTML). For most image styles, you can fix the sizing issue using a module called Retina Images. This adds a 'retinify' checkbox to each image effect. You just need to select this checkbox and also choose 'allow upscaling' for each image effect. For Retina devices, the module will load an image that is twice as large, but scale it down using the HTML width attribute.

Using Drupal image styles to create Retina images
The only place where this seems to break down is if you're using the Imagecache Actions module to add more image style effects. These effects don't have the setting you need to do retinify the image, so you have to adjust your image sizes to double what they should be, and then fix the displayed size in your CSS. This isn't an ideal solution, because you get larger images that are loaded unnecessarily for non-retina devices. But if your use of imagecache actions is limited or you're not using the module at all, you should be good to go.

Make sure you check all the image styles being used in the site, including those for profile images.

Background Images

For background images, there's a bit more work to do in your theme. The technique is to use media queries to load bigger background images on retina devices. Then you can fix the displayed size using the 'background-size' property.

#main-menu li a {
  background-image: url(../images/image.png);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 
  #main-menu li a {
    background-image: url(../images/image-v2.png);
    background-size: auto 250px;
  }
}

In this case, the background-size property scales the background image so that it is only 250px tall, with the width being resized automatically. This is appropriate for horizontal sprites, for example if this menu item was the first of several to use the same background image starting at different positions.

This technique requires saving two versions of each of your background images (e.g. image.png and image-v2.png which is twice as big), and adding additional sections to your CSS files. If you're using sprites for your images where possible, this shouldn't be to much additional overhead. This is another good reason to simplify your designs and do more with CSS3 and less with background images.

Other Images

There might be some other cases where you have images being added to your Drupal site that don't fall into these categories. For example, images that are part of your theme like the logo. It's important to review your site using a tool like browserstack.com, so that you can test how images will appear on retina and non-retina devices.

Suzanne Kennedy Dergacheva

About the author, Suzanne Dergacheva

As co-founder and front-end lead at Evolving Web, Suzanne is responsible for defining and implementing both the information architecture and the visual elements of websites and web applications. She manages the creation of Drupal sites from module selection and configuration to integration and custom development.

More Articles by Suzanne Dergacheva »

Featured Articles