Sometime ago, a client asked us to build a page where the hero image featured a waterfall. The client also asked if we could have the waterfall to be animated and, at that time, the only option we could think of was to use video. It worked great but the client had issues with page load delay and the inferior video quality (naturally, these two things are mutually exclusive: high res video will increase the delay and visa versa).

Today I came across an article about collaboration project between cinematographer Armand Dijcks and photographer Ray Collins, who use cinemagraph technology to create gorgeous animated images of waves. I noticed that only a portion of the large image would be animated and thought this technology could present an interesting solution for creating visually rich, high-resolution animated images that are not too heavy for regular web use. In the nutshell, you take a photo, mask out the area you’d like to animate, build the animation and publish. These animations can be build as animated GIFs in Photoshop (as shown in this tutorial) or as videos, using dedicated software (like Flixel, used in Dijcks/Collings collaboration.)

 

Video courtesy of Armand Dijcks. To view larger, click on the video.