Shoupapp
Een stilstaande foto kan je homepage vlak laten aanvoelen. Een volledige achtergrondvideo maakt de pagina juist zwaar. Bewegende productfoto's zitten daar precies tussenin: een paar seconden rustige beweging waarin de camera en het licht bewegen, terwijl het product exact blijft waar het is. In deze gids lees je wanneer je kiest voor een bewegend beeld in plaats van een video of een GIF, welke beweging bij welk deel van een website past, en hoe je er een toevoegt zonder je toegankelijkheid of je laadtijd om zeep te helpen.
Bewegend beeld, video of GIF?
| Bewegende productfoto | Productvideo | GIF | |
|---|---|---|---|
| Wat beweegt | Alleen de camera en het licht | De camera, de set, soms het product | Alles |
| Gevoel op een pagina | Rustig, premium | Trekt de aandacht | Bij foto's vaak goedkoop ogend |
| Beeldkwaliteit | Hoog, als MP4 | Hoog, als MP4 | Beperkte kleuren, grote bestanden |
| Het best voor | Hero's, banners, galerijen | Advertenties, listings, landingspagina's | Kleine graphics en icoontjes |
Voor fotografische content is een MP4 bijna altijd het betere bestand: die houdt meer kleur en detail vast bij een kleiner formaat dan een GIF.
Waar rustige beweging werkt op een website
- Hero op de homepage. Eén rustige loop trekt het oog zonder het gewicht van een hele video.
- Categoriebanners. Een trage pan geeft diepte boven een productgrid.
- Productgalerijen. Een focusverschuiving licht een materiaal of detail uit, naast de stilstaande foto's.
- Landingspagina's. Een zachte zoom houdt een launchpagina levendig.
Wees zuinig met beweging. Eén bewegend beeld op een pagina is een blikvanger. Meerdere loops die om aandacht vechten maken de pagina lastiger te lezen en geven niets de kans om eruit te springen.
Welke beweging voor welke plek
| Beweging | Wat het doet | Beste plek |
|---|---|---|
| Rustige zoom in | Beweegt langzaam naar het product toe | Hero op de homepage |
| Rustige zoom uit | Onthult het product en de omgeving | Launch- en landingspagina's |
| Zachte pan | Glijdt zijwaarts over het beeld | Brede categoriebanners |
| Focusverschuiving | Verlegt de scherpte naar een detail | Productgalerijen, materialen |
| Subtiele drift | Een nauwelijks zichtbaar zweven | Minimalistische, rustige pagina's |
Waarom het product niet mag bewegen
Het idee achter een bewegende productfoto is dat die naast je stilstaande foto's kan staan zonder uit de toon te vallen. Dat lukt alleen als het product zelf stil en onveranderd blijft: dezelfde positie, dezelfde vorm, hetzelfde etiket, dezelfde kleur, van het eerste tot het laatste frame. Als alleen de camera en het licht bewegen, krijgt de pagina leven zonder haar rust te verliezen, en blijft het product herkenbaar van jou.
Toevoegen aan je site
Een bewegend productbeeld is een korte MP4 die je gebruikt waar normaal een afbeelding staat: een video die vanzelf start, loopt en geen geluid heeft. De meeste shopthema's en pagebuilders hebben een videoblok met precies die opties. Voeg je het met de hand toe, dan ziet de code er zo uit:
<video autoplay muted loop playsinline poster="product-still.jpg">
<source src="product-loop.mp4" type="video/mp4">
</video>- muted is verplicht voor autoplay. Browsers blokkeren automatisch afspelen mét geluid, maar zoals het autoplay-beleid van Chrome het stelt: autoplay zonder geluid is altijd toegestaan.
- playsinline houdt de video op telefoons in de pagina in plaats van hem schermvullend te openen.
- poster toont de stilstaande foto terwijl de video laadt, zodat de plek nooit leeg is.
Houd rekening met minder beweging
Sommige bezoekers zetten animaties uit in hun apparaatinstellingen, voor het comfort of om medische redenen. Browsers geven die keuze door via de instelling prefers-reduced-motion, die herkent of iemand op zijn apparaat heeft ingesteld dat niet-essentiële beweging beperkt moet worden. Laat die bezoekers de stilstaande foto zien:
@media (prefers-reduced-motion: reduce) {
.product-loop { display: none; }
.product-still { display: block; }
}Een rustige loop is per definitie niet-essentiële beweging, dus dit kost je niets en maakt de pagina bruikbaar voor iedereen.
Houd het licht
- Houd het kort. Een paar seconden die netjes doorlopen zijn genoeg.
- Kies het formaat van de plek. Een banner heeft geen grotere video nodig dan de breedte waarop hij getoond wordt.
- Rustige beweging comprimeert beter. Trage, kleine bewegingen leveren kleinere bestanden op dan snelle.
- Meet na het toevoegen. Check je laadtijd voor en na, zeker op mobiel.
De loops maken in Shoupapp
De bewegende productfoto's van Shoupapp zijn hier precies voor gemaakt. Je kiest een foto uit je bibliotheek, kiest een beweging (rustige zoom in, rustige zoom uit, zachte pan, focusverschuiving of subtiele drift) of laat er een kiezen die bij de foto past, en kiest het formaat: staand 3:4, vierkant, verticaal 9:16, liggend 4:3 of breed 16:9. Elke clip duurt vijf seconden en komt terug als MP4, zonder dat je een prompt hoeft te schrijven. Download hem, gebruik de originele foto als poster en fallback, en zet de loop op de plek waar de afbeelding stond.
Wanneer je meer beweging nodig hebt
Bewegende beelden zijn bewust rustig. Voor advertenties en listings die echte beweging vragen, past een productvideo beter. Voor Reels en TikTok is dat een korte verticale film met meerdere shots.
Tekst over een bewegend beeld
Een hero heeft vaak een kop en een knop over het beeld. Met beweging eronder wordt leesbaarheid nog belangrijker:
- Zet tekst over het rustige deel van het beeld, niet over het gebied waar de camera naartoe beweegt.
- Gebruik een zachte gradient of schaduwlaag achter de tekst als de achtergrond tijdens de loop van helderheid verandert.
- Houd de beweging zacht, zodat de tekst niet lijkt te schuiven.
De loop naadloos maken
Een zichtbare sprong bij het herstarten van de video breekt het rustige effect. Trage, gelijkmatige bewegingen, zoals een rustige zoom of een zachte pan, verbergen het loop-punt het best. Valt de sprong toch op, zet de loop dan op een plek waar hij één keer speelt en op het laatste frame stilstaat, of kies een beweging die begint en eindigt bij een vergelijkbare uitsnede.
Op mobiel
Telefoons tonen de hero kleiner en vaak hoger. Maak een aparte verticale of staande loop voor de mobiele layout als je thema dat toelaat, in plaats van een brede loop te laten bijsnijden. Op trage verbindingen draagt de posterafbeelding de pagina tot de video geladen is, dus kies een poster die op zichzelf ook werkt.
Vragen over bewegende productfoto's
Gaat het product bewegen of veranderen?
Het is zo opgezet dat dat niet gebeurt: alleen de camera en het licht bewegen. Bekijk elke clip voor je hem gebruikt.
Mag ik een bewegend beeld gebruiken in een marketplace-listing?
Waar een marketplace productvideo's accepteert wel, maar een rustige loop is vooral gemaakt voor je eigen website.
Welke foto animeer ik als eerste?
Die bovenaan je homepage. Dat is de plek waar een beetje beweging door de meeste bezoekers gezien wordt.