Shoupapp
A still photo can make a homepage feel flat. A full background video can make it feel heavy. Animated product images sit in between: a few seconds of gentle motion in which the camera and the light move, but the product stays exactly where it is. This guide covers when to choose an animated image over a video or a GIF, which motion suits which part of a website, and how to add one without hurting accessibility or page speed.
Animated image, video or GIF?
| Animated product image | Product video | GIF | |
|---|---|---|---|
| What moves | Only the camera and light | The camera, the scene, sometimes the product | Anything |
| Feel on a page | Calm, premium | Attention-grabbing | Often cheap-looking for photos |
| Image quality | High, as an MP4 | High, as an MP4 | Limited colors, large files |
| Best for | Heroes, banners, galleries | Ads, listings, landing pages | Small graphics and icons |
For photographic content, an MP4 is almost always the better file: it keeps more color and detail at a smaller size than a GIF.
Where gentle motion works on a website
- Homepage hero. One quiet loop draws the eye without the weight of a full video.
- Category banners. A slow pan adds depth above a product grid.
- Product galleries. A focus shift highlights a material or a detail, next to the still photos.
- Landing pages. A gentle zoom keeps a launch page from feeling static.
Use motion sparingly. One animated image on a page is a focal point. Several competing loops make the page harder to read and give nothing a chance to stand out.
Which motion for which spot
| Motion | What it does | Best placement |
|---|---|---|
| Gentle zoom in | Moves slowly towards the product | Homepage hero |
| Gentle zoom out | Reveals the product and its setting | Launch and landing pages |
| Soft pan | Glides sideways across the image | Wide category banners |
| Focus shift | Moves the focus onto a detail | Product galleries, materials |
| Subtle drift | A barely-there float | Minimal, calm pages |
Why the product should not move
The point of an animated product image is that it can sit next to your still photos without looking out of place. That only works if the product itself stays still and unchanged: same position, same shape, same label, same color, from the first frame to the last. When only the camera and light move, the page gains life without losing its calm, and the product stays recognisably yours.
Adding it to your site
An animated product image is a short MP4 used where an image would be: a video that plays on its own, loops and has no sound. Most store themes and page builders have a video block with those options. If you add it by hand, the markup looks like this:
<video autoplay muted loop playsinline poster="product-still.jpg">
<source src="product-loop.mp4" type="video/mp4">
</video>- muted is required for autoplay. Browsers block autoplay with sound, but, as Chrome's autoplay policy puts it, "muted autoplay is always allowed".
- playsinline keeps the video in the page on phones instead of opening it full screen.
- poster shows the still photo while the video loads, so the spot is never empty.
Respect reduced motion
Some visitors switch off animation in their device settings, for comfort or for medical reasons. Browsers expose that choice through the prefers-reduced-motion setting, which detects "if a user has enabled a setting on their device to minimize the amount of non-essential motion". Show those visitors the still image instead:
@media (prefers-reduced-motion: reduce) {
.product-loop { display: none; }
.product-still { display: block; }
}A gentle loop is non-essential motion by definition, so this costs you nothing and makes the page usable for everyone.
Keep it light
- Keep it short. A few seconds that loop cleanly are enough.
- Size it for the spot. A banner does not need a larger video than the width it is shown at.
- Calm motion compresses better. Slow, small movements produce smaller files than fast ones.
- Measure after adding it. Check your page speed before and after, especially on mobile.
Making the loops in Shoupapp
Shoupapp's animated product photos are built for this use. You choose a photo from your library, pick a motion (gentle zoom in, gentle zoom out, soft pan, focus shift or subtle drift) or let it choose one that suits the photo, and pick the format: portrait 3:4, square, vertical 9:16, landscape 4:3 or wide 16:9. Each clip is five seconds long and comes back as an MP4, with no prompt to write. Download it, keep the original photo as the poster and fallback, and place the loop where the image was.
When you need more movement
Animated images are calm by design. For ads and listings that need real movement, a product video is the better fit. For Reels and TikTok, a short vertical film with several shots is.
Text over a moving image
A hero often has a headline and a button over the image. With motion underneath, readability matters even more:
- Put text over the calm part of the frame, not over the area the camera moves towards.
- Use a soft gradient or shade behind the text if the background changes brightness during the loop.
- Keep the motion gentle, so the text does not appear to slide.
Making the loop seamless
A visible jump when the video restarts breaks the calm effect. Slow, even movements, such as a gentle zoom or a soft pan, hide the loop point best. If the jump is noticeable, place the loop somewhere it plays once and pauses on the last frame, or use a motion that starts and ends at a similar framing.
On phones
Phones show the hero smaller and often taller. Make a separate vertical or portrait loop for the mobile layout if your theme allows it, rather than letting a wide loop be cropped. On slow connections, the poster image carries the page until the video loads, so choose a poster that works on its own.
Animated image questions
Will the product move or change?
It is designed not to: only the camera and the light move. Check each clip before using it.
Can I use an animated image in a marketplace listing?
Where a marketplace accepts product videos, yes, but a calm loop is made mainly for your own website.
Which photo should I animate first?
The one at the top of your homepage. It is the single spot where a little motion is seen by the most visitors.