Designing websites with retina images

ipad_hero_2x.jpg

Within moments of using the new iPad with retina display, you’ll notice just how sharp the screen is… that is, until you head over to Safari and browse to a website. Whilst text remains crystal clear, images are still being loaded at 72dpi, and sadly on a screen so clear, this really shows up not just the low resolution, but also the JPG compression artefacts. In fact most website images look like the images haven’t loaded properly on the new iPad purely because the screen is THAT GOOD.

However in reality, this makes your website look bad, blurry and almost broken. Responsive websites that are loading the full resolution images seem to be ok, perhaps because they are already loading a large image, and scaling it down to fit the format of the screen it is on, but for most websites, blogs etc the image resolution of most photos won’t be sufficient to render images crisply.

Apple.com are doing some smart magic on their site. The basic site loads, with standard resolution images, and then the site runs a script, that pulls in the higher resolution image afterwards and subtly replaces the images for you so the site only looks blurry for a few moments until it loads the high res images and it all sharpens up.

Whilst this is very smart technology, your iPad typically on 3G or 4G connection now has to load TWO images, one of them containing 4 times as many pixel, and thus far heavier.

ipad_hero_2x.jpeg

Apple’s iPad home page goes from weighing around 500kb to over 2mb when loading the retina version. For most people using the iPad to browse websites will become a very costly experience. The average user on a 2Gb plan will only be able to browse to 1000 web pages before their monthly data-plan is used up. To me, that doesn’t sound too great.

How are Apple replacing images for Retina Display?

The code used for these two clever pieces of magic are:

Browserdetect does what it says on the tin, and dependent on the outcome, triggers imagereplacer to do it’s thing also.

So what do we do now?

Well, right now there are no ‘quick fixes’ for the iPad retina image replacement problem. No one has released a WordPress plugin or the like, and more importantly, even when this sort of plugin is made, consider VERY carefully if you want to use it. Quadrupling the load time of a website to delivery retina images could be viewed as careless.

Is it worth slowing your website down to 25% of it’s existing speed to deliver crisp images. Also, consider the build implications, you will be required to create two versions of EVERYTHING. Some images you simply won’t have at the double resolution size, and if you are using iStock style images, well… your costs may rise if you are now having to buy the ‘next size up’ on iStock.

For now, you may be best of waiting and seeing what everyone else does. If Facebook, or Tumblr start streaming retina display images, well, then maybe you should consider converting your site to as well, but until then you may be best off waiting.

In an ideal world…

I hope that in the (very near) future, all webkit Browser will do the same as iOS does natively. If your HTML points to a file called for example image.jpg, then on the iPad, the browser will do a background check (once the site is fully loaded) for a file called image2x.jpg.

If the browser can find this image on your web server, it simply substitutes the image, serving up the retina resolution image with a fade, and miraculously, a few seconds after the site has completed loading, it then magically ‘just gets sharper’. Now, I know I am not alone in this request, so I am hoping the brains at Apple are also thinking along the same lines, it makes a lot of sense to do this, and would mean without touching any code, all you would need to do is upload double resolution images in to the same location as your existing images.

Blogger, Startup-lover, even bigger lover of Apple, and an even bigger lover of sneakers. His house is full of Macs and sneakers. No joke!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>