Back to Top
21.07.13

The Gif That Keeps On Giving (i)

Documenting recent adventure in animated gif …

Cinemagraphs seem to be sweeping the web at the moment and I've been angling for an opportunity to jump on the bandwagon.

The prospect of some frame finesse seemed to be on the cards whilst I was working for a motor-sport showcase event. The appropriate resource didn't really materialise but I satisfied my gif urges with a low fi animation. Hopefully it's a prequel to some cinemagraph action at a later date.

935 animation

Size Matters

One of the reservations cited at cinemagraphs is, in evolving from the humble gif to its more seductive counterpart, file size can creep up. Many seem to reach around the 700-800kb mark.

Size is best kept down by using concentrated areas of movement so for the above gif a filter mask was created so that alterations in the 'dust and scratches' layer would only affect very small areas of the image for each frame. Desaturating the photo to use minimal colour felt like an appropriate aesthetic choice which would also give more leeway when it came to compressing the final animation.

The animation was generated from a single photo and employed a little photoshopery to give the feel of multiple stills. Using a single image as the basis was a necessity in this case but it's an approach worth mirroring when creating a cinemagraph or something with more frame resource.

Cool Background Image Technique

Further research into reducing file size brought me to a great technique of using a jpg background image and layering the animated element on top of the static image.