Imágenes responsivas

El texto en la Web se ajusta automáticamente al borde de la pantalla para que no se desborde. Por otro lado, las imágenes tienen un tamaño intrínseco. Si una imagen es más ancha que la pantalla, se desborda y el usuario debe desplazarse horizontalmente para verla completa.

Afortunadamente, CSS te brinda herramientas para evitar que esto suceda.

Restringe tus imágenes

En tu hoja de estilo, puedes usar max-inline-size para declarar que las imágenes nunca se pueden renderizar en un tamaño más ancho que su elemento contenedor.

img {
  max-inline-size: 100%;
  block-size: auto;
}

También puedes aplicar la misma regla a otros tipos de contenido incorporado, como videos e iframes.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Con esta regla, los navegadores reducen automáticamente las imágenes para que quepan en la pantalla.

Agregar un valor block-size de auto significa que el navegador conserva la relación de aspecto de tus imágenes a medida que las cambia de tamaño.

A veces, las dimensiones de una imagen se establecen mediante un sistema de administración de contenido (CMS) o algún otro sistema de distribución de contenido. Si tu diseño requiere una relación de aspecto diferente a la predeterminada del CMS, puedes usar la propiedad aspect-ratio para conservar el diseño de tu sitio:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Lamentablemente, esto suele significar que el navegador debe comprimir o estirar la imagen para que quepa en el espacio previsto.

Para evitar el aplastamiento y el estiramiento, usa la propiedad object-fit.

Un valor object-fit de contain le indica al navegador que conserve la relación de aspecto de la imagen y deje espacio vacío alrededor de ella si es necesario.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Un valor object-fit de cover le indica al navegador que conserve la relación de aspecto de la imagen y que la recorte si es necesario.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Puedes cambiar la posición del recorte de la imagen con la propiedad object-position. Esto ajusta el enfoque del recorte, por lo que puedes asegurarte de que la parte más importante de la imagen siga siendo visible.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Publica tus imágenes

Esas reglas CSS le indican al navegador cómo quieres que se rendericen las imágenes. También puedes proporcionar sugerencias en tu código HTML sobre cómo el navegador debe controlar esas imágenes.

Sugerencias para determinar el tamaño

Si conoces las dimensiones de tu imagen, incluye siempre los atributos width y height. Incluso si la imagen se renderiza en un tamaño diferente debido a tu regla max-inline-size, el navegador sigue conociendo la proporción de ancho a alto y puede reservar la cantidad correcta de espacio. Esto evita que tu otro contenido se mueva cuando se carga la imagen.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Sugerencias para la carga

Usa el atributo loading para indicarle al navegador si debe retrasar la carga de la imagen hasta que esté en el viewport o cerca de él. Para las imágenes que se encuentran en la mitad inferior de la página, usa un valor de lazy. El navegador no cargará las imágenes diferidas hasta que el usuario se desplace lo suficiente hacia abajo como para que la imagen esté a punto de aparecer. Si el usuario nunca se desplaza, la imagen nunca se carga.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Para una imagen hero en la mitad superior de la página, no uses loading. Si tu sitio aplica automáticamente el atributo loading="lazy", por lo general, puedes establecer loading en el valor predeterminado de eager para evitar que las imágenes se carguen de forma diferida:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Prioridad de recuperación

Para las imágenes importantes, como la imagen del LCP, puedes priorizar aún más la carga con la Prioridad de recuperación. Para ello, establece el atributo fetchpriority en high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Esto le indica al navegador que recupere la imagen de inmediato y con alta prioridad, en lugar de esperar a que el navegador termine su diseño y recupere las imágenes de forma normal.

Sin embargo, cuando le pides al navegador que priorice la descarga de un recurso, como una imagen, el navegador debe quitarle prioridad a otro recurso, como una secuencia de comandos o un archivo de fuente. Solo establece fetchpriority="high" en una imagen si es realmente vital.

Sugerencias para la precarga

Es mejor evitar la precarga siempre que sea posible, ya que todas las imágenes se incluyen en el archivo HTML inicial. Sin embargo, es posible que algunas imágenes no estén disponibles, como las que se agregan con JavaScript o una imagen de fondo de CSS.

Puedes usar la precarga para que el navegador recupere estas imágenes importantes con anticipación. Para las imágenes realmente importantes, puedes combinar esta precarga con el atributo fetchpriority:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Nuevamente, usa estos atributos con moderación para evitar anular las heurísticas de priorización del navegador con demasiada frecuencia. El uso excesivo puede provocar una degradación del rendimiento.

Algunos navegadores admiten la precarga de imágenes responsivas basadas en srcset, con los atributos imagesrcset y imagesizes. Por ejemplo:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Si excluyes la resiliencia href, puedes asegurarte de que los navegadores sin compatibilidad con srcset sigan precargando la imagen correcta.

No puedes precargar imágenes en diferentes formatos según la compatibilidad del navegador con ciertos formatos. Si lo intentas, es posible que se generen descargas adicionales que desperdicien los datos de los usuarios.

Imágenes responsivas con srcset

Gracias a esa declaración max-inline-size: 100%, tus imágenes no pueden salirse de sus contenedores. Sin embargo, si un usuario tiene una pantalla pequeña y una red de bajo ancho de banda, hacer que descargue imágenes del mismo tamaño que los usuarios con pantallas más grandes desperdicia datos.

Para solucionar este problema, agrega varias versiones de la misma imagen en diferentes tamaños y usa el atributo srcset para indicarle al navegador que existen estos tamaños y cuándo usarlos.

Descriptor de ancho

Puedes definir un srcset con una lista de valores separados por comas. Cada valor es la URL de una imagen, seguida de un espacio y algunos metadatos sobre la imagen, llamados descriptores.

En este ejemplo, los metadatos describen el ancho de cada imagen con la unidad w. Un w es el ancho de un píxel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

El atributo srcset complementa el atributo src en lugar de reemplazarlo. Aún debes tener un atributo src válido, pero el navegador puede reemplazar su valor por una de las opciones que se indican en srcset. Para ahorrar ancho de banda, el navegador solo descarga las imágenes más grandes si son necesarias.

Tamaños

Si usas el descriptor de ancho, también debes usar el atributo sizes para proporcionar más información al navegador. Esto le indica al navegador el tamaño en el que esperas que se muestre la imagen en diferentes condiciones. Esas condiciones se especifican en una consulta de medios.

El atributo sizes toma una lista separada por comas de consultas de medios y anchos de imagen.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

En este ejemplo, le indicas al navegador que, en una ventana gráfica con un ancho superior a 66em, debe mostrar la imagen con un ancho no superior a un tercio de la pantalla (dentro de un diseño de tres columnas, por ejemplo).

Para anchos de ventana gráfica entre 44em y 66em, muestra la imagen en la mitad del ancho de la pantalla (como en un diseño de dos columnas).

Para cualquier ancho inferior a 44em, muestra la imagen en el ancho completo de la pantalla.

Esto significa que no necesariamente se usará la imagen más grande para la pantalla más ancha. Una ventana del navegador ancha que puede mostrar un diseño de varias columnas usa una imagen que cabe en una columna, que podría ser más pequeña que una imagen que se usa para un diseño de una sola columna en una pantalla más estrecha.

Descriptor de densidad de píxeles

También puedes usar descriptores para proporcionar una versión alternativa de las imágenes que se mostrarán en pantallas de alta densidad, para que las imágenes se vean nítidas en las resoluciones más altas que proporcionan.

Usa el descriptor de densidad para describir la densidad de píxeles de la imagen en relación con la imagen del atributo src. El descriptor de densidad es un número seguido de la letra x, como en 1x o 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Si small-image.png tiene un tamaño de 300 × 200 píxeles y medium-image.png tiene un tamaño de 600 × 400 píxeles, entonces medium-image.png puede tener 2x después en la lista srcset.

No es necesario que uses números enteros. Si otra versión de la imagen tiene un tamaño de 450 x 300 píxeles, puedes describirla con 1.5x.

Imágenes de presentación

Las imágenes en HTML son contenido. Por eso, debes incluir el atributo alt con una descripción de la imagen para los lectores de pantalla y los motores de búsqueda.

Si incorporas una imagen decorativa, sin contenido significativo, puedes usar un atributo alt vacío.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Siempre debes incluir el atributo alt, incluso si está vacío. Un atributo alt vacío le indica al lector de pantalla que la imagen es meramente decorativa. Si falta el atributo alt, no se proporciona esa información.

Lo ideal es que las imágenes decorativas o de presentación se incluyan con CSS en lugar de HTML. HTML es para la estructura. CSS es para la presentación.

Imágenes de fondo

Usa la propiedad background-image en CSS para cargar imágenes de presentación.

element {
  background-image: url(flourish.png);
}

Puedes especificar varias imágenes candidatas con la función image-set para background-image.

La función image-set en CSS funciona de manera muy similar al atributo srcset en HTML. Proporciona una lista de imágenes con un descriptor de densidad de píxeles para cada una.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

El navegador elige la imagen más adecuada para la densidad de píxeles del dispositivo.

Hay muchos factores que debes tener en cuenta cuando agregas imágenes a tu sitio, incluidos los siguientes:

• Reservar el espacio adecuado para cada imagen
• Determinar cuántos tamaños necesitas
• Decidir si la imagen es contenido o decorativa

Vale la pena dedicar tiempo a obtener las imágenes correctas. Las estrategias de imágenes deficientes pueden molestar y frustrar a los usuarios. Una buena estrategia de imágenes hace que tu sitio se sienta rápido y nítido, independientemente del dispositivo o la conexión de red del usuario.

Hay un elemento HTML más en tu kit de herramientas que te brinda más control sobre tus imágenes: el elemento picture.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre imágenes.