Retina Display: What is it? How do I get it?

What is it?

Retina display refers to higher resolution rendering on mobile screens, particularly iPhones. Your phone screen, your laptop or desktop monitor and your TV all show images by lighting up tiny dots (called pixels) that are differnt colors - like an Impressionist painting. How clear or sharp the image appears to our eyes depends on how many dots there are per square inch.

• Device pixel is the smallest physical unit displayed.
• Pixel density is the number of pixels displayed in a given space.
• Resolution is the number of pixels across the entire width or height of a device.
• Pixels per inch, ppi or dpi, is the amount of pixels you get when you divide the physical width of the display by the number of horizontal pixels displayed.
• High DPI is a display density of 200 pixels per inch or greater.

Standard images for the web are generated at 72dpi.  On a newer smartphone, these may look fuzzy. This is becasue the phone's browser sees the low-res image and blows it up to make it fit the screen.  Images cna be scaled down with good results, but blowing them up always results in poor quality.

How do I get it?

Use text and CSS

Use text and styles (CSS) to create buttons, menus and other style elements.  Fonts are scaled by your phone's browser so they don't lose definition.

Images

All your images need to be available in regular size and double size.  If you want to future-proof, you might also make them available in triple or quadruple size.

Script on your website then serves up the correct image based on the resolution.