The new iPad is bringing high resolution to the web
*Update 2 April 2011 – We have just updated this post with a few realisations:
- Resizing images in HTML works fine on the iPad but makes the image look worse in the browser. So our suggestion of just having smaller images always at twice the size has been removed – we now suggest to use the 2X JavaScript technique for every foreground image.
- The previous post didn’t mention what to do with background images so we have updated it to include how to handle these.*
For as long as the web has been around, web designers have been optimising images for relatively low resolutions due to the limitations in monitors. With the release of the iPhone 4 in 2010 (with high resolution Retina display) it meant you could now view things in a much higher resolution. But while many apps may have been re-developed to suit the high resolution display, it didn’t really force web designers to change the way they build websites. This was because the screen is so small, the amount of pixels shown is only the same as a typical website anyway so by default the majority of websites looked great on them (i.e. website was shown half the size and therefore doubling the resolution was fine).
It was still assumed at this stage that higher resolution displays were some way off appearing in full size screen devices like tablets, laptops and monitors because of the engineering challenges associated with it. However with the release of the new iPad, the challenge is here now. And luckily we have one and we can start getting our heads around how to respond.
HTML vs foreground images vs background images
First of all it’s important to understand that your site is made up of HTML (headings, text, some graphical elements like borders etc) and images (foreground and background). The HTML is not restricted by pixels so it automatically looks great on the new iPad. However the images have probably been optimised to 72DPI or similar so these images are going to look a bit blurry. Read More…
