How to optimize your website for high-DPI and Retina devices

These days, a responsive website is unquestionably essential because a large portion of web traffic comes from mobile devices. However, there’s another step you need to take to ensure your website is optimized for all devices. In this article, we’ll examine how high-DPI or “Retina” devices require special attention and how to ensure your website is optimized for every viewport size and screen resolution.

What’s the difference between screen resolution and viewport size?

In the early days of website design, two considerations affected the design of your website: the browser a user chooses to view your website and the resolution of the user’s computer monitor. Because standard were not finalized between browsers, some code would work in some browsers and not others, so it was common to perform a browser check and load separate code depending on the browser of choice. The latter was perhaps even more important — a small computer monitor might only show a small amount of information at once, and a large monitor might display information in a small space with lots of extra space around it.

Today, browser standards are mostly unified and a well-crafted WordPress theme should load identically on all browsers, but monitor sizes still vary and are even more important. With an uptick of mobile devices and tablets but laptop and desktop computers also featuring a variety of sizes, responsive design is essential. Grid layouts present a good solution, as they play nicely on devices of differing sizes.

The way we think about screen resolution changed in 2010, however, when Steve Jobs presented the iPhone 4. He introduced what he called the “Retina Display,” with a pixel density of 326 pixels per inch. The screen was the same size of prior iPhones with twice the vertical and horizontal resolution, increasing from 480×320 to 960×640. This new display, revolutionary at the time, also posed a new way to think about screen resolution because of a technique called “pixel doubling.” Since the display was the same physical size as prior iPhones, it wouldn’t make sense to increase the amount of information viewed on the screen at once time, as it would become tiny and illegible. Instead, the term viewport eventually came into being to describe the size of a user’s visible area of a web page. So, for example, the iPhone 4 has the same viewport size as prior iPhones, even though the resolution increased.

Retina and high-DPI devices became commonplace in subsequent years in a variety of devices. 4K computer monitors typically employ a viewport size identical to 1080p monitors with pixel doubling. Apple mobile devices and Androids alike employ pixel-doubling, or even tripling, in their displays. As a result, web images need to account for viewport size as well as resolution.

Optimizing WordPress sites for high-DPI and Retina devices

To think of high-DPI devices in less technical terms, think of a 1080p computer monitor displaying an image at 600×600 resolution. If you view the image on a 4K computer monitor, it will take up the same amount of space on the screen, the the computer monitor will have four times as many pixels packed into the same area (twice the width and twice the height). Thus, the 4K monitor could display the same image at 1200×1200 in the same space. If you display a 600×600 image in that space, it will look slightly blurrier, as it would on a 1080p monitor. The clarity the extra pixel density provides is lost.

So how do you take advantage of pixel-dense displays with WordPress? When you upload an image to WordPress, you are also able to select the size it displays. This size refers to the viewport size, not the resolution, so upload files at twice the resolution in which they are displayed.

If this sounds confusing, an example will hopefully simplify the concept. We use 600×600 images at the top of our WordPress tips. However, we upload them at 1200×1200 and then specify a (viewport) size of 600×600. This way, they’ll display at full resolution on Retina displays.

To do the same on your website, consider the size you use for your images, and double the height and width in the images you upload. If you want to be really aggressive in supporting high-DPI devices, you could even triple or quadruple the resolution, but also consider that increasing the image size also increases the time it takes the images to load, and image size can be a major factor in slow page loading. We consider pixel-doubling to be a sufficient balance of image clarity and page speed, but you might draw a different conclusion for your site, depending on the number and size of the images you use.