By Richard Mallion
The new iPad (3) arrives this Friday, March 16. Like the iPhone 4 the new iPad comes with a retina display. The native resolution is 2048×1536 pixels which is an incredible 3.1 million pixels. This is form times the number of pixels the iPad 1 and iPad 2 had. The screen is amazing but does leave some extra work for developers, both native app developers and web developers.
Native Apps
For native apps, existing apps should run just fine. The resolution of 2048×1536 is exactly double the older iPads. This was a deliberate choice by Apple as it allows the iPad 3 to neatly double up any images from the older apps to display on the retina display. Due to the doubling up the images may not look as crisp as they might but they certainly are passable.
Going forward developers will have to update their apps to take advantage of the retina display. This means providing high resolution images. The consequence of this is that apps will get bigger. The recently update iWorks suite for iPad has almost doubled in size due to the large image assets required. This is a reason why Apple has just increased the maximum over the air install to 50MB.
Web Pages
For web developers, they may choose to start supplying high res images for the iPad and similar devices. The problem thou is that you want to send smaller images to small screens and larger images to larger screens. Sending a huge iPad-optimized image to a device with a max resolution of 320×480 just doesn’t make sense. At the same time, when bandwidth isn’t an issue, most sites will want to serve high-resolution content to displays that can handle it.
The ideal solution would be to detect both the resolution of the screen and the available bandwidth. Then, based on the combination of those two factors, the server could offer up the appropriate image. Currently that’s not possible, though there are already proposals to extend HTML to handle that scenario.
The Responsive Image Working Group is a W3C community group hoping to solve some of these problems. The group is proposing a new HTML element, <picture>, which will take into account factors like network speed, device dimensions, screen pixel density and browser cache to figure out which image to serve up.
In the mean time Apple has started to upgrade their web site with high resolution mages for the iPad 3. The way Apple is doing this is serving up lower resolution images by default, then using JavaScript to send larger images on to iPads. That works, but it will definitely mean increased download times for new iPads since they have to download two files for every graphic. Apple’s approach will also up the number of HTTP requests, which will also slow down the page.
The slower page loads seem to be an acceptable trade off for Apple since the company no doubt wants to showcase the new iPad’s high resolution display with high resolution images. For other sites the bandwidth trade off may not be worth the gain in image resolution.