Arquitectura Visual B2B: Cómo Construir un "Hero Section" Corporativo Sin Distorsión

El “Hero Section” (la primera sección visible de una página web antes de hacer scroll) es el equivalente digital a la fachada de un edificio corporativo: la primera impresión de la marca. Uno de los errores técnicos más dañinos para esa impresión es usar imágenes con proporciones incorrectas, que terminan pixeladas, con rostros cortados o elementos estirados.

Para proyectar solidez, conviene maquetar esta sección con reglas claras de proporción y CSS, y no dejarla al azar de un constructor visual. Este tutorial explica cómo estructurar el código de un Hero Section para mantener proporciones correctas y cuidar el LCP, una de las métricas de Core Web Vitals.

Actualizado: octubre de 2026

1. La matemática del espacio: proporciones horizontales

Los monitores de escritorio y las laptops son panorámicos. Colocar una fotografía cuadrada (1:1) o vertical (4:5) en un hero de escritorio obliga al navegador a recortar mucho la imagen o, si el código está mal escrito, a estirarla, y la composición original se pierde.

Para un diseño corporativo sobrio, la regla práctica es partir de una imagen maestra horizontal. Los ratios habituales son 16:9 (panorámico) y 21:9 (más ancho, útil para franjas hero más delgadas). En píxeles, por ejemplo, 1920×1080 para 16:9 y 1920×820 para una franja cercana a 21:9. Si necesitas ahorrar peso en pantallas pequeñas, prepara versiones adicionales en lugar de escalar una sola imagen enorme.

2. Control con CSS: object-fit y object-position

Aun con la imagen correcta, el contenedor debe comportarse bien cuando cambia el tamaño de la ventana. Si das width y height en porcentaje sin declarar cómo se ajusta el contenido, el navegador puede estirar la imagen. La solución es object-fit: cover con un contenedor de dimensiones definidas.

/* Hero corporativo: la imagen llena el contenedor sin distorsionarse */
.hero-container {
    width: 100%;
    height: 600px;            /* o aspect-ratio: 21 / 9; según el diseño */
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* recorta en lugar de estirar */
    object-position: center center; /* punto focal */
    display: block;
}

Una nota sobre la altura: 100vh puede comportarse de forma inesperada en navegadores móviles por la barra de direcciones. Las unidades modernas como 100svh funcionan mejor, pero comprueba la compatibilidad con los navegadores que usan tus visitantes o conserva un valor de respaldo.

3. Dirección de arte (Art Direction) para móviles

Aquí está el verdadero desafío. Una imagen horizontal de 1920×1080 se ve diminuta en la pantalla vertical de un smartphone y pierde impacto.

La alternativa es la etiqueta <picture>, que permite cargar archivos distintos según el dispositivo. Así diseñas un encuadre vertical específico para celulares sin tocar la imagen horizontal de escritorio:

<picture>
    <!-- Encuadre vertical propio para smartphones -->
    <source media="(max-width: 768px)"
            srcset="/img/hero-mobile-800x1200.webp"
            width="800" height="1200">

    <!-- Encuadre horizontal para escritorio (predeterminado) -->
    <img src="/img/hero-desktop-1920x1080.webp"
         class="hero-image"
         width="1920" height="1080"
         alt="Equipo directivo en sala de juntas"
         fetchpriority="high">
</picture>

Declarar width y height permite que el navegador reserve el espacio antes de que cargue la imagen y evita saltos de diseño (CLS). Escribe además un texto alternativo que describa la imagen, no que repita palabras clave.

4. Optimización del LCP (Largest Contentful Paint)

La imagen del hero suele ser el elemento visual más grande del primer pantallazo, y por eso suele ser el elemento LCP: mide cuánto tarda el usuario en ver cargado lo principal. Google considera bueno un LCP de 2,5 segundos o menos, medido en el percentil 75 de las visitas reales.

• Formatos modernos: exporta en WebP o AVIF en lugar de JPG o PNG para fondos grandes. En muchos casos el archivo pesa bastante menos con calidad visual comparable; compruébalo con tus imágenes.
• Prioridad de descarga: añade fetchpriority="high" a la imagen principal. Si no puedes precargarla, al menos con ese atributo el navegador la descarga antes que recursos secundarios. Si la imagen es un fondo CSS, el navegador la descubre más tarde: usa una etiqueta <img> o precárgala.
• Nunca loading="lazy" en el hero: la carga diferida es útil para imágenes que están más abajo, pero aplicada a la imagen principal retrasa su aparición y empeora el LCP. A veces la agrega un plugin de optimización a todas las imágenes: revísalo.
• Mide: comprueba el resultado en PageSpeed Insights, que muestra tanto datos de laboratorio como datos reales de usuarios cuando hay suficiente tráfico.

Conclusión técnica

Construir un hero es un ejercicio de diseño y de rendimiento a la vez. Partir de una imagen horizontal, controlar el recorte con CSS, preparar un encuadre propio para móviles y cuidar la carga de esa primera imagen mejora la primera impresión y ayuda a las métricas. Si estás pensando la web completa, mira también por qué una web corporativa debe pensarse como herramienta de captura.

Fuentes y datos de referencia

Fuentes consultadas en octubre de 2026. Las recomendaciones de rendimiento evolucionan: comprueba la documentación vigente.

• web.dev: Largest Contentful Paint (umbral de 2,5 s en el percentil 75)
• web.dev: optimizar el LCP (imagen principal, prioridad de descarga y carga diferida)
• web.dev: optimizar el CLS (dimensiones de las imágenes)