Retina Display
The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.
If you want to get perfect looking images on Retina screens, for example you build a website where you upload regular images into content, you must always upload 2 images in media.
Add new section which looks like below:
my_image.png - this is the name for standard image (e.g. 100px X 100px) my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)
Note To make your website completely retina ready, you have to download ratina.js and include retina.js in your HTML head section. See example below:
<!-- retina --> <script type="text/javascript" src="js/retina.js"></script>
For more information about retina documentation and to download retina.js Click here.