Quickly –
If you want to make your site retina ready, enable the Retina Ready setting, that’s under “Advanced” tab of iMedica options panel.
Further, create 2 versions of all possible images.
Normal image – image.png
Double sized image – [email protected]
Upload them through WordPress Media Gallery. Make sure they both are in the same folder as WordPress arranges media based on month it was uploaded.
And finally, use the normal image in your content and don’t bother at all about double sized image. It will be picked up automatically if Retina device is detected.
If you would like to understand bits and bolts –
First of all, let’s begin with what does Retina Ready mean?
Apple’s latest screens (like iPhone, iPad, etc) show more pixels per square inch, resulting in sharper view. However, the normal images might look dull on these devices. In order to showcase sharper images on these screens, it is necessary to use images in higher resolution.
For example – let’s assume, you have used an image of 100 X 100 pixels for your area of 100 X 100 on your website. This would look nice on most of the devices, however, Apple’s retina devices have more pixels per square inch and so, this 100 X 100 pixel image would not look very sharp on them.
So, how to make them look sharp & good?
Simply – enable the Retina Ready setting, that’s under “Advanced” tab of iMedica options panel.
# It will load a JavaScript on your website, which detects if the device where the website loaded, is Retina.
# If the device is found to be Retina, it will look for higher resolution image
# If the higher resolution image is found – it loads that image; otherwise normal image will be loaded.
What is higher resolution image?
Earlier, we took an example of 100 X 100 pixels image. Simply put, 200 X 200 pixels would be considered as high resolution for Retina devices.
Where do I upload this 200 X 200 pixel image?
In the same folder, where you your 100 X 100 pixel image is used.
For example:
Lets assume this is the location of your normal 100 X 100 pixels image is /wp-content/uploads/2015/02/image.png
Now, if you have the 200 X 200 pixel image with you, simply rename is with @2x suffix. So – image.png would become [email protected] and upload it on the same folder.
Location of high resolution image would be – /wp-content/uploads/2015/02/[email protected]