The stunning new Retina display from Apple takes detail and clarity across screens to the next level. Apple’s latest iPad, iPhone and MacBook Pro comes with a Retina display, with content displayed at a whopping 220 pixels per inch!
Crisp, crystal-clear screens is great news for iPad owners, and for web developers it creates a variety of new opportunities (and issues) if they are to deliver a better user-experience on high density screens. A quick fix would be to include high resolution images and scale these down in HTML. It is not ideal as it results in a host of problems such as processor-intensive downscaling and increasing bandwidth costs. Additionally, downscaled images would simply take longer to load, which defeats the idea of displaying them on mobile devices, especially on those that do not even have Retina displays.
Alternative methods include serving images using server side rewrite rules, query strings or data meta-attributes although HTML5 features the canvas element which was originally introduced by Apple in 2004. HTML5 canvas would not solve the problem for digital photography, but it is a great alternative for vector graphics.