Designing for Retina Display

Today, we are commonly seeing the phrase retina display on every type of mobile device, tablet, or computer. What is retina display? Retina display is a high definition display. In technically terms, it means that there are more pixels in a space, creating a higher display quality. Essentially, you should not be able to see a pixel to the naked eye with retina display.

We first started to see retina displays in 2011, when the iPhone 4 came out. It has continuously evolved from being an upgrade to now being an industry standard. But what does this mean for designers? Designers now must take retina display into consideration in all their work because if they don’t, their graphic work will display blurry on such screens.

How can a designer optimize their graphic designs for retina displays?

  1. Raster Images

A raster image is a rendering of each pixel directly corresponds with a hue, saturation, brightness, opacity and position within the image. The most common raster file types are JPG, PNG, and GIF. As a designer, keep in mind that the images are dependent on resolution. That means that they cannot scale up. This affects retina displays and therefore, these images would need to be scaled down.

In a standard resolution display, a raster image’s 1 bitmap pixel is equal to 1 device pixel. Conversely, in a Retina Display, a raster image’s 1 bitmap pixel is equal to 4 device pixels. Retina display multiplies the 1 bitmap pixel by 4 to accommodate that change.

  1. Utilize HTML & CSS, JavaScript, or Media Queries

To accommodate raster images for retina display, you can utilize code. You can take three different approaches: use HTML & CSS, JavaScript, or Media Queries.


If you decide to utilize HTML and CSS, you would need to declare the images size half of what it is. For example, if the image is supposed to be 200px by 400px, you should have an image that is 400px by 800px. That way, you can use HTML to target that image and control the size. You can also use the same theory by using CSS.


 With the help of jQuery (a JavaScript library), you can target specific images with their widths and their heights.

Media Queries

 Another way to use images that are specific to retina display is to utilize media queries. A media query can determine the size of the screen and essentially tell if the screen is in fact, a retina display. You can write a media query to display an image in standard definition or in retina display.

  1. Use scalable vector graphics

SVG’s are the optimal use for retina display because they can be scaled up or down and still maintain the integrity of the image at its full capacity. Since vectors are constructed through lines, points, shapes, and curves, they can be scaled without any distortion and can adapt to any pixel density on a screen.

As you can see, retina display is here to stay. Since these displays are becoming more of the norm, designers will need to start implementing more of these types of techniques to optimize their graphic images on these types of screens. While not all images can be turned into SVG’s, this is still the ideal and most simple way to account for retina displays.