The new iPad

If your site is not www.Apple.com it is surely not going to look good when you open it on your new iPad.

Why? Well… your text will look ridiculously crisp, yet your existing images will appear non-retina (because they are just ‘normal’ images saved for standard web specs) which means that your eye perceives all images as blurry because they are displaying at half resolution. Usually this is not a problem because on your Mac, PC or old iPad, the pixels are the same density for both text or image, however with the new iPad, images are rendered at the ‘old’ pixel density, which when put next to text at the new retina density, quite frankly look terrible.

So what’s the solution, well we’ve found there are some code snippets that will check for retina display and stream double size images to the new retina display device, however think about this… Retina Display images are 4 times, yes FOUR TIMES more pixels than standard screen images, that means FAR bigger images, and with such a crisp screen you will want to make sure you compress your images far less to avoid JPEG artefacts which again means even bigger images.

In the real world that means a ‘nice’ quality full screen background image of medium complexity, could easily be over 1Mb, add to the mix a few transparent PNG’s for sprites or graphics and your website could really start to slow down on load, especially over a 3G/4G network. Later this year it is predicted that Apple will roll out the retina display to their line of Macs which means this dilemma is here to stay until we have a much faster internet and ALL users are on new retina screens, both Mac and PC users which will realistically be 5-10 years from now.

The beautiful retina display has created a new nightmare for web designers and coders. Just as we approach a time where we are rid of the ‘design 2 versions for IE and Firefox’, we are now faced with a new dilemma: saving images at two different sizes for regular screens and iPads. The scale of this problem is directly related to the number of images on your site, if you have a text only website you are safe, if you have a blog with thousands of images, well… you are screwed.