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. 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.

Suggest Edit