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.
![Dos capturas de pantalla el primero muestra una imagen que se expande más allá del ancho del navegador; y la segunda muestra la misma imagen restringida dentro del viewport del navegador.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=3&hl=es-419)
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.
![Perfil de un perro guapo y feliz con una pelota en la boca, pero la imagen está aplastada.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=3&hl=es-419)
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;
}
![Perfil de un perro apuesto y feliz con una pelota en la boca hay espacio adicional a ambos lados de la imagen.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=3&hl=es-419)
![Perfil de un perro apuesto y feliz con una pelota en la boca la imagen se recortó en la parte superior e inferior.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=3&hl=es-419)
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;
}
![Perfil de un perro apuesto y feliz con una pelota en la boca la imagen solo se recortó en la parte inferior.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=3&hl=es-419)
object-position
para recortar
solo un lado de tu imagen.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.
![Dos versiones de la misma imagen de un perro apuesto y feliz con una pelota en la boca: una se ve nítida y la otra, borrosa.](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=3&hl=es-419)
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.
Se deben agregar estilos para que las imágenes se ajusten al viewport.
Cuando la altura y el ancho de una imagen se ven forzados a tener una relación de aspecto poco natural, ¿qué estilos pueden ayudar a ajustar la forma en que la imagen se adapta a estas proporciones?
object-fit
contain
y cover
.image-fit
fit-image
aspect-ratio
Si colocas height
y width
en tus imágenes, CSS no podrá darle un estilo diferente.
El atributo srcset
no _______ el atributo src
, sino que lo _______.
srcset
definitivamente no reemplaza el atributo src
.La falta de un elemento alt
en una imagen es igual a un elemento alt
vacío.
alt
vacío le indica a un lector de pantalla que esta imagen es de presentación.alt
no indica nada para el lector de pantalla.