Retina displays and Web developers

Ian Eberle, in an editorial for 1 Tech Portal:

Apple optimizes their own website for the iPad’s Retina Display, but for the average web designer, it is not practical. For their www.apple.com/ipad page, Apple uses image_replacer.js to automatically determine if the user is on a Retina-enabled device. If yes, the JavaScript file will switch out all of the standard .png images with HD ones that are four times as large. This is a very unique idea from a programming aspect, but it doesn’t really make sense from a web design aspect… Loading images that are four times as large will put bandwidth strain on the server, take up more space online, and give the user four times as much data to download.

As with any argument, this can go both ways. If you use the technique that Apple uses, it will require a lot of extra programming that most web designers don’t have time for. If you simply optimize your entire website for Retina Displays without even using the JavaScript file, it will cause your website to look enlarged on older screens that are not quite as dense. If you do not optimize your website for Retina Displays, it will work just as well on an old PC as it will an iPad, but the graphics won’t be as rich as they are on some Retina-optimized apps.