What a cinemagraph is (and isn''t)
A cinemagraph is a hybrid of photo and video. Technically it''s a short video clip or animated image where a mask isolates one region of motion and freezes everything else. The result loops seamlessly, so there''s no visible start or end — the perfume keeps swirling, the fabric keeps rippling, forever.
It''s worth being precise about what separates a cinemagraph from neighboring formats, because they''re often confused:
Not a cinemagraph
- Product video: the whole frame moves, has a beginning and end, usually needs a play button
- GIF/boomerang: everything jitters back and forth; motion is the whole point, not a single accent
- 360° spin: the product rotates fully; it''s interactive, not a passive loop
A true cinemagraph
- One isolated element moves; the rest is photographically still
- Loops invisibly — no obvious cut point
- Autoplays silently, no controls needed
- Reads as a photo at a glance, rewards a second look
That restraint is the whole craft. A cinemagraph with too much motion just looks like a low-quality video. The discipline is choosing the one thing that should move.
Where cinemagraphs actually earn their keep
Cinemagraphs aren''t free — they take more planning than a packshot — so they pay off most in specific spots rather than across an entire catalog. The strongest use cases share a trait: the motion reveals something about the product a still photo would hide.
Categories where the format consistently delivers:
- Beverages and liquids: pouring, fizzing, swirling, steam. Motion sells freshness and texture.
- Fragrance and beauty: a mist spray, a drop of serum, a slow shimmer on a compact.
- Jewelry and watches: a controlled glint moving across a polished surface communicates shine better than any still.
- Apparel with movement: the hem of a dress catching a breeze, fabric draping, fringe swaying.
- Tech with light: a screen waking, an LED pulse, a status ring spinning.
Use cinemagraphs for the hero image or the first gallery slot — the position with the most eyeballs and the highest scroll-past risk. Reserve static photos for the detail and spec shots where clarity beats motion.
How to plan and shoot one
The traditional route is to capture a short, locked-off video clip and mask the motion in post. Because most of the frame must be perfectly still, the shoot demands more rigor than a normal photo session.
| Requirement | Why it matters |
|---|---|
| Sturdy tripod, zero camera shake | Any frame drift breaks the frozen illusion |
| Consistent, continuous lighting | Flicker shows up as noise in the still areas |
| Isolated, repeatable motion | The moving element needs clean loop points |
| Shoot 5–10 seconds of clip | Gives the editor room to find a seamless loop |
In post, you pick a single still frame as the base, then paint back in the moving region from the video layer and create a loop by blending the clip''s end into its start. Tools like Photoshop (timeline + layer masks), Flixel, or dedicated mobile apps handle this. It''s fiddly but learnable.
The newer route skips the video shoot entirely: AI motion tools can animate a region of a still product image — adding swirl to a liquid or a glint to metal — directly from a single photo. This dramatically lowers the barrier for brands without a video setup, though it works best on simple, physically plausible motions. Tools like Retouchable let you start from your existing product stills rather than re-shooting, which keeps cinemagraphs consistent with the rest of your catalog.
Keeping file size from killing your page
This is where most cinemagraph projects go wrong. An animated image is heavier than a JPEG, and a bloated hero asset will tank your Largest Contentful Paint and bounce shoppers before the loop even renders. Format choice matters enormously.
Practical rules:
- Never ship cinemagraphs as GIFs. GIF is capped at 256 colors and produces enormous files. Use a looping, muted, autoplay
<video>with MP4 and WebM sources instead. - Set
playsinline,muted,loop, andautoplayso it behaves like an image, including on iOS. - Provide a poster frame (a static JPEG/WebP) so something renders instantly while the video loads — this protects your LCP score.
- Keep loops short (2–5 seconds). A tight loop is both more elegant and far lighter.
- Lazy-load cinemagraphs below the fold.
Some marketplaces and platforms don''t support video in the main image slot. Always keep a strong static version as your fallback and your marketplace hero — use the cinemagraph on your own storefront and in galleries where video is allowed.
A simple workflow to test the format
You don''t need to animate your whole catalog to find out whether cinemagraphs work for your store. Treat it as a contained experiment:
- Pick one or two best-sellers in a category where motion reveals something — a drink, a fragrance, a piece of jewelry.
- Create a single cinemagraph for each, either by shooting a locked-off clip or animating an existing still with an AI motion tool.
- A/B test it against the current static hero. Watch add-to-cart rate and dwell time, not just clicks.
- Mind the metrics that matter: a cinemagraph that lifts engagement but slows the page can be net-negative. Measure conversion and Core Web Vitals together.
- Scale only what wins. If the format proves out for beverages but not for flat apparel, that''s a useful finding — roll it out selectively.
The goal isn''t to make everything move. It''s to find the handful of products where a single, well-chosen motion turns a scroll-past into a second look.