Shopify Expert Insights

E-Com Advice from our experienced in-house team

What is retina?
Retina is Apple's trademark for a display so sharp that the human eye is unable to distinguish between pixels at a typical viewing distance. As Steve Jobs said: "It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels."

Why does retina matter?
Because website graphics not prepared for retina will look fuzzy. They don't just look a little fuzzy, they look downright crappy (and I don't even have 20/20 vision.)

The technology to make the "retina" effect possible requires previously unheard of displays resolutions. For example, the new iPad has a display density that's more than twice as sharp as 21.5" "Full HD" monitor. Even a Blu-Ray movie is not high-enough resolution to take up the full width of a new iPad display. It would have to be stretched or "pixel-doubled." This processing is what results in fuzzy graphics.  

How do we support it?
Fortunately there's hope. By moving away from photographic images, and using vector graphics instead, we can make websites which render on and scale to whatever device you have. Fonts, SVG, and CSS3 effects are all valid solutions. (This should be best practice anyway as it creates far more flexible sites.) 

In some cases photographs must still be used and that's okay. The solution then is to sacrifice page speed and load double size images. To maintain small file sizes, this should be done sparingly.

Further Reading: