The phrase “Retina display” is used by Apple Inc. for their sharper displays. The word “Retina” is used here as a marketing term. However, today it has become somewhat a standard factor for better displays. If we call it a standard, a “Retina quality” display should have about 300 pixels (or more) per inch (PPI) for a device held 10-12 inches from the user’s eyes . 

A sharper display is not important for just watching movies, but it has many more things to offer. Web browsing experience is also affected significantly by the device screen. All web contents are not optimized for these densely pixilated displays. Lower resolution images may look blurred on a Retina screen. Even some fonts may face trouble. In this article, we will use the word "Retina" as a generic term for 300 (or more) PPI screens. 

A display with above 300 PPI presents sharper graphics. Here is a comparison between a normal screen and a Retina screen. (credit: Apple)

Since a  Retina quality screen can depict more details, so you get freedom while designing your template. It can have smoother transitions, clearer edges and natural-looking elements. 

Better images mean higher file sizes. So, for devices with normal displays, you may offer comparatively lower resolution graphics without increasing site load time. ‘Retina ready’ templates come with options for both Retina and non-Retina displays. These titles contain a mechanism to upload two different versions for every single image- one is a lighter one for normal displays and another one has higher resolution. When the system detects a screen with 300 or more PPI (I mean Retina level), the site delivers the higher resolution images and the opposite thing happens in case of lower PPI displays. 


How to Add Retina Display Support?

There are several ways to make a template Retina-ready. I found the Retina.js method the easiest. Retina.js is an open source JavaScript plugin that can serve high-resolution images to devices with Retina displays. The user will be required to upload the "Retina" and "Non-Retina" size images to the site server. Then this script will detect and serve the appropriate image to the appropriate device. Download the plugin here and implement it according to its official guidelines. 


The world is moving toward sharper, clearer screens. Computers, smartphones, tablets and even smart watches are getting Retina level screens. If you ignore Retina-specific support in your template, that will leave the huge number of Retina-type display device users in a foggy world. So don’t forget to provide your customer this awesome feature with your template!