Scroll, scroll, click, scroll… Switch tabs.
That’s the average visitor to your website, whose attention you just lost because they decided to watch a video on YouTube. Don’t take it personally; on average people browse each website for 10–20 seconds before moving on.
Cinemagraphs are known to give websites a leg up by combining beautiful still photographs with the attention-grabbing movement of video. They are also proving to be effective in social media advertising. Microsoft found that they increased engagement over still photographs, while also reducing advertising costs. Coca Cola’s classic shot of their can against moving water received over 80,000 notes on Tumblr!
We’ve already seen cinemagraphs used on home pages (like this one and this one) and in portfolio work, which is a good start. And we know that cinemagraphs hold attention up to 10 times longer than still images. But how else can you use them? We won’t cover easy answers like travel and tourism websites, where cinemagraphs will obviously enhance beautiful landscapes from around the world. Instead, we’ll cover areas of your website you may not have considered breathing more life into — your Product pages, Landing pages, and About pages.
Here are 3 ways you can be using cinemagraphs on websites:
Build Better Product Pages
As people are browsing your products pages, considering whether to buy and what to buy, hook them in with cinemagraphs. Offer alternate and more detailed views with cinemagraphs of your products, alongside the static photos you already have.
When it comes to ecommerce and retail, cinemagraphs tend to be models wearing or using products, but with a bit of motion involved. Bloomingdale’s uses cinemagraphs on Instagram to show off clothing, and Harper’s Bazaar uses them for wedding dress fashion. The mostly still photos are enhanced by subtle motion, such as clothing fluttering in the wind. It’s also not difficult to include them in your ecommerce shop, as they are easy to embed on Shopify.
Food photography, for a restaurant or delivery service, can also be enhanced by cinemagraphs. They tend to be very subtle — such as liquid pouring or sauce dripping, showcasing the details that remind you of the dining experience. They can also stretch over to appliances, letting you show a rice cooker steaming or an espresso machine at work. Cinemagraphs would also be a good option for recipes, demonstrating dish preparation with more active visuals than the usual photo series.
Cinemagraph by juliaartphotography
Earn Attention on Landing Pages
Landing pages for services or freelance work are a great chance to use cinemagraphs. Especially if your landing page is long, a beautiful cinemagraph at the start can tempt your audience to read further. Placing one at the end can be a great payoff for the reader’s effort.
The first image on a Landing page should be like the hero image you’d use on a homepage. It’s the place to display your best product and/or draw the viewer in, so they will keep scrolling (here’s how Home Depot does it). A cinemagraph can also be the whole Landing page, which you click through to get to the rest of the website. Combining your cinemagraphs with interactive elements (like Weltrade did) can make it even more interesting.
Landing pages leave you with plenty of content options that aren’t necessarily just your standard offerings or models. Soothing landscapes and busy cities can be worth a stop and stare on the way to checking out the actual content of your website. These cinemagraphs won’t look out of place as long as they suit the theme of your site.
Cinemagraph by Jon Kane Houldsworth
Build Trust with About Pages
If a visitor reads your About page, they’re likely curious, but not totally convinced yet. They may be interested or tempted, but they’re looking for more information about your company before they decide to reach out.
The right visual aid can help convince them of your expertise or specialty. Adding faces to the company name will always get you extra points, even more so if you can inject a little humanity into the typical portrait or group shot. With that in mind, you could include a cinemagraph of you and your team. The human brain remembers and recognizes faces, meaning a photo (or even more memorable cinemagraph) could work better for them than just your name or bio.
Medalia Art found that putting photos of their artists on their website increased their conversion rate by 95 percent. Cinemagraphs can take this to the next level by showing what you do and some of your personality in a living photo. You can make cinemagraphs of your customers, showing their reactions to your work or what they look like using your products or after your services, like a moving testimonial (which can be accompanied by their quotes about your business). Last but not least, you can let them in behind the scenes to show them where the magic happens—your workspace!
Cinemagraph by jaredsluyter
Final Thoughts on Using Cinemagraphs on Websites
We’re just seeing the possibilities for how cinemagraphs can tell stories around your website. Cinemagraphs can help boost sales, give a great first impression, and even convince people to stick around on your site, so choose the most effective opportunities to employ them. If you do, you’ll enhance your online presence and boost your audience engagement.
**
Henry Brown leads growth at website builder PageCloud, where embedding your cinemagraphs in your own websites is easy as pie. His colleague, Phil, can show you how to learn SEO quickly.
