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.

Stuff I've been working on: Full Fact

A quick update on what I’ve been doing with my life recently. I’m currently doing an internship with the good folks at Full Fact – an independent factchecking organisation who take newspaper headlines, political claims etc and, well, fact check them.

Here are a few of the articles I’ve done over the last few weeks:

There are of course, many more factchecks available on the Full Fact site, which (unsurprisingly) I very much recommend.

Silicon Valley in the UK?

David Cameron has revealed plans to transform part of London into the UK’s take on Silicon Valley, creating the East London “Tech City”.

The Wikipedia page currently has an enormous list of agreements that have been made to develop the area, with investment from the likes of Facebook or Google.

Whatever your views on whether or not this will be a success, if it does succeed things could get pretty interesting.

But it does raise one question: is this a bit of a gamble? The UK’s economy is mostly built on finance (I imagine this is why the government is loathe to tax banks too heavily), so it would be a bit of a stretch to suggest this would immediately transform the economy. Any tangible results will also take time to develop.

Assuming it has the potential to succeed, will politicians (and the media) have the political patience?