Retina images on the web

Techie post alert! This isn’t one of my normal politics posts!

As I’ve mentioned on Twitter, I’m working on a new version of this site, which will have room for a little more content.

With the release of the new iPad, websites will be forced to improve. Traditionally, sites could be built by just using a straightforward image, with a defined number of pixels per image. The whole point of the retina display is to try and hide the existence of the pixel, to make the image as detailed as possible.

This is something of a challenge for web designers – sites built with the old methods can look a little blurry. For an example, just look at any app which hasn’t yet been updated with retina graphics.

There’s some discussion as to how to best go about this. Progressive JPEG files seem to work well, whilst Apple themselves use javascript to reduce the load on the site.

I’m not happy with using javascript. Although the new iPad supports it, eventually high resolution screens will be the norm on PCs, which may be using NoScript to block the use of javascript. I’ve gone with progressive JPEG files:

  1. For each file, I save it at double the size I will be using on the site, and save it in Photoshop as a progressive JPEG (File -> Save for web -> JPEG -> Checkbox marked ‘Progressive’)
  2. The section (or div) I’m using has a fixed width, and has background-size defined as the same width. So for an image of 1260px, the below CSS code is used:
#sections {
width: 630px; height: 300px;

The drawback of this method is filesize. This site doesn’t get a huge amount of traffic at the moment, so the server is fine. I’d be interested to know if anyone has any problems loading the new site, although I’ve moved to a new web host who should be more reliable. The other problem is the lack of transparency, which was always a wonderful feature of PNG files.

There’s always SVG files – vector images. (For the non-technical, these are images that don’t record pixels, but rather points, and then work out the lines in between them). These are great for logos (and can be zoomed to an infinite level), but are no good for photographs.

Either way, the result is much clearer, even using progressive JPEG files.

There’s a great demo of what the results are here. You need an iPad to see the true results, but it’s definitely worth it. The possibility of the wide use of high resolution displays is an interesting one.