Optimise your Parallax Scene (multi layered moving images)

An increasing number of sites are using Parallax Scenes, it’s a cool technique where you layer images on top of each other so they all move independently at different speeds.

You can see an example on the homepage of the New Zealand digital marketing firm I work with. I’ve made a fair few examples recently, often with several layers to good effect.

But in my work optimising sites and speeding them up I regularly come across websites that are unnecessarily slow loading with these. They’re always going to be pretty large because transparent images need to be in PNG format which is simply a much less efficient format than JPG.

But there are a couple of tips I have to really make them fly.

1. Optimise your PNGs, using tinypng.com. You’d be amazed how much those PNGs can be compressed.
2. This might seem like common sense but almost no-one seems to do it – the main background image in your scene layers does not have to be a PNG. There’s no part of it that needs to be transparent, so make it a JPG instead!

Using those techniques I was able to optimise the example I linked to above to be less than 400kB for the entire parallax scene, including the code for it.