I have a question that have been on my mind for several time now: how should I prepare the images that I am going to use on a website to be retina-ready?
Yes, I have been spending hours on the interweb on this topic, but so far I haven't find the one 'ultimate answer'.
In this thread for example (link: image size for retina display), it is only mentioned that I need to double the dimensions. But how about the resolution?
Real life situation: an image is created using Photoshop (or whatever your fix) at dimension 400px x 200px, with resolution of 72 ppi.
How should I modify this image?
The target is to select the images and display them on both non-retina and retina displays (i.e. 'normal' computers / laptops, macs (both versions, retina and non), iDevices, Androids, et cetera)
Looking forward for any feedbacks :-)
The question you link is correct. You need to double the size of the image to double the resolution.
What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.
One is not independent of the other.
An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.
So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.