Un comprador del sector industrial llega a tu sitio web y ve como imagen principal un elegante dashboard de SaaS. Llega un prospecto fintech y recibe la misma imagen. Ninguno siente que la página se haya hecho para él, y ambos se van en segundos. El problema no es que falten imágenes en la landing page. El problema es que se muestran las mismas imágenes a todo el mundo, sin importar quién sea ni qué necesite.
Las imágenes de las landing pages se eligen una vez, normalmente quien diseñó la página, y después se muestran a todos los visitantes. En una web B2B con varios sectores y roles de comprador, eso significa que la mayoría de los visitantes ven una imagen del mundo de otra persona. Adaptar la imagen principal al sector, el rol o la fase del visitante es una de las formas de personalización más baratas, porque no necesita texto nuevo, pero solo ayuda si la imagen dice algo concreto. Este artículo explica para qué sirve cada tipo de imagen, cuándo compensa el vídeo, cómo asignar elementos visuales a segmentos y los detalles de rendimiento y accesibilidad que deciden si todo esto funciona.
Por qué las imágenes genéricas de landing pages fallan en B2B
Las imágenes suelen ser lo primero en lo que se fija la vista del visitante, así que moldean la primera impresión antes de que lea el titular. Una imagen genérica no hace mucho daño por sí sola; el coste es la oportunidad perdida de mostrarle algo que reconozca.
Para las empresas B2B con varios buyer personas, un único conjunto de imágenes es una desventaja estructural. Un VP of Engineering que evalúa tu plataforma tiene expectativas visuales distintas de las de un CMO que hace lo mismo. Uno quiere ver la arquitectura técnica, las integraciones o los flujos de datos. El otro responde a paneles, métricas de campaña o gráficos de ROI. Cuando ambos ven la misma foto genérica de una oficina, ninguno recibe la señal de relevancia que le hace seguir leyendo. Lo mismo se aplica al anuncio que los trajo; nuestra guía sobre cuándo usar anuncios de display adaptables explica cómo mantener las creatividades de display coherentes con la página.
Las fotos de stock de gente estrechándose la mano en una oficina acristalada son el culpable habitual. Se reconocen fácilmente como stock, así que no aportan nada, y ocupan el espacio donde podría haber una captura del producto, un cliente real o un diagrama del flujo de trabajo. Si vas a probar una sola cosa en los elementos visuales de una landing page, enfrenta una imagen real (tu producto, tus clientes, tu equipo) a la de stock.
Adaptar los elementos visuales a los segmentos de visitantes
La idea detrás de las imágenes personalizadas es acortar el tiempo entre la llegada y el "esto es para mí". La forma práctica de hacerlo es asignar variantes de imagen a segmentos que ya sigues. Si usas la identificación de visitantes para detectar el sector, el tamaño o la ubicación de la empresa, esos mismos datos pueden decidir qué imágenes aparecen en la página.
Formas de asignar imágenes a los segmentos:
Imágenes según el sector. Muestra una planta de producción a los visitantes del sector industrial. Una mesa de trading a los de servicios financieros. Un flujo de trabajo hospitalario a los del sector salud. El producto que se vende es el mismo, pero el contexto visual cambia para reflejar el día a día del visitante.
Elementos visuales por rol. Los compradores técnicos responden a diagramas de arquitectura, fragmentos de código y flujos de integración. Los compradores de negocio responden a paneles, gráficos y métricas de resultados. Adaptar el lenguaje visual a la experiencia del comprador demuestra que entiendes su punto de vista.
Imágenes según la fase. A los visitantes nuevos les sirven ilustraciones de beneficios de alto nivel que expliquen lo que haces. Los visitantes recurrentes que ya han consumido contenido de producto responden mejor a capturas detalladas, tablas comparativas o pruebas de clientes.
Tamaño de la empresa. Los visitantes enterprise pueden responder a imágenes que transmiten escala, certificaciones de seguridad o flujos de trabajo con varios equipos. Las empresas más pequeñas conectan con imágenes que muestran rapidez, sencillez y resultados rápidos.
Tipos de imagen y cuándo funciona mejor cada uno
Cada elemento visual cumple una función distinta en una landing page. Entender estas diferencias te ayuda a decidir de forma consciente qué personalizar y qué mantener estático.
Las imágenes hero crean la primera impresión y enmarcan toda la propuesta de valor. Ocupan el espacio más valioso de la página. Un hero que muestra el producto en uso, idealmente con datos o en un contexto que el visitante reconoce, dice más que un gráfico abstracto. En las páginas personalizadas, el hero es el primer elemento natural que variar, porque lo ve todo el que llega.
Las capturas de pantalla del producto aportan una prueba concreta de lo que vendes, pero pueden recargar las páginas si se usan sin cuidado. Una sola captura anotada que destaque las funcionalidades más relevantes para el caso de uso del visitante funciona mejor que varias sin anotar. Si tus datos de segmentación te dicen que a un visitante le importa la analítica, muestra el panel de analítica. Si le importan las integraciones, muestra el panel de integraciones.
Las ilustraciones y los gráficos a medida son excelentes para simplificar lo complejo. Cuando necesitas explicar un flujo de trabajo abstracto o un proceso de varios pasos, una ilustración a medida comunica en segundos lo que llevaría párrafos. Son especialmente útiles en páginas personalizadas donde la explicación debe adaptarse al nivel técnico del visitante. Anota qué elemento visual necesita cada sección en el brief de copy para landing pages para planificar diseño y copy a la vez.
Las imágenes de prueba social incluyen logotipos de clientes, fotos del equipo y miniaturas de casos de éxito. Se pueden personalizar mostrando logotipos del sector o del tramo de tamaño del visitante. A una empresa SaaS mid-market le tranquiliza más ver logotipos de otras empresas SaaS mid-market que logotipos de la Fortune 500 con los que no se identifica. Nuestros ejemplos de landing pages B2B muestran con qué elemento de prueba debería empezar cada tipo de página.
Las imágenes de fondo crean ambiente sin reclamar atención. Los degradados sutiles o los patrones geométricos suelen funcionar mejor que los fondos fotográficos porque aportan profundidad sin distraer. Rara vez necesitan personalización, ya que su función es acompañar, no señalar relevancia.
Vídeo en una landing page: cuándo se gana su sitio
El vídeo es el elemento visual más pesado que puedes añadir, tanto en peso de página como en la atención que exige. Nuestra opinión: un vídeo en una landing page debe responder a una pregunta que el visitante no puede responder con una captura de pantalla, normalmente "¿cómo se ve cuando alguien lo usa de verdad?". Si el vídeo repite el titular con música de fondo, una captura bien elegida hace el mismo trabajo más rápido. Para el vídeo más allá de las landing pages, consulta nuestra guía de vídeo marketing B2B.
Dónde suele rentabilizarse el vídeo en las páginas B2B:
- Demostraciones del producto en las páginas de demo y de registro. Entre sesenta y noventa segundos mostrando el flujo de trabajo principal permiten que el visitante se autocalifique antes de reservar una llamada. Mueve el cursor despacio y que la interfaz se lea bien al tamaño en que se reproduce.
- Historias de clientes en las páginas de fase avanzada. Un cliente que explica el problema con sus propias palabras es una prueba que un logo no puede dar. Colócala junto a la afirmación que respalda, no en una galería de vídeos aparte.
- Páginas de webinars y eventos. Un clip de 30 segundos del ponente demuestra que la sesión merece la pena. Después del evento, la grabación lo sustituye.
Y dónde no suele funcionar: como bucle de fondo con reproducción automática detrás del titular (compite con el texto y cuesta tiempo de carga) y como única forma de obtener información clave (muchos visitantes B2B navegan en el trabajo sin sonido).
Añadir vídeo sin ralentizar la página
- Usa una imagen de póster y carga el reproductor al hacer clic. Un vídeo incrustado completo de YouTube o Vimeo carga sus scripts antes de que nadie pulse play. La documentación de Lighthouse de Google recomienda cargar de forma diferida los elementos incrustados de terceros tras una fachada, una vista previa estática que se sustituye por el reproductor real al interactuar.
- Carga diferida de los vídeos incrustados bajo la parte visible. Añadir
loading="lazy"a los iframes aplaza los reproductores que están fuera de pantalla, como se describe en la guía de web.dev sobre lazy loading de iframes. - Subtitula todo. Los subtítulos sirven a quienes ven sin sonido y son un requisito de accesibilidad para los vídeos pregrabados con audio.
- Mantén el CTA visible sin el vídeo. El formulario o el botón nunca deberían depender de que alguien vea el vídeo hasta el final.
Cómo medir si el vídeo ayuda
La medición mejorada de GA4 registra los eventos video_start, video_progress y video_complete de los vídeos de YouTube insertados que tienen habilitada la compatibilidad con la API de JS. Hay dos cifras que importan más que las visualizaciones: la tasa de reproducción (reproducciones dividido entre visitantes de la página) y la tasa de conversión de quienes lo reprodujeron frente a quienes no. Cuidado con la segunda. Los visitantes que pulsan play ya están más comprometidos, así que una tasa de conversión más alta entre quienes lo ven no demuestra que el vídeo sea la causa. La prueba justa es un A/B test de la página con y sin vídeo, evaluado por conversiones, no por tiempo de visualización.
El vídeo también se presta a la personalización. Un visitante del sector industrial y uno del sector del software pueden ver el mismo recorrido grabado con dos conjuntos de datos de demo distintos, algo más barato de lo que parece una vez que el guion existe.
Jerarquía visual en páginas personalizadas
Las imágenes determinan cómo se mueven los visitantes por una página. En páginas con mucho texto, la gente tiende a recorrer la parte superior y después bajar por el lado izquierdo (el patrón en F); en páginas con poco contenido, la vista suele ir en zigzag de arriba a la izquierda a arriba a la derecha y hacia abajo. Coloca las imágenes teniendo en cuenta esos recorridos.
Coloca tu imagen principal personalizada en la parte superior de la F, donde se posa primero la mirada. Los elementos visuales de apoyo van a lo largo de la línea vertical de lectura. Si usas pistas direccionales en las imágenes, como la mirada de una persona o una flecha en un diagrama, haz que apunten hacia tu llamada a la acción y no en sentido contrario.
El tamaño crea jerarquía. Las imágenes más grandes indican importancia. Si quieres que un visitante de una cuenta objetivo se centre en un resultado o una capacidad concretos, haz que esa imagen sea el elemento visual dominante de la página. Las imágenes secundarias, como los logos de clientes o las capturas de apoyo, deben ser más pequeñas para reforzar sin competir.
Da espacio a la imagen principal. Una imagen clara y adaptada al segmento, con aire alrededor, se lee más rápido que tres imágenes apretadas compitiendo por la atención, y es una sola variante que mantener en lugar de tres.
Flujo de trabajo paso a paso para personalizar las imágenes de una landing page
Implantar la personalización de imágenes no exige reconstruir todo tu sitio. Este es un flujo de trabajo práctico que empieza en pequeño y escala.
Paso 1: elige tus segmentos cualificados más grandes. Extrae los datos de tu herramienta de analítica o de identificación de visitantes. ¿Qué sectores, tamaños de empresa o roles concentran la mayor parte de tu tráfico cualificado? Empieza por segmentos lo bastante grandes como para medirlos y lo bastante distintos como para que tenga sentido usar imágenes diferentes.
Paso 2: audita las imágenes actuales de tus landing pages. Haz una lista de todas las imágenes de tus landing pages con más tráfico. Para cada una, pregúntate: ¿conecta igual con los tres segmentos? Si es así, o es una imagen universal sólida o es una genérica que no conecta con nadie. Marca las imágenes en las que una variante específica por segmento podría aportar relevancia.
Paso 3: crea 2-3 variantes de imagen por cada espacio marcado. No necesitas un rediseño completo. Para las imágenes del hero, puede significar tres versiones del mismo diseño con distintas imágenes de fondo, distintas capturas del producto o distintas ilustraciones de casos de uso. Mantén la composición y la ubicación del CTA para que estés probando el contenido de la imagen, no la estructura de la página.
Paso 4: configura reglas de visualización por segmento. En tu plataforma de personalización, asigna cada variante a su segmento objetivo. Define una versión por defecto para los visitantes que no encajen en ningún segmento. Comprueba que aparecen las imágenes correctas para los visitantes correctos previsualizando con cuentas de prueba de cada segmento.
Paso 5: mide e itera. Mide la tasa de conversión por segmento, no solo la global. Una imagen principal que aumenta las conversiones de los visitantes del sector industrial puede empeorar el rendimiento con los visitantes SaaS. Haz tests A/B dentro de cada segmento para aislar el impacto de los cambios de imagen del de otros elementos de la página. Decide el tamaño de muestra antes de empezar el test (nuestra guía sobre el tamaño de muestra de un test A/B explica cómo), mantenlo al menos dos semanas completas y no lo pares antes de tiempo porque el panel tenga buena pinta.
Rendimiento técnico: velocidad frente a calidad visual
Un hero personalizado que llega tarde es peor que uno genérico que llega a tiempo. La imagen del hero suele ser el elemento Largest Contentful Paint, así que su tamaño y su orden de carga determinan lo rápida que parece la página.
Usa formatos modernos. La documentación de Google indica que las imágenes WebP con pérdida son un 25-34 % más pequeñas que JPEG comparables y las WebP sin pérdida, un 26 % más pequeñas que los PNG. AVIF suele comprimir aún más. Sirve AVIF o WebP con un JPEG de respaldo mediante el elemento <picture>.
En lugar de copiar los límites de tamaño de otros, fija un presupuesto para tus propias páginas: revisa el tamaño del archivo del hero y el LCP en PageSpeed Insights con un perfil móvil, y trata como un error cualquier variante notablemente más pesada que la versión por defecto.
Usa imágenes responsive con atributos srcset. Servir una imagen de 2000 px de ancho a un visitante en móvil desperdicia ancho de banda y retrasa el renderizado. Deja que los navegadores elijan la imagen del tamaño adecuado según el ancho del viewport. En las páginas personalizadas, esto significa que cada variante de imagen necesita su propio conjunto de tamaños responsive, pero las herramientas de build pueden automatizarlo.
No apliques carga diferida al hero. Está en la parte visible, así que la carga diferida lo retrasa; márcalo con fetchpriority="high" y aplica la carga diferida solo a las imágenes más abajo. Para las variantes por segmento, la configuración más limpia decide la variante en el servidor o en el edge, de modo que la imagen correcta esté en el HTML desde el principio. Si el cambio se hace en el cliente, reserva las dimensiones de la imagen para que el diseño no salte al cargarse.
Accesibilidad en todas las variantes de imagen
Cada variante de imagen personalizada necesita su propio texto alternativo. Una imagen de hero que muestra un flujo de fabricación debe tener un texto alternativo que describa esa escena, no un texto genérico que valga para cualquier variante. Los lectores de pantalla anuncian lo que hay en la página, y el texto alternativo debe corresponder a lo que ven realmente los visitantes videntes de ese segmento.
Un buen texto alternativo describe el contenido de la imagen de forma concisa y lo relaciona con el contexto. Mantenlo por debajo de 100 caracteres. Las imágenes decorativas (fondos, separadores) deben llevar atributos alt vacíos para que los lectores de pantalla las omitan. Las imágenes funcionales, como gráficos con enlace, necesitan un texto alternativo que describa el destino del enlace.
Cuando una imagen no carga, se muestra su texto alternativo, lo que significa que el texto alternativo sirve de respaldo incluso para visitantes videntes con conexiones lentas. Si tienes variantes de imagen personalizadas, es un motivo más para que cada variante tenga un texto alternativo único y descriptivo en lugar de un marcador compartido.
Errores habituales con las imágenes personalizadas
Los equipos que empiezan con la personalización de imágenes suelen personalizar de más. Cambiar todas las imágenes de la página según el segmento del visitante genera una carga de mantenimiento y diluye el impacto de los cambios que realmente importan. Centra la personalización en uno o dos espacios de imagen de mayor impacto (normalmente el hero y la sección principal de prueba social) y deja el resto igual.
Otro error habitual es usar los datos de segmento para hacer suposiciones que resultan intrusivas. Mostrar a un visitante el logo de su empresa antes de que se haya identificado cruza una línea. Mostrar imágenes relevantes para su sector es útil. Mostrar el edificio de su oficina inquieta. La diferencia está entre la relevancia contextual y la vigilancia.
Probar demasiadas variantes a la vez es un tercer error. Cuatro segmentos por tres espacios de imagen, con un par de variantes cada uno, ya dan decenas de combinaciones, muchas más de las que el tráfico B2B puede probar. Prueba una variable cada vez dentro de cada segmento, espera a la significación estadística y gana confianza en cada cambio antes de añadir más capas.
Para los equipos que siguen un plan más amplio de optimización de landing pages B2B, personalizar las imágenes es un buen primer paso porque requiere menos contenido nuevo que personalizar los textos. El problema es que depende de tener imágenes reales y específicas de cada segmento; si lo único que puedes producir es una foto de stock distinta por sector, dedica ese tiempo a los textos.
Por dónde empezar
Toma tu landing page con más tráfico y mira la imagen hero con una sola pregunta: ¿un visitante de tu mayor segmento reconocería en ella su propio trabajo? Si no, sustitúyela por una captura del producto o una imagen de cliente en la que sí se reconozca, y testéala frente a la actual. Solo cuando una imagen real supere a la de stock merece la pena producir variantes por segmento. Markettailor conecta los datos de identificación de visitantes con el contenido de la página, incluidas las imágenes, si quieres servir esas variantes sin construir tú mismo las reglas.
