Display Resolutions – One Size No Longer Fits All

By Travis McAfee in Design on September 15th, 2015

The good news? Screen resolutions are improving. The not-so-good news? Content is now fuzzy and pixelated, because marketers are using one image size regardless of the device.

Display Resolutions – One Size No Longer Fits All

EXPENSIVE DEVICE + HD SCREEN = BLURRY IMAGE?

While most technologies have evolved at exponential rates like Moore's Law predicted (twice as much tech in the same space), digital displays have been relatively stagnant in their progression. This allowed digital content creators to size assets to a standard. Screen sizes changed, yet only recently have their resolutions begun to improve. The result? Digital content that looks fuzzy and pixelated because it's using one image size regardless of the device. This can cause frustration for the user or, even worse, distrust.

CONNECT THE DOTS

Dust off that art history textbook from your freshman year and turn to the 1880s. That’s when Georges Seurat and Paul Signac began developing a painting technique called Pointillism. Meticulously crafted, their paintings comprised small dots of pure color that, from a distance, appeared to merge into a single, clear image. This same idea is used in the screen you’re reading this on right now. Small pixels emit light to create everything we see on our devices. When it comes to web and mobile design,  you want to make sure everything not only looks good but looks good on every device.

CREATE MULTIPLE IMAGE SIZES

For years, the standard web-ready asset was scaled to a specific size at 72ppi (1X) resolution, but the problem now is proximity. Displays moved closer with mobile, and those dots (pixels) became distinguishable. Pixels needed to get smaller and closer and 2X resolution began to show up, most notably in 2010’s Apple iPhone 4 with Retina. The Retina display has 4 pixels packed into the same area as 1 standard pixel giving the user clearer, sharper images on these small devices.

Display Resolution 1x 2x

These higher quality displays stretch the standard image, which creates pixelation and fuzziness. The solution, in most cases, is to create standard 1X files along with a file at twice the standard size (2X), displaying the correct version based on the user’s display. Bigger images can mean larger file sizes, which may slow load times, although there are ways to optimize files to make them very light.

1X DISPLAY CONTENT? NEXT.

The expansion has now moved beyond mobile. Major manufacturers like Dell, Lenovo, Apple, Samsung and Asus have begun offering 2X displays in their laptops along with a few desktops. For those building responsively, this means 2X assets for desktop are beginning to be just as much a priority as their mobile counterparts.

ARE YOU READY FOR 3X DISPLAY?

Keep in mind, the progression does not appear to be stabilizing at 1X and 2X. Already, we’re seeing 3X and better in the iPhone 6 Plus and Samsung’s latest, the Galaxy S6. These screens pack an incredible 9 pixels into the same space as a single 1X pixel. Accommodating 3X resolution may not yet be a priority due to its rather small market share, but the technology is moving forward.

Display resolution 3x

CONTENT MARKETING NEXT STEPS

So what does this mean for content creators? It means that building digital content with high resolution-ready images is important to ensure your brand’s content stays crisp and clean across the growing variety of displays. Having an infrastructure that’s focused on higher resolutions as they become available will allow for easier integration in the future and a better experience for the user. And remember,  images aren’t just important for design but also SEO  optimization (not to mention social media as it can help heighten engagement). It’s just a matter of applying the discipline of detail across every channel.

Ready to optimize your digital content with high resolution images that translate across all channels and devices?

Talk to our experts today!