Imágenes responsivas

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

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

Limita tus imágenes

En tu hoja de estilo, puedes usar max-inline-size para declarar que las imágenes nunca se podrán 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 los videos. e iframes.

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

Con esta regla impuesta, los navegadores reducen automáticamente la escala de las imágenes para que se ajusten a la en la pantalla.

Agrega un elemento block-size de auto significa que el navegador preserva el tamaño de tus imágenes relación de aspecto, ya que les cambia el tamaño.

A veces, las dimensiones de una imagen se establecen a través de un sistema de administración de contenido (CMS) otro sistema de entrega de contenido. Si tu diseño requiere una relación de aspecto diferente del CMS predeterminado, puedes usar el aspect-ratio para preservar 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 aplastar o estirar la imagen. para que encaje en el espacio previsto.

Para evitar la compresión y el estiramiento, usa el object-fit.

Un valor object-fit de contain le indica al navegador que conserve el relación de aspecto, dejando un espacio vacío alrededor de la imagen 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 el relación de aspecto y recortar la imagen 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 el object-position propiedad. Esto ajusta el enfoque del recorte para que puedas asegurarte una parte importante de la imagen sigue 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 te gustaría que se rendericen las imágenes. Puedes también proporcionan sugerencias en tu código HTML sobre cómo el navegador debe manejar esas imágenes.

Sugerencias para el tamaño

Si conoce las dimensiones de su imagen, incluya siempre width y height. atributos. Incluso si la imagen se renderiza en un tamaño diferente debido a tu max-inline-size, el navegador aún reconoce la proporción entre el ancho y la altura, y puedes reservar la cantidad adecuada de espacio. Esto evita que el resto de tu contenido y saltar de un lado a otro 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 hasta que se encuentre en el viewport o cerca de él. Para imágenes en la mitad inferior de la página, usa un valor de lazy. El navegador no carga imágenes diferidas hasta que el usuario se desplaza mucho. lo suficientemente bajo como para que la imagen esté a punto de verse. 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 principal en la parte superior de la página, no uses loading. Si tu sitio se activa automáticamente Aplica el atributo loading="lazy", por lo general, puedes configurar 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 imágenes importantes, como la imagen LCP, puedes agregar más priorizar la carga con la Prioridad de recuperación Configura 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 prioridad alta en lugar de esperar hasta que el navegador haya terminado su diseño imágenes normalmente.

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

Sugerencias para la precarga

Siempre que sea posible, se recomienda evitar la precarga. Para ello, incluye todas las imágenes en el archivo HTML inicial. Sin embargo, es posible que algunas imágenes no estén disponibles, como las que agregada por JavaScript o una imagen de fondo de CSS.

Puedes usar la precarga para que el navegador recupere estas imágenes importantes antes de tiempo. Para imágenes muy importantes, puedes combinar esta precarga con el Atributo fetchpriority:

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

Una vez más, usa estos atributos con moderación para evitar anular la configuración de priorización muy a menudo. Su uso excesivo puede causar rendimiento de la degradación de los datos.

Algunos navegadores admiten la precarga de imágenes responsivas según 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 el resguardo de href, puedes asegurarte de que los navegadores sin srcset pero admite la carga previa de 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 desperdician los datos de los usuarios de datos no estructurados.

Decodificación de imágenes

También hay un atributo decoding que puedes agregar a elementos img. Sabrás que al navegador que la imagen se puede decodificar de forma asíncrona, de modo que pueda priorizar procesar otro contenido.

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

Puedes usar el valor sync si la imagen en sí es la pieza más importante de contenido a priorizar.

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

El atributo decoding no cambia la velocidad de decodificación de la imagen. Afecta solo si el navegador espera que se produzca esta decodificación de imagen procesar otro contenido.

En la mayoría de los casos, esto no tiene mucho impacto, pero a veces puede navegador muestren tu imagen u otro contenido un poco más rápido. Por ejemplo, para un un documento grande con muchos elementos que tardan en renderizarse y con que tardan mucho tiempo en decodificarse, configurar sync en imágenes importantes el navegador para que espere la imagen y renderice ambas a la vez. Por otro lado, puedes configurar async para permitir que el navegador muestre contenido más rápido y sin mientras esperas a que la imagen se decodifique.

Sin embargo, la mejor opción suele ser tratar de evita el exceso de tamaños del DOM y usar imágenes responsivas para reducir el tiempo de decodificación, en lugar de usar decoding.

Imágenes responsivas con srcset

Gracias a esa declaración de max-inline-size: 100%, tus imágenes no pueden desglosarse de sus contenedores. Sin embargo, si el usuario tiene una pantalla pequeña y red de VPC, lo que les permite descargar 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 srcset para indicar al navegador que estos tamaños existen y cuándo usarlos.

Descriptor de ancho

Puedes definir un srcset con una lista de valores separados por comas. Cada valor se la URL de una imagen, seguida de un espacio y de algunos metadatos sobre el llamada descriptor.

En este ejemplo, los metadatos describen el ancho de cada imagen con el w. unidad. 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. Debes tener un atributo src válido, pero el navegador puede reemplazarlo con una de las opciones que se enumeran en el srcset. Para ahorrar ancho de banda, navegador solo descarga la imagen más grande si es necesario.

Tamaños

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

El atributo sizes toma una lista separada por comas de imágenes y consultas de medios, de ancho de banda.

<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, se le indica al navegador que en un viewport con un ancho de más 66em, la imagen no debe tener un ancho superior a un tercio de la pantalla (por ejemplo, en un diseño de tres columnas).

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

En el caso de un tamaño inferior a 44em, muestra la imagen en todo el ancho de la en la pantalla.

Esto significa que la imagen más grande no se usará en la pantalla. Una ventana del navegador ancha que puede mostrar un diseño de varias columnas utiliza un que cabe en una columna, que puede ser más pequeña que una imagen que se usa para una 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 imágenes para mostrar en pantallas de alta densidad, para que las imágenes se vean nítidas en que proporcionan.

Usa el descriptor de densidad para describir la densidad de píxeles de la imagen en con la imagen en el atributo src. El descriptor de densidad es un número seguida 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 por 200 píxeles y medium-image.png es de 600 por 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 es 450 Si tienes 300 píxeles de tamaño, puedes describirlo con 1.5x.

Imágenes de presentación

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

Si incorporas una imagen decorativa que no tenga ningún significado 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 a un lector de pantalla que la imagen se la presentación. Un atributo alt faltante no proporciona esa información.

Idealmente, las imágenes de presentación o decorativas se incluyen 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 opciones de imágenes con el image-set para background-image.

La función image-set en CSS funciona de manera muy parecida 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 considerar cuando agregas imágenes a tu sitio. como:

• Reserva el espacio adecuado para cada imagen.
• Averiguar cuántos tamaños necesitas.
• Decidir si la imagen es de contenido o decorativa.

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre imágenes.