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.Jack
What is the best way to optimise a site with lots of images for a Retina display?
css;javascript;images
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.