Retina Display Resolution Design: Tips & Tricks

With the advent of hi-res smartphones and the retina iMac, it’s becoming apparent that web & mobile designers need to consider retina displays in their design process. More devices are coming off the shelf with a retina display resolution which groups multiple pixels into the same physical screen space.

This means content will look sharper if designed properly. So how should a UI designer be working to handle retina screens? What current technology is available and what’s the best way to handle the largest userbase?

I’d like to cover the most reliable methods for handling retina/hi-DPI screens and creating interfaces that just work. If you follow along with this guide you’ll be sure to walk away with applicable tips and practical solutions to the retina display conundrum.

Handling Retina Devices

The first step is to check screen displays based on hi-DPI resolutions. Now that some devices have @3x sizes you’ll want to check a number of screen resolutions before displaying images. You can always be safe with @3x images, but they’re also much larger and require more bandwidth to download.

This check can be done with srcset but there are many different methods using JavaScript too. Check out this tutorial for more info.

One nice trick for retina-ready icons is to use a free iconfont instead of bitmap images. Font Awesome is a very popular choice that’s completely free, open source, and provides a library of icons to choose from.

Another choice is to use SVG images instead of bitmaps. These SVGs are fully scalable vectors that have slowly gained full browser support.

The only difficulty is designing SVGs from scratch and learning to export them properly, which can be more convoluted than just using PNGs or JPEGs. Plus SVG is not useful for detailed images like photographs since it’s really a vector filetype.

But SVGs have more room for custom animation which displays crisply at all resolutions.

The goal is to decide file types and browser checks on a case-by-case basis. Some images are better as JPGs and some websites are better with CSS vs JS retina checks. I personally prefer CSS, but I recommend trying both to see what you prefer.

CSS Background Images

The simplest way to handle custom backgrounds is with retina background images using the background size property.

This is often the quickest way to check retina images because they can work on all devices, even non-retina devices. It doesn’t hurt to have an over-optimized image in CSS if you don’t mind the extended load times.

The alternative method would be to load different CSS files based on JavaScript checks or backend server checks.

But perhaps the best way to handle CSS is with a CSS retina media query. These queries check pixel density and load different background images for those devices(also adjusting the background size).

CSS is generally the simplest way to handle images, but can’t be used for in-post images. These are much trickier and should either be uploaded at the highest resolution possible or updated with JavaScript.

If you’re not as concerned with load times then just go with the largest resolution for all your images. If not then you’ll want to upload @2x and @3x images manually with a free JavaScript library such as Retina.js.

JavaScript Checks

If you want the most control over retina resolution content then you’ll need JavaScript. Most visitors run JS code and it’s the easiest way to detect resolutions with built-in JavaScript methods.

You’ll find lots of free tutorials for detecting JavaScript retina displays, but this is only half the battle. Once you know the screen resolution you’ll then need to update the images accordingly.

I recommend using a pre-built solution to save time and headaches during the process.

Developers never want to reinvent the wheel. So if someone else already solved this problem why should you bother starting from scratch?

The only reason to roll your own solution is if you need custom functionality. In that case check out the links below to see how you can implement a custom JS retina check.

Otherwise, keep scrolling and grab one of the free JS libraries I’ve listed in the next section.

Open Source Retina Tools

There are dozens of custom retina tools for detecting and managing retina images. These are not always the easiest to implement, but they can make your audience a lot happier in the long run.

So which should you choose to get started? There really is no wrong answer.

I’d like to provide some of the most popular tools and give you the chance to pick whatever works best for your site.

Retina.js

The Retina.js library is a free open source JavaScript codebase that auto-detects retina resolutions and screen sizes. The script also checks if there’s an existing high-resolution image following apple’s design guidelines, and if so it’ll switch to display the hi-res version.

Naming conventions follow a suffix of @2x before the filetype. So if you have my_image.jpg you’ll also want to have my_image@2x.jpg in the same folder.

This is one of the simplest scripts because it really is just plug and play. But it also requires some knowledge of retina content to get it working perfectly. If you’re just getting started this is really a great script and you can’t go wrong with the default functionality.

jQuery Retina

Another option is jQuery Retina powered by the jQuery library. This works a little differently because it runs on HTML5 data attributes.

You simply pass an image URL value to the data-retina attribute in every image tag that requires a retina image alternative. It does require more hard coding but it’s also the easiest to roll back with custom options. The GitHub page has more info with basic steps for installation.

WP Retina 2x

If you’re a WordPress user then WP Retina 2x might be a great alternative to adding a JS plugin from GitHub. The WP Retina plugin works directly with WordPress to check for retina-sized images and replaces them automatically.

It’s another plug-and-play solution where you just activate the plugin and let it run. Super easy to use and definitely a clean solution for non-technical WP users.

Dense.js

What I like most about the Dense.js library is the support for varying device ratios. Not all retina displays are simply 2x the size. Other ratios can include 1.5x or 3x.

This plugin auto-detects which screen density is being used and adjusts your images accordingly. There are lots of options so customization is no problem. Check out GitHub to get started and the online docs for more information.

If you’re looking for more retina display resources I also recommend these plugins.

Hopefully, this material offers more than enough to help you handle images and media on retina displays. Since CSS will auto-scale for all resolutions you really don’t need to worry about things like margins or page widths.

But on-page media like icons and photos will need to be custom-designed for retina devices.

These resources will provide everything you need to launch a brand new site and get it looking sharp at all device resolutions.