Retina Display Resolution Design: Tips & Tricks For UI Designers

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.

13" and 15" Macbook Resolutions

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.

font awesome icons homepage

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

caniuse svg check

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 crisp at all resolutions.

The goal is to decide filetypes 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.

macbook air javascript code

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

retinajs open source javascript

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

jquery js retina plugin

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

wp wordpress retina @2x plugin

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

densejs plugin jquery

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 the 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.

If you’re looking for similar UI design tips take a peek at these related articles.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.