Website Images for Retina Displays: Resolution and PPI/DPI

I have been doing quite a bit of research to determine the best specifications for images on the new retina displays. I know that file size plays an important part in the size of the image chosen. I keep hearing that dpi or ppi (dpi is actually for printing but I find that a lot of people use it incorrectly) doesn’t really matter, that only the actual dimensions of the image matter, but that didn’t make sense to me, so I decided to do an experiment for myself. To do that, I started with this great picture.

Picture from PhotoXpress.com (now fotolia.com) Photographer:Micah Jared
All pictures will be presented at the size of 450px wide. I have set them up so you can click on them for a larger view. Look at all the images carefully or skip to the bottom for my conclusion.

900px x 500px 300ppi 530KB Optimized-100
I’m going to consider this my starting image. When I say “Optimized 100” that means that with Photoshop optimization, I am setting the quality to 100, which is no compression.

900px x 500px 72ppi 468KB Optimized-100
Same dimensions, still no compression, but my ppi is down to 72. Quality appears exactly the same although I have saved a little bit on file size from using the smaller ppi.

900px x 500px 72ppi 104KB Optimized-60
Here I have used some compression to bring the file size down by quite a bit.

900px x 500px 1ppi 481KB Optimized-100
Yes, only 1ppi! You can see how much difference the compression makes because we are back up to 481KB. The PPI made no difference at all in the sharpness of the image.

450px x 250px 300ppi 120KB Optimized-100
Here is where I have finally changed the actual dimensions of the image and this is where my image finally begins to look blurry. The file size is down to 120 KB, but at what price?

450px x 250px 72ppi 119KB Optimized-100
It’s a little hard to see on regular screens, but on the retina display, image quality is lost. Even the text on the image is not as clear.

450px x 250px 72ppi 31.4KB Optimized-60
And here is the standard way I used to do images. Cropped to correct size, at 72ppi, and Optimized quality of 60. There is little difference between this and the 300ppi image at the full 100% quality although the file size is now down to just 31.4 KB, but the image is not as sharp as it could be on retina displays.

900px x 500px 1ppi 30.4KB Optimized-10
My final experiment is to go back to the larger image size but use a higher compression to see if I can get the file size down without losing quality. So this image has the dimensions 900px x 500px at 1PPI and compression set at just 10. I ended up with with a file size of just 30.4 KB, which is less than my normal file size would have been! So compress those files! The image quality is as sharp and clear as the original image.

Conclusion

As you can see, the experts were right. PPI/DPI doesn’t matter at all. The true indicator of sharpness on the new retina displays is the actual dimensions of the image. On the average screen, the dimensions don’t matter, but if you want to optimize for the new screens, you must consider them. And if the final file size is smaller anyway, why not use the larger image? Optimizing your image makes all the difference. I’d love to hear about your experiences with this issue.
*Note: For all these images, I have not let WordPress change the file dimensions. I have used the full size image and set the dimensions in the HTML.