Abres una landing page desde tu celular en Lima, la imagen del hero tarda 6 segundos en cargar y lo primero que ves es un rectángulo gris. Ya perdiste al visitante. En Perú, donde las conexiones móviles no siempre son las más rápidas de la región, cada kilobyte de más en tus imágenes es un cliente potencial que se va.
Las imágenes y videos de tu landing page tienen un trabajo doble: deben verse profesionales para generar confianza y, al mismo tiempo, pesar lo mínimo posible para no arruinar la velocidad de carga. Según datos de Google, el 53% de los usuarios abandona una página móvil que tarda más de 3 segundos en cargar. Y las imágenes suelen representar entre el 50% y el 70% del peso total de una landing page.
En esta guía vas a aprender qué formatos usar, cómo comprimir sin perder calidad visible, cuándo tiene sentido meter un video y qué herramientas gratuitas te resuelven la vida.
Tabla de Contenidos
- 1 Imágenes que venden vs imágenes decorativas
- 2 Formatos de imagen: JPEG, PNG, WebP y AVIF
- 3 Tamaños y resoluciones por sección
- 4 Compresión de imágenes sin perder calidad visible
- 5 Video en landing pages: cuándo sí y cuándo no
- 6 Lazy loading: carga solo lo que el usuario ve
- 7 Bancos de imágenes gratuitos que funcionan para landing pages
- 8 Preguntas frecuentes sobre imágenes y videos en landing pages
- 9 Tus imágenes pueden estar ahuyentando clientes
Imágenes que venden vs imágenes decorativas
Antes de hablar de formatos y compresión, hay una pregunta más importante: ¿esa imagen necesita estar ahí?
Cada imagen en tu landing page debería cumplir una función específica. Mostrar tu producto en uso, reforzar la propuesta de valor, presentar al equipo o ilustrar un beneficio concreto. Si la imagen no hace ninguna de esas cosas, probablemente está ocupando espacio que podría ir mejor utilizado.
Las imágenes de stock genéricas (gente sonriendo en una oficina, apretones de manos corporativos, post-its de colores en una pizarra) no generan confianza. El usuario las ha visto miles de veces y su cerebro las filtra automáticamente. Si vendes un servicio en Lima, una foto real de tu oficina, de tu equipo o de un proyecto terminado vale más que cualquier imagen de banco.
Para la sección hero de tu landing page, usa una imagen o video que comunique de inmediato de qué trata tu negocio. Si vendes tortas personalizadas en Miraflores, pon una foto de tus tortas, no una imagen genérica de una panadería europea.
Formatos de imagen: JPEG, PNG, WebP y AVIF
Cada formato tiene su razón de existir. Elegir el correcto te puede ahorrar entre un 30% y un 80% del peso del archivo sin que el ojo humano note la diferencia.
| Formato | Peso promedio | Calidad visual | Transparencia | Soporte navegadores | Mejor uso |
|---|---|---|---|---|---|
| JPEG | Medio | Buena (con artefactos en compresión alta) | No | 100% | Fotos, hero images |
| PNG | Alto | Excelente (sin pérdida) | Sí | 100% | Logos, iconos, gráficos con transparencia |
| WebP | Bajo (25-35% menor que JPEG) | Muy buena | Sí | 97%+ (todos los navegadores modernos) | Reemplazo de JPEG y PNG en web |
| AVIF | Muy bajo (hasta 50% menor que WebP) | Excelente | Sí | ~92% (Chrome, Firefox, Safari 16.4+) | Máxima compresión para fotos |
| SVG | Mínimo | Perfecta (vectorial) | Sí | 100% | Iconos, logos, ilustraciones simples |
La recomendación actual es clara: usa WebP como formato principal para todas las imágenes de tu landing page. Tiene soporte en el 97% de los navegadores, pesa significativamente menos que JPEG y admite transparencia. Si tu sitio corre en WordPress, plugins como ShortPixel o Imagify convierten automáticamente tus imágenes a WebP al subirlas.
AVIF es el futuro, pero todavía no tiene soporte universal. Úsalo como formato preferido con un fallback a WebP usando la etiqueta <picture> de HTML.
Tamaños y resoluciones por sección
No todas las imágenes de tu landing page necesitan el mismo tamaño. Subir una foto de 4000px de ancho para mostrarla a 600px es desperdiciar banda ancha.
| Sección de la landing page | Ancho recomendado (px) | Proporción | Peso máximo sugerido |
|---|---|---|---|
| Hero / Banner principal | 1920 | 16:9 o 3:2 | 150-200 KB (WebP) |
| Imágenes de producto/servicio | 800-1200 | Variable | 80-120 KB |
| Testimonios (foto de persona) | 150-200 | 1:1 (cuadrada) | 15-30 KB |
| Logos de clientes | 200-300 | Variable | 5-15 KB (SVG ideal) |
| Iconos de beneficios | 64-128 | 1:1 | 2-5 KB (SVG) |
| Fondo de sección | 1920 | Según diseño | 100-150 KB |
Para dispositivos con pantalla Retina (la mayoría de smartphones actuales), multiplica el ancho por 2. Es decir, si tu imagen se muestra a 600px, exporta a 1200px. Pero siempre comprime después. El archivo final no debería pesar más de lo indicado en la tabla.
Compresión de imágenes sin perder calidad visible
La compresión es donde está la verdadera ganancia. Una imagen de 1.2 MB puede bajar a 150 KB sin que nadie note la diferencia en pantalla.
Herramientas gratuitas que funcionan bien:
- TinyPNG / TinyJPG (tinypng.com): compresión online, arrastra y suelta. Gratis hasta 20 imágenes por lote. Reduce JPEG y PNG entre un 40% y un 70%.
- ShortPixel: plugin de WordPress que comprime automáticamente cada imagen que subes. Convierte a WebP. 100 imágenes gratis al mes.
- Squoosh (squoosh.app): herramienta de Google. Te deja comparar visualmente el antes y después de la compresión. Soporta WebP y AVIF.
- Imagify: otro plugin de WordPress con buena integración. Comprime en tres niveles: Normal, Agresivo y Ultra.
Un flujo de trabajo eficiente: exporta la imagen desde tu editor (Canva, Figma, Photoshop) al tamaño correcto, luego pásala por Squoosh o TinyPNG para comprimir, y finalmente súbela a tu landing page. Si usas WordPress con ShortPixel, el segundo paso se automatiza.
Video en landing pages: cuándo sí y cuándo no
Un video bien colocado puede aumentar las conversiones de una landing page entre un 20% y un 80%, según distintos estudios de marketing. Pero un video mal implementado puede triplicar el tiempo de carga y hacer que el visitante abandone antes de ver el primer frame.
Cuándo usar video en tu landing page:
- Para demostrar un producto o servicio que es difícil de explicar solo con texto (software, procesos, transformaciones antes/después).
- Para testimonios de clientes. Un video de 30 segundos de un cliente real genera más confianza que un texto con foto.
- Para el hero, si tienes un video corto (10-15 segundos) que transmita la esencia de tu marca.
Cuándo NO usar video:
- Si tu conexión objetivo es móvil y el público está en zonas con internet lento.
- Si el video no aporta información que el texto no pueda cubrir.
- Si no tienes un video profesional. Un video con mala iluminación y audio deficiente resta más de lo que suma.
Para profundizar en estrategias de video, tenemos una guía completa sobre landing pages con video.
Reglas técnicas para video en landing pages: nunca subas el archivo de video directamente a tu servidor. Usa YouTube o Vimeo como hosting y embebe el reproductor. Si quieres autoplay en el hero (sin audio), usa un archivo MP4 comprimido de máximo 2-3 MB con lazy loading. Para conexiones peruanas, cada segundo de espera cuenta.
Lazy loading: carga solo lo que el usuario ve
Lazy loading es una técnica que carga las imágenes solo cuando el usuario hace scroll hasta ellas. En vez de descargar las 15 imágenes de tu landing page de golpe, el navegador carga solo las visibles en pantalla y va descargando el resto conforme el visitante baja.
El impacto es directo: si tu landing page tiene 10 imágenes y el visitante solo ve las primeras 3 antes de convertir, te ahorraste la descarga de 7 imágenes. Eso puede significar 500 KB o más de diferencia en el peso inicial de la página.
Implementar lazy loading es sencillo. En HTML moderno, solo necesitas agregar loading=»lazy» a tus etiquetas de imagen. WordPress lo activa por defecto desde la versión 5.5. Si usas Elementor u otro page builder, busca la opción en la configuración de cada imagen.
Una excepción: las imágenes del primer pantallazo (above the fold) NO deben tener lazy loading. Esas necesitan cargar de inmediato para que el usuario vea contenido al instante. Solo aplica lazy loading a las imágenes que están debajo del pliegue.
La velocidad de carga de tu landing page depende en gran medida de cómo manejes las imágenes. Google penaliza en sus Core Web Vitals las páginas con imágenes pesadas que desplazan el contenido mientras cargan (CLS) o que tardan en renderizar el contenido principal (LCP).
Bancos de imágenes gratuitos que funcionan para landing pages
Si todavía no tienes fotos propias (algo que deberías resolver pronto), estos bancos de imágenes ofrecen contenido de calidad sin costo:
- Unsplash: fotos de alta resolución, modernas y con estética profesional. La mejor opción general.
- Pexels: similar a Unsplash, con buena variedad y licencia libre.
- Pixabay: incluye fotos, ilustraciones y vectores. Calidad más variable.
- Freepik: vectores, iconos y PSD. La versión gratuita requiere atribución.
- unDraw: ilustraciones vectoriales en SVG personalizables por color. Perfectas para secciones de beneficios o features.
Un detalle que muchos pasan por alto: busca imágenes que reflejen la diversidad peruana y latinoamericana. Una landing page de un restaurante en Surco con fotos de modelos nórdicos genera una desconexión que el visitante percibe, aunque no la racionalice.
Preguntas frecuentes sobre imágenes y videos en landing pages
¿Es mejor usar fotos de stock o fotos propias?
Fotos propias, siempre que sean de calidad aceptable. Una foto real de tu producto, equipo o local genera más confianza que cualquier imagen de stock. Si todavía no las tienes, usa stock de forma temporal y planifica una sesión fotográfica. No necesitas un estudio profesional: un celular con buena cámara, luz natural y fondo limpio dan resultados decentes.
¿Qué formato de imagen debería usar para mi landing page?
WebP para la mayoría de imágenes (fotos, banners, fondos). SVG para logos, iconos y gráficos simples. PNG solo si necesitas transparencia y tu público usa navegadores que no soportan WebP (cada vez menos probable). JPEG como último recurso o fallback.
¿El video reduce la velocidad de mi landing page?
Depende de cómo lo implementes. Si subes un MP4 de 50 MB directo a tu servidor, sí. Si usas un embed de YouTube o Vimeo con carga diferida (lazy loading), el impacto es mínimo porque el video solo se descarga cuando el usuario le da play o hace scroll hasta él.
¿Cuántas imágenes debería tener mi landing page?
No hay un número mágico, pero la regla es: cada imagen debe justificar su existencia. Una landing page típica de servicios puede funcionar con 5-8 imágenes: hero, 2-3 de producto/servicio, logos de clientes y fotos de testimonios. Más no es necesariamente mejor si cada imagen adicional suma peso de carga.
¿Dónde puedo conseguir imágenes gratis para mi landing page?
Unsplash y Pexels son los más confiables: fotos profesionales con licencia libre para uso comercial. Para iconos y vectores, unDraw y Flaticon. Pero invierte en fotos propias lo antes posible, porque eso diferencia tu landing page de las demás.
Tus imágenes pueden estar ahuyentando clientes
Si tu landing page tarda más de 3 segundos en cargar, las imágenes probablemente son la causa. No necesitas ser diseñador ni desarrollador para optimizarlas: comprimir, elegir el formato correcto y activar lazy loading te puede quitar el 60% del problema.
En KOM optimizamos cada landing page para que cargue rápido en cualquier conexión peruana, con imágenes en WebP, lazy loading y tamaños adaptados a cada dispositivo. Precios desde S/950 para emprendedores y MYPEs. Escríbenos por WhatsApp y revisamos tu caso.
