Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Making Drupal Websites "Retina Ready"

Parent Feed: 

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.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web