Las imágenes y el video refuerzan tu mensaje cuando muestran el resultado que el visitante quiere obtener, no solo el producto que vendes.
Qué hace que un recurso visual funcione en una landing page
Un visual no está ahí para decorar. Está ahí para acelerar la decisión del visitante.
Cada imagen o video en tu landing page debe cumplir una función concreta: demostrar un beneficio, generar confianza o reducir la fricción. Si no cumple ninguna de esas tres funciones, quítala.
Tres funciones de los recursos visuales:
| Función | Ejemplo concreto |
|---|---|
| Demostrar un beneficio | Foto del antes/después de un producto de limpieza |
| Generar confianza | Video testimonial de un cliente real con nombre y ciudad |
| Reducir fricción | Captura de pantalla del proceso de registro en 3 pasos |
Qué tipo de imágenes funcionan mejor
Existen tres categorías de imágenes para landing pages. Cada una tiene un propósito distinto.
Imágenes de contexto (hero image)
La hero image es la primera imagen que ve el visitante. Debe mostrar a una persona usando tu producto o experimentando el resultado que ofreces.
Ejemplo: si vendes un curso de finanzas personales para trabajadores en México, la hero image ideal muestra a una persona frente a una pantalla con una gráfica de ahorros crecientes, no una foto genérica de billetes apilados.
Las fotos de banco de imágenes con personas sonriendo sin contexto no funcionan. El visitante las ignora porque ya las ha visto en cientos de sitios.
Criterios para una buena hero image:
- Muestra el resultado final, no el proceso.
- Incluye una persona que se parezca a tu cliente ideal (edad, contexto, vestimenta).
- Tiene un fondo limpio que no compite con el titular.
- Pesa menos de 150 KB en formato WebP.
Imágenes de producto o servicio
Si vendes algo físico, el visitante necesita ver el producto desde varios ángulos. Si vendes algo digital, muestra capturas de pantalla reales de la interfaz o del contenido.
Ejemplo: Liverpool usa imágenes de producto con múltiples vistas y la opción de hacer zoom. Ese nivel de detalle reduce la incertidumbre del comprador. Aplica el mismo principio en tu landing page.
No uses renders perfectos si el producto real no se ve así. La disonancia entre la imagen y el producto real genera devoluciones y malas reseñas.
Imágenes de prueba social visual
Estas son capturas de conversaciones, fotos de clientes usando tu producto o pantallas de resultados. Son las más poderosas porque son difíciles de fabricar.
Ejemplo: si tu cliente logró vender $85,000 en un mes usando tu método, una captura de su tablero de Mercado Libre con esa cifra vale más que cualquier testimonio de texto.
Cuándo y cómo usar video
El video es el formato con mayor poder de persuasión en una landing page. Pero también es el que más daño puede causar si se usa mal.
Cuándo agregar un video de presentación
Agrega un video cuando tu producto o servicio requiere explicación. Si el visitante necesita más de diez segundos para entender qué ofreces, un video lo ayuda.
Situaciones donde el video convierte mejor que el texto:
- Cursos en línea: el instructor habla directamente a cámara y genera confianza.
- Software o apps: una demo en pantalla muestra el flujo de uso en segundos.
- Servicios profesionales: un video del equipo humaniza la marca.
- Productos con instalación o preparación: el video elimina la duda de "¿podré usarlo?"
Cuándo NO agregar un video
No pongas video si no tienes producción mínima aceptable. Un video con mala iluminación, audio con eco o lectura de guión hace más daño que no tener video.
También evita el video si tu producto es simple y el texto lo explica en dos líneas. Un video innecesario solo ralentiza la página.
Duración ideal
La duración recomendada para un video de landing page es entre 60 y 90 segundos. En ese tiempo puedes cubrir el problema, la solución y el llamado a la acción.
Videos de más de tres minutos pierden al 60% de los espectadores antes del minuto dos. Si tu video es largo, pon el mensaje más importante en los primeros 30 segundos.
Estructura de un video de landing page efectivo
| Segmento | Duración | Contenido |
|---|---|---|
| Apertura | 0–10 s | Nombra el problema del visitante |
| Solución | 10–40 s | Presenta tu producto y su beneficio clave |
| Prueba | 40–70 s | Muestra un resultado o testimonio breve |
| CTA | 70–90 s | Indica exactamente qué hacer ahora |
Velocidad de carga: el factor que más se ignora
Una landing page que tarda más de 3 segundos en cargar pierde hasta el 40% de sus visitantes antes de que vean el primer elemento. Los recursos visuales son la causa más común de páginas lentas.
Reglas de peso para imágenes
- Hero image: máximo 150 KB en WebP.
- Imágenes secundarias: máximo 80 KB cada una.
- Iconos y gráficos simples: usa SVG, pesan menos de 5 KB.
- Nunca subas una imagen directamente desde tu cámara. Una foto de iPhone puede pesar 4 MB. Eso destruye tu tasa de conversión.
Herramientas gratuitas para comprimir imágenes sin perder calidad: Squoosh (squoosh.app) y TinyPNG. Ambas son gratuitas y fáciles de usar.
Reglas para video sin dañar la velocidad
Nunca subas el video directamente a tu servidor. Usa YouTube o Vimeo y embebe el video con carga diferida (lazy load). Así la página carga rápido y el video solo se activa cuando el visitante hace scroll hasta él.
Si usas un video como fondo (hero video), limita su duración a 10–15 segundos, quita el audio y usa una versión comprimida en formato MP4 de menos de 2 MB.
Errores comunes
Error 1: Usar imágenes de banco de imágenes con personas fingiendo trabajar. Estas fotos no generan identificación. El visitante las reconoce al instante como genéricas. Usa fotos reales de tu equipo, tus clientes o tu producto en contexto real.
Error 2: Poner el video en autoplay con sonido. El autoplay con sonido molesta al visitante y genera rebote inmediato. Si usas autoplay, que sea sin sonido y con subtítulos. El visitante activa el sonido si le interesa.
Error 3: Usar imágenes sin texto alternativo (alt text). El alt text no es solo accesibilidad. También ayuda al SEO y describe la imagen cuando no carga. Escribe un alt text descriptivo: en lugar de "imagen1.jpg", escribe "pantalla del tablero de ventas con resultados del mes".
Error 4: Saturar la página con imágenes decorativas. Cada imagen que no cumple una función persuasiva aumenta el peso de la página y distrae al visitante. Menos imágenes bien elegidas convierten más que muchas imágenes irrelevantes.
Error 5: No optimizar para móvil. Más del 70% del tráfico web en México llega desde dispositivos móviles. Una imagen que se ve bien en escritorio puede cortarse o verse pixelada en una pantalla de 6 pulgadas. Revisa siempre la versión móvil antes de publicar.
Cómo elegir entre imagen y video para cada sección
| Sección de la landing | Recomendación |
|---|---|
| Hero (primera sección) | Imagen de contexto o video corto (máx. 90 s) |
| Beneficios | Iconos SVG + imagen de producto |
| Prueba social | Captura de resultados reales o video testimonial |
| Cómo funciona | Capturas de pantalla o ilustraciones simples |
| CTA final | Sin imágenes pesadas, solo texto y botón |
Puntos clave
- Cada imagen debe cumplir una función: demostrar un beneficio, generar confianza o reducir fricción. Si no cumple ninguna, elimínala.
- La hero image debe mostrar el resultado que el visitante quiere obtener, no el producto en abstracto.
- Agrega video cuando tu oferta requiere explicación. La duración ideal es de 60 a 90 segundos.
- Ningún video o imagen vale la pena si hace que tu página tarde más de 3 segundos en cargar. Comprime siempre antes de publicar.
- Más del 70% del tráfico en México viene de móvil. Revisa cada recurso visual en pantalla pequeña antes de lanzar.