The Gif That Keeps On Giving (ii)

Following the rise of cinemagraph I was curious to explore any methods to create high end gifs whilst economizing on file size…

Gif on Gif action

If placing a gif on a background jpg can be exploited then what about taking it a step further and exploring gif layered on gif where background and foreground movement might be separated to reduce file size. There's also the potential to take advantage of different animated elements being on slightly different time loops.

Of course gif's lack of good support for transparency will limit things a bit.

Solo Gif

I sourced a clip from Dr Strangelove and using the quicktime player trimmed a ten second section, then imported it to photoshop. The approach is described in further detail here by Spoon graphics.

I suppose I could've cropped out George C. Scott to cut down the size even further. But I'm not the kind of man to be cropping out George C. Scott.

The resulting first stab came in at 367kb.

Cinemagraph v1 - just a humble gif. Mutton dressed as lamb.

It feels like it could be improved on by Sellers holding his gaze for a few seconds longer. That would be a relatively easy adjustment achieved by slowing frame rates at the appropriate point. However, if we want to retain the other moving element of the liquid judder in the glass it will start to ramp up file size due to the extra frames required.

Gif on Jpg

Splitting the animation into gif and jpg components cut 100kb from proceedings. One caveat being an extra http request. Not bad.

238kb for the jpg + 29kb for the gif = 267kb

Here's the working e.g.

Cinemagraph v2 - the gif mounted upon a motionless jpg

Gif on Gif

I then tried the two gif approach. First creating the glass judder as a 12 frame full size gif. Then a small gif for the more complex eye movement was layered on top.

Cinemagraph v3 - a pair of gifs intwined in gentle seductive motion

This approach made it easier to control the two areas of movement independently without compromising one another.

168kb + 132kb = 300kb

The combined file size is also an improvement too compared to the original.

It might not always be an appropriate choice but it's a technique that could be worth developing and certainly have some milage.