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 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 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. If for example you build 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 You need to include retina.js to make your website completely retina ready. 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.