In the last few years, Apple have been pushing the industry to higher resolution screens, which they’ve called Retina, and defined (loosely) as “pixels too small to see”, at least at a typical viewing distance. Many others are catching up, though, so what does it mean for you? Read on to find out.
In very simple terms, resolution is usually measured in PPI or DPI (pixels or dots per inch) and defines how tightly the pixels that make up an image are packed. While most designers have had “300 DPI for print” drummed into their heads early on, it’s a little fuzzier than that.
Because the offset printing process isn’t actually printing in a predictable square grid like a computer display, an image output at anything above 250 DPI is probably OK.
Not as much as most people think. The only time it matters is if you place an image into InDesign (or other layout package) and don’t resize the image at all. Making an image smaller on the page increases the effective resolution, and making it larger decreases it. At the end of the day, it’s all about how many real pixels you’re trying to cram into a certain amount of space.
In the days of the original Mac, that screen was 72 DPI, as were many that followed it. That rough rule has stuck fast, with many claiming that “screen resolution is 72 DPI”. But the web has never cared about resolution settings, only about the number of pixels in an image. And screens aren’t even 72 DPI any more!
These days, a regular PC display might be 80-90 DPI, a high-res 15” laptop even more. A Mac’s Retina display could be 250 DPI; an iPhone, iPad or modern Android device may well be over 300 DPI. The displays are still quite small, however, so providing a double-sized image for higher-resolution screens is usually all that’s needed to make a website look good on all modern devices. (For a quick fix, you can just double the image’s width and height, but keep the original HTML sizes. More comprehensive solutions are also available.)
For text, using webfonts is a great idea. They work everywhere, text written with them is accessible, and because fonts are vector-based, your titles (and even icons if you use a custom dingbat font) will be drawn at the resolution of the output device. I’ve written about that here: Using Webfonts For Terrific Type Online.
We’re quite close to our computer displays and can see the detail in photos and videos quite clearly. But TVs are seen at a distance, and unless you sit close to a large TV, most of us are pushed to tell the difference between full HD and 4K images. That doesn’t stop me wanting a 4K image—the detail is all there on my Retina 5K iMac—but there’s more to an image than just resolution. Most of the time, I’ll happily take a high-quality HD picture over an average-looking compressed 4K image.
Even if 4K doesn’t take off in the way TV manufacturers would like, detail in an image is still valuable. For video production, even at HD, it lets you stabilize unruly footage without quality loss. For stills, it lets you see every pixel in your images, often more clearly than you’ll ever see them in print. For displays that you sit close to, it’s amazing: beautiful text and richly detailed stills.
So, then: if you’re a designer who doesn’t use a Retina display yet, you need to get your hands on one. Once you’ve tried it, you won’t go back, and you won’t want to use websites that aren’t Retina-ready either. As we move into a Retina-only world, you owe it to your eyes (and your clients!) to get across the new way to work—with more pixels than ever before. Enjoy!