A while ago I came across images on the web, that are different: Something is moving…

After a little research I found out that they are so-called cinemagraphs and that they may were invented by two photographers in the United States: KevinBurg and Jamie Beck. Here some examples from their web site (© Cinemagraphs.com)


They are actually static images but a little part oft them are moving. You often don’t recognize it right away but that makes the whole thing but interesting.

How does it work?

From a still image

Plotagraph is a software, which can animate parts of a still image. You can define areas which should remain static and those that should be animated in an image. This is quite easy and with some of the pictures it works quite well. The animation can be exported as mp4 video that runs in a loop. This works quite well with water. It looks less realistic with fabric or hair.

To use Plotagraph you have to subscribe and pay a monthly fee. For me, creating only so results, this is not an option.

From a video clip

If you have a video at hand, you can extract a still image from the clip and create an overlay. With a mask you can reveal just the parts you want to have with movement from the underlying video clip.

This is not an easy job for someone like me, who is not so experienced with video editing. On top the model has to hold pretty still. In addition, the clip jumps after the end back to the beginning and the jump should be obvious. Simon told me a trick: I duplicated a 2-second clip duplicated and put it after the first on, then reverse the 2nd one. So the clip basically runs back and forth. It doesn’t work with all clips though. Again my lack of experience and limited capabilities of my video editing software doesn’t really help. In general uniform, slow and subtle movements are best to use for this kind of technique.

Putting Cinemagraphs on the Web

How to display the images on the web? The simplest and oldest option is the animated GIF which most are familiar with. These are usually small clips with basic graphics, running in a loop. Something like this:

GIF has the restriction of a maximum of 256 colors, what is striking particularly in colors or brightness/color gradients. The files are relatively small and are usually correctly represented in every browser.

The second option is a video clip, which runs in a loop. There are, besides the file size = charging time in the browser, no restrictions with regard to quality.  I was not able to let the videos run in a loop on my webpage without noticing that it’s a loop. For a fracture of a second a loading bar appears when the video re-starts. You can also upload the video to YouTube and embed it in the website via iFrame. I fumbled a while to get rid of the YouTube log, get the auto-loop, hide the player controls. After all that it doesn’t mean that the video is displayed in the same matter in every browse. Responsiveness and display on mobile devices is a whole other story.

Maybe it is because I’m using WordPress, the theme I use or my provider. Too many parameters that I got sick of trying. That’s why I converted my videos/images to GIFs. The GIFs on this site are only 600 px wide, so that I can show several on this page without having your router starting to smoke. Look closely to see the effect

My own trials

Images created with Plotagraph. Water works quite well, fabric and hair are not so realistic.

Created from video clips einem Video erstellt (quick’n’dirty):

It is a technique that I still find very exciting! Maybe I also take a short video clip on a shoot in the future to have the possibility to create a cinemagraph.

(Visited 81 times)