When Apple introduced a new generation of super-clear, crisp displays (a.k.a. monitors or screens) known the world over now as Retina displays, it is likely that the first reaction many people had was “WOW, that’s an incredible screen!"
In that vein, it is fair to guess that a popular second thought may have been “how did they make it so much crisper?” or something along that line of thinking.
Since one of the leading features of the latest update to Sandvox is Retina optimization, we thought you might appreciate a little introduction to the magic behind Retina displays and graphics AND how it impacts website authors.
“Retina” is a term coined by Apple that is now used to describe Apple display products with high enough pixel density that the human eye is unable to distinguish individual pixels at a certain viewing distance. On Retina displays, images are sharper and text appears crisper. It’s like seeing a high-end magazine come to life. Remember your reaction when you first saw HDTV? It’s a bit like that with Retina displays.
“Regular” vs. Retina
What’s the magic behind Retina displays? If you looked closely at a regular display, you could relatively easily make out some individual pixels. A Retina display is packed with pixels at twice the density of regular displays, making individual pixels indiscernible from a normal viewing distance. You’d have to stick your nose to the screen to have a chance of seeing one at that density! Let’s take the Sandvox logo as an example:
For every pixel in a standard (or “regular”) resolution display, there are four in a Retina display. That increase in pixel density effectively removes any jaggedness and makes for a superior viewing experience.
A Retina-optimized Sandvox Website
As more and more Retina devices enter the marketplace, the number of people who could have a poor viewing experience visiting a non-Retina-optimized website increases.
It is important to keep in mind that due to the way they work, there isn’t a way for web browsers to improve the presentation of low-resolution images.
Here’s a quick refresher on what “resolution” means in this context. It’s usually defined as the number of pixels per inch that make up an image. Traditionally that’s been 72 pixels per inch, meaning that a 72 pixel by 72 pixel image would be about an inch in size on your screen.
Say, for example, you have a 206 x 168 pixel image on your home page. On a regular resolution display, that image would appear just as you would expect.
On a Retina display, however, it is very likely that the same image would appear fuzzy (pixilated or rough) in comparison to other elements on the page, such as text, that are clear and sharp.
Because text and other elements on the screen can be automatically adjusted for Retina displays, non-Retina-optimized images on a website are likely to stand out (poorly!) in an even more pronounced way. That’s probably not the way you want to present your work to your audience, OR the type of experience you want to offer visitors.
Optimizing your website for Retina displays sends a message to your visitors that your site is well-maintained, and up-to-date — which can, in turn, reinforce your credibility as its author.
Now, with its version 2.8 update, Sandvox has a pretty straightforward way of handling Retina optimization that doesn't take much effort or know-how on your part. Better yet, you don’t even need to have a Retina display to do it! Read the next article to for a step-by-step guide to optimizing a Sandvox website for Retina displays.