Designing for High-Density Retina Displays

Designing for High-Density Retina Displays

Originally introduced via the third generation MacBook Pro in late 2012, “Retina” is the brand name of Apple Computers for their high-density displays. This technology has since been integrated in later models of the iPhone, iPad, iMac, as well as by other manufacturers.

In its simplest form, Retina or other high-density displays typically have at least double (or in some instances quadruple) the amount of pixels per square inch as their equivalent screen sizes on non-retina displays. For example, a 15″ third-generation MacBook Pro has a screen resolution of 2,880×1,800 pixels, or 220 pixels per square inch. The standard resolution for a non-retina 15″ MacBook Pro would be 1,440×900 pixels (120 pixels per inch).

As the resolution is at least double on Retina or Retina-like displays, bitmapped images can appear pixelated or grainy, without the missing data to fill in the extra space. So for example, a standard-resolution 500 x 300px image would take up the space of 1000 x 600px on a Retina display, but with only half of the information.

To mitigate any resolution degradation for users on Retina displays, here are a few suggestions:

Scalable Vector Graphics and CSS3

As the name applies, Scalable Vector Graphics or SVGs can be re-sized to any dimension and not lose any resolution. This is because they are comprised of vectors (lines made up of points on an x- and y-axes) instead of actual pixels.

SVG files work great for diagrams, logos or illustrated graphics, but not so well for photographs. Keep in mind that SVG is not supported by IE8 or earlier, but Google’s svgweb shim extends support to early Internet Explorer browsers.

When SVGs aren’t practical or desired, some graphics or effects could be replaced by CSS3 alone. Shapes, color gradients, box shadows and other graphic components can be written in CSS, resulting in a high quality rendering, using less bandwidth and less HTTP requests.

Webfont Icons

Another good technique is to use webfont icons whenever possible. Similar to SVG files, font faces are vector-based as well, meaning they scale perfectly well across any device. You can apply them creatively in a variety of ways, but they are most useful for application icons or controls, button indicators, and notifications:

Some of the most popular icon libraries include:

Hi-Res Images When Possible

Given the significant increase in pixel-density on Retina displays, you’re going to need to use high-resolution images to render well on the high-density screen. If an image displays at 300 x 500 px on a standard display, you’re going to need an image of at least 600 x 1000 px for a Retina display, and use image replacement techniques (such as via media queries) to detect when to use the larger image.

However, just because the dimensions of a high-resolution image are 2- or 4-times larger than its standard equivalent, this doesn’t mean that its file size will be equally increased. Each image file is unique, but if there are large amounts of solid color, it is likely that the hi-res image will not increase as dramatically in file size.

Take a look at your image file sizes for both the standard and hi-res versions: If the regular image is 150kb, but the high-resolution is only 200kb, it may make more sense just using the single hi-res file, instead of having to host both files and use image replacement.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC