Tutorial CSS: Imágenes responsive

Imágenes fluidas con max-width: 100% y height: auto

Las imágenes son elementos fundamentales en el diseño web moderno, pero pueden causar problemas de visualización cuando trabajamos con diseños responsive. Una imagen con dimensiones fijas puede romper fácilmente el layout en pantallas pequeñas, creando barras de desplazamiento horizontal indeseadas o desbordando sus contenedores.

La técnica de imágenes fluidas es la solución más básica y efectiva para adaptar imágenes a diferentes tamaños de pantalla. Esta aproximación permite que las imágenes se redimensionen automáticamente para ajustarse al ancho de su contenedor, manteniendo su proporción original.

Implementación básica

Para crear imágenes fluidas, necesitamos aplicar dos propiedades CSS clave:

img {
  max-width: 100%;
  height: auto;
}

Estas dos líneas de código son la base del comportamiento responsive para imágenes. Veamos qué hace cada propiedad:

• max-width: 100%: Establece que la imagen nunca será más ancha que su contenedor. La imagen se reducirá si es necesario, pero nunca se expandirá más allá de su tamaño original o del ancho de su contenedor.

• height: auto: Mantiene la proporción original de la imagen (aspect ratio) mientras el ancho cambia. Esto evita que las imágenes se distorsionen cuando se redimensionan.

Ejemplo práctico

Imaginemos que tenemos una imagen de 800×600 píxeles dentro de un artículo que tiene un ancho máximo de 600px:

<article class="content">
  <img src="landscape.jpg" alt="Beautiful landscape">
  <p>This is a beautiful landscape photograph taken at sunset.</p>
</article>

.content {
  max-width: 600px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

Con estas reglas CSS, la imagen se mostrará a 600px de ancho (el ancho de su contenedor) en pantallas grandes. Cuando la pantalla se reduzca a menos de 600px, la imagen se reducirá proporcionalmente para ajustarse al ancho disponible.

Aplicación a diferentes tipos de imágenes

Esta técnica funciona con todos los formatos de imagen comunes:

/* Aplicar a todos los tipos de imágenes */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

Consideraciones importantes

Hay algunos aspectos a tener en cuenta cuando trabajamos con imágenes fluidas:

• Tamaño de descarga: Aunque la imagen se muestre más pequeña en dispositivos móviles, el navegador descargará el archivo completo. Esto puede afectar al rendimiento en conexiones lentas.

• Espacio reservado: Las imágenes fluidas pueden causar saltos en el layout mientras se cargan, ya que el navegador no conoce las dimensiones finales hasta que la imagen está completamente descargada.

• Imágenes en línea: Para imágenes en línea (dentro de texto), puede ser preferible usar valores específicos:

/* Para imágenes en línea */
.inline-image {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* Mejora la alineación con el texto */
}

Solución para imágenes de fondo

Las imágenes de fondo también pueden hacerse fluidas usando background-size:

.hero-banner {
  background-image: url('banner.jpg');
  background-size: 100% auto; /* Ancho completo, altura proporcional */
  /* Alternativa: background-size: cover; */
  background-position: center;
  background-repeat: no-repeat;
}

Ejemplo avanzado con contenedores

A veces necesitamos más control sobre cómo se comportan las imágenes en diferentes contextos:

/* Imágenes en tarjetas de producto */
.product-card img {
  max-width: 100%;
  height: auto;
  display: block; /* Elimina el espacio inferior que aparece con imágenes inline */
  margin: 0 auto; /* Centra la imagen si es más pequeña que el contenedor */
}

/* Imágenes en galerías */
.gallery img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Suaviza el cambio de tamaño */
}

.gallery img:hover {
  transform: scale(1.05); /* Pequeño efecto de zoom al pasar el ratón */
}

Compatibilidad con navegadores

La técnica de imágenes fluidas con max-width: 100% y height: auto es compatible con todos los navegadores modernos, incluyendo versiones antiguas. No requiere prefijos de proveedor ni soluciones alternativas especiales.

Esta aproximación simple pero efectiva es la base del manejo de imágenes en diseños responsive. En las siguientes secciones, exploraremos técnicas más avanzadas como object-fit para un control más preciso sobre el recorte y la proporción, así como srcset para optimizar la carga de imágenes según la resolución del dispositivo.

Control de tamaño y proporción con object-fit y object-position

Aunque las imágenes fluidas con max-width: 100% y height: auto son una excelente base para el diseño responsive, a veces necesitamos un control más preciso sobre cómo se ajustan las imágenes dentro de sus contenedores. Aquí es donde entran en juego las propiedades object-fit y object-position.

Estas propiedades nos permiten controlar cómo una imagen (u otro contenido reemplazado como video) debe redimensionarse para adaptarse a su contenedor, similar a cómo funcionan las propiedades background-size y background-position para imágenes de fondo.

La propiedad object-fit

La propiedad object-fit define cómo una imagen debe redimensionarse para adaptarse a su contenedor. Es especialmente útil cuando queremos mantener dimensiones específicas en nuestros contenedores de imágenes.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Los valores principales de object-fit son:

• fill: El valor predeterminado. La imagen se estira para llenar completamente el contenedor, lo que puede distorsionar la proporción original.

• contain: La imagen se escala para caber completamente dentro del contenedor manteniendo su proporción. Puede dejar espacios en blanco si la proporción de la imagen difiere de la del contenedor.

• cover: La imagen cubre completamente el contenedor manteniendo su proporción. Algunas partes de la imagen pueden quedar recortadas si las proporciones no coinciden.

• none: La imagen no se redimensiona en absoluto y se muestra en su tamaño original.

• scale-down: Muestra la imagen con el menor tamaño entre none y contain.

Ejemplo visual de object-fit

Veamos un ejemplo práctico con diferentes valores de object-fit:

<div class="gallery">
  <figure>
    <img src="landscape.jpg" alt="Landscape" class="img-fill">
    <figcaption>object-fit: fill</figcaption>
  </figure>
  
  <figure>
    <img src="landscape.jpg" alt="Landscape" class="img-contain">
    <figcaption>object-fit: contain</figcaption>
  </figure>
  
  <figure>
    <img src="landscape.jpg" alt="Landscape" class="img-cover">
    <figcaption>object-fit: cover</figcaption>
  </figure>
  
  <figure>
    <img src="landscape.jpg" alt="Landscape" class="img-none">
    <figcaption>object-fit: none</figcaption>
  </figure>
</div>

.gallery figure {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  margin: 10px;
  display: inline-block;
}

.gallery img {
  width: 100%;
  height: 100%;
}

.img-fill {
  object-fit: fill;
}

.img-contain {
  object-fit: contain;
}

.img-cover {
  object-fit: cover;
}

.img-none {
  object-fit: none;
}

La propiedad object-position

Mientras que object-fit controla cómo se redimensiona la imagen, object-position determina cómo se posiciona dentro de su contenedor. Esta propiedad funciona de manera similar a background-position.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: center top; /* Centra horizontalmente y alinea con la parte superior */
}

La propiedad object-position acepta:

• Palabras clave: top, right, bottom, left, center
• Porcentajes: 25% 75% (25% desde la izquierda, 75% desde arriba)
• Unidades de longitud: 10px 20px (10px desde la izquierda, 20px desde arriba)

Ejemplo práctico de object-position

Veamos cómo object-position afecta a una imagen con object-fit: cover:

<div class="portrait-gallery">
  <figure>
    <img src="portrait.jpg" alt="Portrait" class="pos-center">
    <figcaption>center (default)</figcaption>
  </figure>
  
  <figure>
    <img src="portrait.jpg" alt="Portrait" class="pos-top">
    <figcaption>top</figcaption>
  </figure>
  
  <figure>
    <img src="portrait.jpg" alt="Portrait" class="pos-bottom-right">
    <figcaption>bottom right</figcaption>
  </figure>
</div>

.portrait-gallery figure {
  width: 150px;
  height: 200px;
  border: 1px solid #ddd;
  margin: 10px;
  display: inline-block;
}

.portrait-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pos-center {
  object-position: center; /* Valor predeterminado */
}

.pos-top {
  object-position: top;
}

.pos-bottom-right {
  object-position: right bottom;
}

Casos de uso comunes

Tarjetas de producto uniformes

.product-card {
  width: 250px;
  height: 350px;
  border-radius: 8px;
  overflow: hidden;
}

.product-card .image-container {
  width: 100%;
  height: 200px;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.1);
}

Galería de retratos centrados en la cara

.portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Ligeramente por encima del centro para enfocar rostros */
}

Banners de encabezado

.hero-banner {
  width: 100%;
  height: 40vh;
  position: relative;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* Enfoca la parte inferior de la imagen */
}

.hero-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

Combinación con media queries

Podemos cambiar el comportamiento de object-fit y object-position según el tamaño de la pantalla:

.featured-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .featured-image {
    height: 200px;
    object-position: top; /* En móviles, enfoca la parte superior */
  }
}

@media (max-width: 480px) {
  .featured-image {
    height: 150px;
  }
}

Compatibilidad con navegadores

Las propiedades object-fit y object-position son compatibles con todos los navegadores modernos. Sin embargo, Internet Explorer no las soporta. Si necesitas compatibilidad con IE, puedes usar polyfills o alternativas basadas en background-image.

/* Alternativa para navegadores antiguos */
.fallback-container {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

Consideraciones de rendimiento

Aunque object-fit y object-position son herramientas poderosas, es importante recordar que:

• Las imágenes siguen descargándose en su tamaño original
• El navegador debe realizar cálculos adicionales para el redimensionamiento
• Para imágenes muy grandes, considera usar también srcset para optimizar la carga

Estas propiedades nos dan un control preciso sobre cómo se muestran las imágenes en diseños responsive, permitiéndonos crear interfaces más pulidas y profesionales sin depender de recortes manuales para cada tamaño de pantalla.

Densidad de píxeles y srcset para diferentes resoluciones

En el mundo actual de dispositivos con pantallas de alta resolución, las imágenes responsive no solo deben adaptarse al tamaño de la pantalla, sino también a su densidad de píxeles. Un iPhone, un monitor 4K o una tablet moderna tienen densidades de píxeles mucho mayores que las pantallas tradicionales, lo que significa que pueden mostrar imágenes con mayor detalle.

Entendiendo la densidad de píxeles

La densidad de píxeles (o pixel ratio) se refiere a cuántos píxeles físicos de la pantalla se utilizan para representar un píxel lógico en CSS. Por ejemplo:

• Una pantalla estándar tiene una relación 1:1 (1 píxel físico = 1 píxel CSS)
• Una pantalla Retina de Apple tiene una relación 2:1 (2 píxeles físicos = 1 píxel CSS)
• Algunos dispositivos de gama alta pueden tener relaciones de 3:1 o incluso 4:1

Cuando mostramos una imagen de 300×200 píxeles en una pantalla con densidad 2x, en realidad ocupa 600×400 píxeles físicos, lo que puede hacer que la imagen se vea borrosa si no proporcionamos una versión de mayor resolución.

El atributo srcset

El atributo srcset nos permite proporcionar diferentes versiones de una imagen según la densidad de píxeles del dispositivo. El navegador elegirá automáticamente la más adecuada.

<img src="image-1x.jpg" 
     srcset="image-1x.jpg 1x, 
             image-2x.jpg 2x, 
             image-3x.jpg 3x" 
     alt="Imagen responsive">

En este ejemplo:

• src="image-1x.jpg" es la imagen por defecto (para navegadores que no soportan srcset)
• srcset define tres versiones de la misma imagen con diferentes resoluciones
• Los sufijos 1x, 2x y 3x indican la densidad de píxeles para la que está optimizada cada imagen

Ejemplo práctico con srcset

Imaginemos que tenemos un logotipo que queremos mostrar nítidamente en todos los dispositivos:

<img src="logo.png" 
     srcset="logo.png 1x,
             logo@2x.png 2x,
             logo@3x.png 3x" 
     alt="Logo de la empresa" 
     width="200">

En este caso:

• logo.png es una imagen de 200×100 píxeles (1x)
• logo@2x.png es una imagen de 400×200 píxeles (2x)
• logo@3x.png es una imagen de 600×300 píxeles (3x)

El atributo width="200" es importante porque le dice al navegador que la imagen debe ocupar 200 píxeles CSS, independientemente de qué versión se cargue.

Combinando srcset con tamaños de pantalla

El atributo srcset también puede utilizarse junto con el atributo sizes para proporcionar diferentes imágenes según el ancho de la ventana del navegador:

<img src="photo-small.jpg"
     srcset="photo-small.jpg 400w,
             photo-medium.jpg 800w,
             photo-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="Fotografía responsive">

En este ejemplo:

• Los sufijos 400w, 800w y 1200w indican el ancho en píxeles de cada imagen
• El atributo sizes define cuánto espacio ocupará la imagen en diferentes escenarios:
• En pantallas menores a 600px, ocupará el 100% del ancho de la ventana
• En pantallas entre 600px y 1200px, ocupará el 50% del ancho
• En pantallas mayores a 1200px, ocupará el 33% del ancho

Diferencia entre descriptores w y x

Es importante entender la diferencia entre los dos tipos de descriptores en srcset:

• Descriptor x (1x, 2x, 3x): Se refiere a la densidad de píxeles del dispositivo
• Descriptor w (400w, 800w): Se refiere al ancho en píxeles de la imagen

<!-- Usando descriptores de densidad (x) -->
<img src="photo.jpg"
     srcset="photo.jpg 1x,
             photo@2x.jpg 2x"
     alt="Foto con descriptores de densidad">

<!-- Usando descriptores de ancho (w) con sizes -->
<img src="photo-small.jpg"
     srcset="photo-small.jpg 400w,
             photo-large.jpg 800w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Foto con descriptores de ancho">

Ejemplo avanzado para una galería de fotos

<div class="gallery">
  <figure>
    <img src="thumbnail.jpg"
         srcset="thumbnail.jpg 400w,
                 medium.jpg 800w,
                 large.jpg 1600w"
         sizes="(max-width: 480px) 100vw,
                (max-width: 900px) 50vw,
                33vw"
         alt="Imagen de galería">
    <figcaption>Descripción de la imagen</figcaption>
  </figure>
  <!-- Más imágenes... -->
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery figure {
  margin: 0;
  flex-grow: 1;
}

.gallery img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .gallery figure {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 900px) {
  .gallery figure {
    width: calc(50% - 5px);
  }
}

@media (min-width: 901px) {
  .gallery figure {
    width: calc(33.333% - 7px);
  }
}

Optimización de imágenes para diferentes densidades

Para crear versiones de imágenes optimizadas para diferentes densidades de píxeles:

1. Crea la imagen en la resolución más alta que quieras soportar (por ejemplo, 3x)
2. Redimensiona hacia abajo para crear versiones 2x y 1x
3. Optimiza cada versión para reducir el tamaño del archivo
4. Nombra las imágenes de forma consistente (por ejemplo, usando sufijos como @2x)

Consideraciones de rendimiento

• Tamaño de archivo: Las imágenes de alta resolución pueden ser significativamente más grandes. Asegúrate de optimizarlas adecuadamente.
• Formato de imagen: Considera usar formatos modernos como WebP que ofrecen mejor compresión.
• Lazy loading: Combina srcset con lazy loading para mejorar el rendimiento:

<img src="placeholder.jpg"
     srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     loading="lazy"
     alt="Imagen con carga diferida">

Compatibilidad con navegadores

El soporte para srcset es excelente en navegadores modernos. Para navegadores antiguos, siempre tendremos la imagen definida en el atributo src como fallback.

<!-- Navegadores antiguos usarán esta imagen -->
<img src="fallback.jpg" 
     srcset="modern-small.jpg 400w,
             modern-large.jpg 800w" 
     sizes="100vw"
     alt="Imagen con fallback">

Uso con picture para mayor control

Para un control aún más preciso, podemos combinar srcset con el elemento picture:

<picture>
  <!-- Para pantallas pequeñas, imagen recortada -->
  <source media="(max-width: 600px)"
          srcset="mobile.jpg 1x,
                  mobile@2x.jpg 2x">
  
  <!-- Para pantallas medianas -->
  <source media="(max-width: 1200px)"
          srcset="tablet.jpg 1x,
                  tablet@2x.jpg 2x">
  
  <!-- Imagen por defecto para pantallas grandes -->
  <img src="desktop.jpg"
       srcset="desktop.jpg 1x,
               desktop@2x.jpg 2x"
       alt="Imagen adaptativa">
</picture>

Esta técnica nos permite no solo proporcionar diferentes resoluciones, sino también diferentes recortes o versiones de la imagen según el tamaño de la pantalla.

Implementar correctamente srcset mejora significativamente la experiencia del usuario en dispositivos de alta resolución, a la vez que optimiza el rendimiento al cargar imágenes más pequeñas en dispositivos con pantallas de menor resolución o tamaño.

Attribute aspect-ratio para evitar saltos de layout

Uno de los problemas más comunes al trabajar con imágenes en diseños responsive es el fenómeno conocido como "layout shift" o salto de maquetación. Esto ocurre cuando una imagen se está cargando y el navegador aún no conoce sus dimensiones, provocando que el contenido se reorganice abruptamente una vez que la imagen aparece completamente.

La propiedad aspect-ratio de CSS nos permite definir la proporción de un elemento antes de que su contenido se cargue, evitando estos molestos saltos visuales y mejorando significativamente la experiencia del usuario.

¿Qué es aspect-ratio?

La propiedad aspect-ratio establece una relación proporcional entre el ancho y el alto de un elemento, permitiendo que uno de estos valores se calcule automáticamente a partir del otro. Su sintaxis es simple:

.element {
  aspect-ratio: width / height;
}

Por ejemplo, para mantener una proporción 16:9 (común en videos):

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Evitando saltos de layout con imágenes

Cuando cargamos imágenes en una página web, el navegador inicialmente no reserva espacio para ellas hasta conocer sus dimensiones. Esto causa que el contenido "salte" cuando la imagen finalmente se carga, afectando métricas importantes como el Cumulative Layout Shift (CLS) que Google utiliza para evaluar la experiencia de usuario.

Veamos cómo solucionar este problema:

.image-container {
  width: 100%;
  aspect-ratio: 4 / 3; /* Proporción 4:3 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}

<div class="image-container">
  <img src="landscape.jpg" alt="Beautiful landscape">
</div>

Con este enfoque, el navegador reserva inmediatamente el espacio correcto para la imagen basándose en la proporción definida, incluso antes de que la imagen se cargue.

Proporciones comunes en diseño web

Algunas proporciones frecuentemente utilizadas en diseño web:

• 1 / 1: Proporción cuadrada (ideal para avatares o miniaturas)
• 16 / 9: Formato panorámico (videos, banners)
• 4 / 3: Formato tradicional (fotografías estándar)
• 3 / 2: Proporción clásica en fotografía
• 21 / 9: Ultra panorámico (banners de página completa)

Combinación con media queries

Podemos cambiar la proporción según el tamaño de pantalla:

.hero-banner {
  width: 100%;
  aspect-ratio: 21 / 9; /* Muy panorámico en pantallas grandes */
}

@media (max-width: 768px) {
  .hero-banner {
    aspect-ratio: 16 / 9; /* Menos panorámico en tablets */
  }
}

@media (max-width: 480px) {
  .hero-banner {
    aspect-ratio: 4 / 3; /* Casi cuadrado en móviles */
  }
}

Aplicación en galerías de imágenes

Las galerías de imágenes son un caso de uso perfecto para aspect-ratio:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.gallery-item {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Gallery image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Gallery image 2">
  </div>
  <!-- Más imágenes... -->
</div>

Este código crea una galería responsive donde todas las imágenes mantienen la misma proporción, independientemente de su contenido original.

Tarjetas de producto con aspect-ratio

Otro caso de uso común es en tarjetas de producto:

.product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  aspect-ratio: 1 / 1; /* Imágenes cuadradas */
  background-color: #f5f5f5; /* Color de fondo mientras carga */
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Muestra el producto completo */
}

.product-info {
  padding: 16px;
}

<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Product name">
  </div>
  <div class="product-info">
    <h3>Product Name</h3>
    <p>$99.99</p>
  </div>
</div>

Compatibilidad con navegadores antiguos

La propiedad aspect-ratio es relativamente nueva, pero podemos crear un fallback para navegadores que no la soportan usando la técnica del "padding-trick":

.image-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Navegadores modernos */
}

/* Fallback para navegadores que no soportan aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .image-container {
    position: relative;
    padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
  }
  
  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

El truco del padding funciona porque el padding-top en porcentaje se calcula en relación al ancho del elemento, no a su altura.

Uso con elementos iframe (videos)

Los videos incrustados son otro caso donde aspect-ratio resulta muy útil:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/video-id" allowfullscreen></iframe>
</div>

Mejorando el rendimiento con width y height en HTML

Una práctica recomendada es combinar aspect-ratio en CSS con los atributos width y height en HTML:

<img src="image.jpg" width="800" height="600" alt="Description">

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

Los navegadores modernos utilizan estos atributos para calcular automáticamente la proporción y reservar el espacio adecuado, incluso antes de aplicar los estilos CSS.

Consideraciones de rendimiento

• Mejora del CLS (Cumulative Layout Shift): Usar aspect-ratio mejora significativamente esta métrica de Core Web Vitals.
• Carga progresiva: Combina con técnicas de carga progresiva para una mejor experiencia:

.lazy-image {
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0; /* Color de fondo mientras carga */
}

<div class="lazy-image">
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">
</div>

Ejemplo completo de página de blog

.blog-post {
  max-width: 800px;
  margin: 0 auto;
}

.featured-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-images {
  aspect-ratio: 3 / 2;
  margin: 20px 0;
  border-radius: 4px;
  overflow: hidden;
}

.content-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .featured-image {
    aspect-ratio: 4 / 3; /* Menos panorámico en móviles */
  }
}

La propiedad aspect-ratio es una herramienta fundamental para crear diseños web estables y profesionales. Al reservar el espacio correcto para las imágenes antes de que se carguen, evitamos los molestos saltos de layout que deterioran la experiencia del usuario y afectan negativamente al posicionamiento SEO. Combinada con otras técnicas responsive como object-fit y srcset, nos permite crear interfaces fluidas y consistentes en todos los dispositivos.