I am going to have a website which will deal with a lot of images. What is the best way to optimise them for Retina display without having much of an impact on website loading times?

There seems to be a lot of mixed signals about how to optimise for Retina display too. Do you need 2 instances of the same image, then load one or the other depending on if the device the site is running on has a Retina display?

Any help on this topic and specifics about optimisation would be appreciated.


  • On my website, I have a stock of images that I use quite a bit and I put them all into a font and use that font to serve images. Its light and always looks sharp!
    – karancan
    Apr 7, 2013 at 1:44
  • When you say images, do you mean photos or icons?
    – Ivar
    Apr 7, 2013 at 12:32
  • Sorry for not specifying. I have a lot of unique photos that need optimising on the same page.
    – Jack G
    Apr 8, 2013 at 16:42

1 Answer 1


Everything is a compromise:

  • To preserve bandwidth, simply ignore the Retina display and serve normal images as usual.

  • To maximize image details, you have to serve the higher resolution images to those with a Retina display. You can see how it can be done here or here.

Regardless of which you choose, always optimize your images, compress them to your liking but no more and strip metadata. You can save a good chunk, depending on the image. Some include thumbnails, ICC profiles, etc. It may be wise to keep only copyright information though which takes a few bytes.

The point to know if that Retina images will always take more space than regular ones which equal compression because they are more detailed. So the best thing to do is decide when the extra resolution helps your visitors and when it does not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.