Shoupapp
Una foto fija puede hacer que una portada se vea plana. Un vídeo de fondo completo puede hacerla pesada. Las imágenes de producto animadas están a medio camino: unos segundos de movimiento suave en los que la cámara y la luz se mueven, pero el producto se queda exactamente donde está. En esta guía verás cuándo elegir una imagen animada en lugar de un vídeo o un GIF, qué movimiento encaja en cada zona de una web y cómo añadirla sin perjudicar la accesibilidad ni la velocidad de carga.
¿Imagen animada, vídeo o GIF?
| Imagen de producto animada | Vídeo de producto | GIF | |
|---|---|---|---|
| Qué se mueve | Solo la cámara y la luz | La cámara, la escena y a veces el producto | Cualquier cosa |
| Sensación en la página | Tranquila, premium | Llama la atención | Suele verse barato con fotos |
| Calidad de imagen | Alta, en MP4 | Alta, en MP4 | Colores limitados, archivos grandes |
| Ideal para | Cabeceras, banners, galerías | Anuncios, fichas, landing pages | Gráficos pequeños e iconos |
Para contenido fotográfico, un MP4 casi siempre es el mejor archivo: conserva más color y detalle con menos peso que un GIF.
Dónde funciona el movimiento suave en una web
- Cabecera de la portada. Un bucle tranquilo atrae la mirada sin el peso de un vídeo completo.
- Banners de categoría. Un paneo lento aporta profundidad encima de la parrilla de productos.
- Galerías de producto. Un cambio de enfoque destaca un material o un detalle, junto a las fotos fijas.
- Landing pages. Un zoom suave evita que una página de lanzamiento se vea estática.
Usa el movimiento con moderación. Una imagen animada en una página es un punto focal. Varios bucles compitiendo entre sí hacen la página más difícil de leer y no dejan que nada destaque.
Qué movimiento para cada zona
| Movimiento | Qué hace | Mejor ubicación |
|---|---|---|
| Zoom suave de acercamiento | Avanza despacio hacia el producto | Cabecera de la portada |
| Zoom suave de alejamiento | Revela el producto y su entorno | Páginas de lanzamiento y landings |
| Paneo suave | Se desliza lateralmente por la imagen | Banners de categoría anchos |
| Cambio de enfoque | Lleva el foco a un detalle | Galerías de producto, materiales |
| Deriva sutil | Una flotación casi imperceptible | Páginas minimalistas y tranquilas |
Por qué el producto no debe moverse
La gracia de una imagen de producto animada es que puede convivir con tus fotos fijas sin desentonar. Eso solo funciona si el producto se mantiene quieto y sin cambios: misma posición, misma forma, misma etiqueta, mismo color, desde el primer fotograma hasta el último. Cuando solo se mueven la cámara y la luz, la página gana vida sin perder calma y el producto sigue siendo reconociblemente el tuyo.
Cómo añadirla a tu web
Una imagen de producto animada es un MP4 corto que se usa donde iría una imagen: un vídeo que se reproduce solo, se repite en bucle y no tiene sonido. La mayoría de plantillas de tienda y maquetadores tienen un bloque de vídeo con esas opciones. Si lo añades a mano, el marcado queda así:
<video autoplay muted loop playsinline poster="product-still.jpg">
<source src="product-loop.mp4" type="video/mp4">
</video>- muted es obligatorio para la reproducción automática. Los navegadores bloquean el autoplay con sonido pero, como dice la política de autoplay de Chrome, «la reproducción automática silenciada siempre está permitida».
- playsinline mantiene el vídeo dentro de la página en el móvil en lugar de abrirlo a pantalla completa.
- poster muestra la foto fija mientras carga el vídeo, así el hueco nunca se queda vacío.
Respeta la reducción de movimiento
Hay visitantes que desactivan las animaciones en los ajustes de su dispositivo, por comodidad o por motivos médicos. Los navegadores exponen esa elección mediante el ajuste prefers-reduced-motion, que detecta «si el usuario ha activado en su dispositivo una opción para minimizar la cantidad de movimiento no esencial». A esas personas muéstrales la imagen fija:
@media (prefers-reduced-motion: reduce) {
.product-loop { display: none; }
.product-still { display: block; }
}Un bucle suave es movimiento no esencial por definición, así que esto no te cuesta nada y hace que la página sea usable para todo el mundo.
Mantenlo ligero
- Que sea corto. Con unos pocos segundos que enlacen bien en bucle es suficiente.
- Ajusta el tamaño al hueco. Un banner no necesita un vídeo más grande que el ancho al que se muestra.
- El movimiento tranquilo comprime mejor. Los movimientos lentos y pequeños generan archivos más ligeros que los rápidos.
- Mide después de añadirlo. Revisa la velocidad de tu página antes y después, sobre todo en móvil.
Cómo crear los bucles en Shoupapp
Las fotos de producto animadas de Shoupapp están pensadas justo para esto. Eliges una foto de tu biblioteca, seleccionas un movimiento (zoom suave de acercamiento, zoom suave de alejamiento, paneo suave, cambio de enfoque o deriva sutil) o dejas que se elija el que mejor encaje con la foto, y escoges el formato: vertical 3:4, cuadrado, vertical 9:16, horizontal 4:3 o panorámico 16:9. Cada clip dura cinco segundos y se entrega como MP4, sin tener que escribir ningún prompt. Descárgalo, guarda la foto original como poster y alternativa, y coloca el bucle donde estaba la imagen.
Cuando necesitas más movimiento
Las imágenes animadas son tranquilas por diseño. Para anuncios y fichas que necesitan movimiento de verdad, encaja mejor un vídeo de producto. Y para Reels y TikTok, un vídeo vertical corto con varios planos.
Texto sobre una imagen en movimiento
Una cabecera suele llevar un titular y un botón sobre la imagen. Con movimiento debajo, la legibilidad importa todavía más:
- Coloca el texto sobre la parte tranquila del encuadre, no sobre la zona hacia la que avanza la cámara.
- Usa un degradado o una sombra suave detrás del texto si el fondo cambia de brillo durante el bucle.
- Mantén el movimiento suave, para que el texto no parezca que se desliza.
Cómo lograr un bucle sin costuras
Un salto visible al reiniciarse el vídeo rompe el efecto de calma. Los movimientos lentos y constantes, como un zoom suave o un paneo suave, son los que mejor disimulan el punto de empalme. Si el salto se nota, coloca el bucle en un sitio donde se reproduzca una sola vez y se quede en el último fotograma, o usa un movimiento que empiece y termine con un encuadre parecido.
En el móvil
En el móvil la cabecera se ve más pequeña y a menudo más alta. Si tu plantilla lo permite, crea un bucle vertical aparte para el diseño móvil en vez de dejar que se recorte uno panorámico. Con conexiones lentas, la imagen poster sostiene la página hasta que carga el vídeo, así que elige un poster que funcione por sí solo.
Dudas sobre las imágenes animadas
¿El producto se moverá o cambiará?
Está diseñado para que no: solo se mueven la cámara y la luz. Revisa cada clip antes de usarlo.
¿Puedo usar una imagen animada en una ficha de marketplace?
Donde el marketplace acepte vídeos de producto, sí, pero un bucle tranquilo está pensado sobre todo para tu propia web.
¿Qué foto animo primero?
La que está arriba del todo en tu portada. Es el único sitio donde un poco de movimiento lo ve el mayor número de visitantes.