Implementing header images

9 October 2013 — Last updated 25 September 2024

Design — Personal — Web

I have been working on the biggest update to this website’s design since I launched it almost a year ago.

I had been becoming increasingly wary that the design was too stark and plain. I decided the best way to do that would be to add header images.

Subtle parallax scrolling

I was inspired by the design of profile pages in the Google+ mobile app. I can’t provide a link as the web version is rather different. In the app, as you scroll down the cover image disappears in a parallax effect.

Normally I rail against needless animations and parallax effects. But I found the Google+ example very satisfying. Contrary to most over-the-top parallax examples you will see, this is a rather subtle effect, and I rather fancied emulating that idea for this website. It was also good to challenge myself to learn something new.

I sniffed around at some parallax scrolling resources. There are a lot of over-the-top libraries out there that offer a billion and one options. There is no point in adding all that weight to my webpages if I only want to add a simple scrolling effect that I could honestly take or leave.

But I found this lightweight and simple solution from Nettuts+. I adapted it to suit my needs, and after a bit of tweaking I got it working as intended.

Sort of.

The quality of the effect varies from browser to browser. Annoyingly, the lack of smooth scrolling in Chrome makes it difficult to even tell that it’s happening. It looks great in Firefox though.

Mobile browser quirks

To my dismay, the effect does not work properly in many instances of mobile WebKit. That accounts for pretty much all the major mobile browsers.

Not only did the effect not work, it did the exact opposite of what was intended. On every desktop browser I tested, the image scrolled up at half the speed of the content — the intended behaviour. On mobile devices I tested, the image scooted off the top of the page at twice the speed.

I initially thought it must have been to do with the JavaScript. But that was leading me on a wild goose chase.

After a lot of digging around and experimenting, I finally discovered it was because many mobile browers do not support the CSS background-attachment: fixed. It seems as though this is working in some browsers from Android 4.1 onwards, but it still does not work in many instances. It certainly does not work in Chrome on my Nexus 4 or my Nexus 10, both running Android 4.3.

Testing the design on my old Samsung Galaxy S2 using Android Browser, the header image looks very blurry and washed out, to the point of being almost unrecognisable. This is unrelated to the parallax effect, and is clearly another CSS issue, but I have not yet worked out exactly what is causing it.

It is often easy to fall into a false sense of security about the quality of mobile browsers. They have come on a long way in the past few years, but they still have some surprising quirks.

It is ironic. I was inspired by a parallax effect that is on a mobile app version of Google+, but is not available on the desktop website. Yet I implemented it no problem for desktop, but had problems getting it to work on mobile devices.

I considered ditching the header idea completely. But I decided that since the issues do not fundamentally break the functionality of the website, I can live with it. If I have the time, I will look into workarounds.

Image size

Another reason I was concerned about the mobile implementation of these header images was the file size of the images themselves. In this multi-device world, there is no perfect answer to the image size conundrum. There are a variety of solutions for implementing responsive images, but all of them have drawbacks.

My approach was to serve up the same image to all devices. This is the simplest solution. It might seem like a cop out, but I don’t see much point in creating so much overhead in terms of coding and creating multiple versions of images, when in reality all the solutions are pretty nasty in some way or another anyway.

Plus, with the increasing prevalence of retina displays, it seems as though device manufacturers believe that their users are prepared to receive oversized images anyway. They are happy to trade off the extra loading time for improved image quality.

It is an uncomfortable situation though. These images are set to appear at the full width of the browser, which could be anything. Yet I have to choose a size for the image itself, which will then be blown up or shrunk as required. If it is stretched, the image begins to look too blurry. If it is shrunk, the file size is too large.

I settled on a width of 1260px, which is the maximum width of this website design. Because of the increasing adoption of retina displays, I decided it was better to err towards the larger end of the scale.

Reducing file size

I used Riot to optimise the image sizes. I would highly recommend it. Some of the results are staggering. Using the default settings, some of the images we reduced to a third of their original file size, with little perceptible difference in quality.

For instance, the photograph of the Hungarian Parliament Building was reduced from a file size of 211 KB to just 71 KB.

The images themselves

I took the same approach as the Twenty Eleven WordPress theme. There are a number of header images that are displayed at random. But individual articles can have their own images that override this (as this page does).

I selected a longlist of 18 photographs that I have taken over the past few years. I wanted to whittle these down a bit, so I got some feedback from my girlfriend.

I was quite keen on the idea of featuring this photograph, a close up of a memorial taken at Memento Park in Budapest last year. My girlfriend pointed out that, even though it says Gyorgy, the way the photo has been shot makes it look like orgy. I had never noticed that before. Freudian or what?

So, after weeding out the accidentally rude photos, I have ended up with a final list of eight: