Las imágenes adaptables (o responsive) cambian su tamaño automáticamente para ajustarse a la pantalla del usuario, lo que mejora el aspecto de la página y acelera la carga.
Veamos algunas formas de crear imágenes adaptables.
En este artículo hablamos de píxeles y pantallas retina. Si no sabes qué es esto, lee este artículo.
Método de descripción de la densidad de la pantalla
Este método es adecuado para imágenes cuyo tamaño es fijo en pantallas de alta densidad. Esto significa que para algunas imágenes de 200 píxeles de ancho, indicadas en HTML, puedes cargar una imagen de 600 píxeles o más, ya que en una pantalla de alta densidad se verá mucho mejor.
Cómo hacer una imagen adaptable con srcset
En el marcado se agregan imágenes usando la etiqueta <img>, que se vuelve adaptable con los atributos srcset, sizes, la etiqueta <source> y la etiqueta envolvente <picture>.
El <img> adaptable sabe:
- Reaccionar a la retina: cargar diferentes imágenes para diferentes densidades de píxeles.
- Reaccionar al ancho del viewport: cargar diferentes imágenes para diferentes expresiones de medios.
- Trabajar con nuevos formatos de imagen (AVIF y WebP).
Para implementar el método, se utiliza el atributo srcset para describir la densidad de la pantalla. El atributo srcset permite especificar varias opciones de imagen con diferentes resoluciones o densidades de píxeles. El navegador elige la imagen más adecuada según la densidad de píxeles de la pantalla del dispositivo para cargarla.
<img src="cat.jpg" alt="Gatito" width="360" height="240" srcset="cat-360px.jpg 1x, cat-720px.jpg 2x, cat-1080px.jpg 3x">
- Tres tamaños de imagen para diferentes dispositivos
- 1x, 2x, 3x: son los identificadores que indican la densidad de la pantalla para mostrar una determinada imagen. El desarrollador elige qué identificadores debe indicar para los diferentes dispositivos.
Descriptores de ancho, alto y densidad
En el atributo srcset puedes usar diferentes tipos de descriptores para indicar las opciones de imagen dependiendo de los requisitos específicos.
- Descriptor de ancho (w – width descriptor): indica el ancho de la imagen o el viewport para el cual está destinada una imagen específica. Se mide en píxeles.
<img src="small.jpg" width="360" height="300" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Imagen adaptable">En este ejemplo, medium.jpg tiene el descriptor 1000w, lo que significa que la imagen está diseñada para viewports de 1000 píxeles de ancho. En consecuencia, large.jpg es la imagen para viewports de 2000 píxeles de ancho.
- Descriptor de tamaño (x – pixel density descriptor): indica la relación entre el ancho de la imagen y el ancho del viewport. Se mide en números reales sin unidad de medida.
<img src="small.jpg" srcset="medium.jpg 1.5x, large.jpg 2x" alt="Imagen adaptable">Aquí, medium.jpg tiene el descriptor 1.5x, lo que significa que el ancho de la imagen es una vez y media el ancho del viewport. El ancho de la imagen large.jpg es el doble del ancho del viewport.
- Descriptor de densidad de píxeles (dppx – dots per pixel descriptor): define la densidad de píxeles de la imagen o la pantalla para la que está diseñada una imagen específica. Se mide en píxeles por pulgada (ppi).
<img src="small.jpg" srcset="medium.jpg 1.5dppx, large.jpg 2dppx" alt="Imagen adaptable">El descriptor 1.5dppx significa que la imagen está diseñada para dispositivos con una densidad de 1.5 píxeles por pulgada. La imagen large.jpg será adecuada para dispositivos con una densidad de 2 píxeles por pulgada, por ejemplo, tablets, portátiles o monitores de muy alta resolución.
El uso del atributo srcset permite crear imágenes adaptables que se ajustan de forma óptima a diferentes dispositivos y pantallas. Cuando el navegador carga la página, analiza los descriptores de las imágenes y elige la más adecuada en función de las características de la pantalla y las capacidades del navegador.
Recorte de Imágenes y la Etiqueta <picture>
Si según el diseño del sitio web la imagen cambia ligeramente en los diferentes dispositivos, por ejemplo, se recorta o adquiere detalles adicionales, es conveniente maquetarla con la etiqueta <picture>.
La etiqueta envolvente <picture> está diseñada para garantizar la adaptabilidad de las imágenes en las páginas web. Permite al desarrollador proporcionar diferentes versiones de la imagen dependiendo del tamaño de la pantalla u otras condiciones.
Cómo agregar una imagen adaptable con <picture>
Se indica la etiqueta de apertura y cierre <picture>. Dentro de este contenedor se definirán diferentes fuentes de imagen.
<picture>
...
</picture>Dentro de la etiqueta <picture> se coloca la etiqueta <source> para definir las fuentes de imagen. Cada etiqueta <source> tiene el atributo srcset que indica la ruta a la imagen.
El atributo media describe las condiciones en las que se cargará la imagen correspondiente. Por ejemplo, media="(min-width: 1200px)" significa que la imagen logotype-desktop.svg se cargará si el ancho de la pantalla es igual o mayor a 1200 píxeles.
<picture>
<source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logotype-tablet.svg">
</picture>Propósito de <source>:
- En función de las condiciones, definir la imagen adecuada.
- Informar al navegador de la existencia de imágenes en nuevos formatos e indicar cuál de ellas es adecuada para el viewport.
- Recortar la imagen.
Al final se agrega el elemento <img>, que se usará en caso de que el navegador no admita la etiqueta <picture> o no se cumpla ninguna de las condiciones definidas en las etiquetas <source>. Aquí se indica la ruta a la imagen img/logotype-phone.svg y se agrega un texto alternativo con el atributo alt.
<picture>
<source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logotype-tablet.svg">
<img src="img/logotype-phone.svg" width="226" height="30" alt="Barbería
«Borodinsky».">
</picture>
Quiero comentar algo