An otherwise still image that features a subtle moving element.
Far from just a pretty graphic, the novelty of cinemagraphs has measurable upside as well. Cinemagraphs have been shown to hold a user’s attention for up to 10 times longer. Considering you could shoot a cinemagraph with a DSLR in the same amount of time and effort it takes to take a still photograph, it’s seriously worth considering.
At the end of the day, cinemagraphs are either videos (e.g. an MP4) or GIFs. Both formats have their advantages and disadvantages, but depending on your intended application you might find that MP4s are a little bit more flexible.
MP4s, being a lossy format, are generally way smaller and higher quality due to the way they’re able to interpolate frames and colours. With the HTML5 video element, we’re given quite a bit of flexibility in how we present those videos as well.
GIFs have one main advantage over MP4s: they’ll autoplay on mobile devices, and without any ugly play/pause controls on top of them. To limit data usage, mobile devices tend to request a definitive user input before playing media (e.g. hitting the play button). Given GIFs are considered an image format, they;re able to get around that. Their massive downside is their propensity to snowballing file sizes. We live in an HD world, and an 5 second HD GIF will happily snap up 20-80mb of your data if streamed. If you can live with that, you’ll need to reconcile with only 256 colours.
We’ve experimented with GIFv formats that cleverly wrap GIFs into HTML5 video wrappers and allow for inbuilt autoplay and looping functionality, and this is what you might see across Twitter, GIPHY and some of our own applications.
We’ve found a few examples of what we’re able to achieve through the cinemagraph medium below.
A splash of colour
Hair in the wind