All in the eye of the beholder

To fully appreciate why Retina displays are so eye-catching, one needs a basic understanding of how an image is drawn on your screen. Let’s break it down.

Your display is actually made up of thousands of dots (pixels). Every pixel sets its own color and brightness, while the imperceptible distance between these tiny dots takes care of tricking your eye into perceiving those dots as one contiguous image.

Retina displays (a marketing term coined by Apple) take the current technology a step further by substantially increasing the pixel density.

By putting more smaller pixels in the same amount of physical space on the screen, we can increase the image’s fidelity to the point that when the screen is viewed at its “typical viewing distance,” the human eye will be unable to notice any pixelation.

Of course, this typical viewing distance will vary based on the type of device.

For example, a mobile phone is usually viewed at 10 inches, so Apple’s iPhone 5 has 326 pixels per inch, whereas an iPad is viewed slightly farther away at 15 inches. Because of this distance, the iPad 3 and 4 have 162 fewer pixels per inch (despite having larger screens).

Along the same line, the new 15” Retina display MacBook Pro is typically used at a distance of 20 inches, so it sports an even lower PPI even though it has a higher surface area and higher resolution (2880×1800).

Retina displays aren’t only better in terms of pixels, though. According to Dr. Raymond Soneira, president of display calibration experts, DisplayMate Technologies, the iPad Retina screen is, “a virtually perfect 99% of the Standard Color Gamut… [colors] are more vibrant, but not excessively so.”

However, Apple isn’t the only company pushing the pixel limits. Amazon’s Kindle Fire HD clocks in at a respectable 254 PPI while Samsung and Google’s iPad competitor, the Nexus 10 tablet, packs a stunning 300 pixels into every inch.

Why Retina is a win for retailers

One of the first things many clothing retailers do before opening their morning doors is check every light bulb. The reason is simple: if you don’t display a product in the best way possible, it isn’t going to sell–no matter how great the item may be.

Online retailers generally understand this principle and embrace it by having large photos with good lighting.

While large images are certainly preferable to smaller ones, there’s a new dimension to think about: quality. This is especially important for apparel retailers whose products are often valued by their details.

This is where high density images come into play. Retina images are lifelike and free of any visual fuzziness or jagged edges. The more eye-popping products appear, the more mouth-watering they become.

Strategies for dealing with Retina images

While Retina displays may seem like a great win for retailers (and they mostly are), supporting them is not an easy proposition.

Mixing low and high res images is a big no-no, so you’ll need to maintain two sets of every image (one high-res, another low-res) on your page, from your logo to your banners and beyond.

You’ll also need to develop your store in a way that checks to see what type of device your shopper is using to view your site, and then add the code that serves them the proper image type. There are two proposals (image-set and picture element) vying to solve this issue, but neither one of them has been adopted to date.

A few techniques can help ease the transition. Here are their pros and cons:

Retina.js – Pro: Automatically replaces low-res images with a high-res version when a supported device is detected. Con: You’ll still need to manage two sets of images and some serious tradeoffs in page loading speed.

CSS Media Queries – Pro: No speed tradeoff because each device only downloads the image version it can support. Con: You’ll need to write large chunks of your CSS twice so this can become tedious to implement and maintain.

Scalable Vector Graphics – Pro: One image for all devices. Con: Only really suitable for icons, logos and simple line drawings.

The very talented Thomas Fuchs has also created a handy flowchart to describe various Retina options based on their filetype.

The easy answer

Alternatively, you could install ShopPad and not give this problem another thought.

We sniff out details about the device, along with the orientation and connection speed, and then deliver image resolutions accordingly to maximize performance. It’s not just for product images, though. Our entire interface for all graphics are based on what the device can handle so customers seamlessly browse your store while seeing your product images in all their glory.