Cinemagraphs: Animated GIFs Live Again!

Before there was Flash, the primary means of displaying movement on a web page was via animated GIFs, low resolution graphics with mostly clumsy transitions. Animated GIFs have mostly been relegated to retro-cult status, with very few serious uses for the format (although done properly, with the right graphics, they provide a quite passable substitute for a Flash banner ad). But that’s changing, at least artistically, with the increasing popularity of a technique called “cinemagraphy” (not to be confused with the film-making term, cinematography). 

Cinemagraphs are animated GIFs in which only part of the scene moves. The effect can be quite subtle, and also quite striking and unexpected. Someone has referred to them as “Harry Potter style moving photos,” and if you’ve seen any of those movies, you can probably relate to that description. Of course, a picture is worth a thousand words, and a semi-animated one is surely worth even more.

Photo and animation by Jamie Beck and Kevin Burg; source image here.

This is a great example of how a photo can be made even more striking with the addition of subtle movement, and the repurposing of the GIF format is brilliant: old and busted is made into new and hotness.

Tutorials for making cinemagraphs are starting to pop up.

I’d love to try my hand at this, now that I have an HD camcorder. It appears that all you need is a suitable short bit of video and Photoshop (to be honest, while I think I knew that you could edit video in Photoshop, I’ve never tried it and had completely forgotten that fact). Sounds simple, right?

Actually, making an animated GIF in Photoshop is quite simple, almost point-and-click simple. The above example is a series of 35 layers, each displayed with an interval of .07 seconds, and set to loop endlessly. The key is to choose the right source image.

The downside to cinemagraphs is that they yield very large files. The one shown above is almost 400kb and I’ve seen some that are multi-megabyte in size. That makes them somewhat impractical for inclusion in the typical website design, although the size and composition of the image can be managed to yield smaller sizes.