Una imagen responsive es una imagen que se adapta de acuerdo a las condiciones donde es visualizada, puede adaptarse de acuerdo al ancho de la pantalla, a la densidad de pixels, a la orientación, etc. Veamos algunos métodos para mostrar imágenes responsive.
Método básico
La forma más sencilla de convertir una imagen en responsive es colocarla dentro de un contenedor y mostrar la imagen al ancho total del contenedor, de esta forma controlamos el ancho de la imagen con el ancho del contenedor.
<div class="photo">
<img src="photo.jpg" alt="Photo" style="width:100%;">
</div>
El problema de este método es que utiliza una sola imagen para todos los dispositivos, sucede que en dispositivos móviles vemos correctamente la imagen aunque estemos cargando una imagen muy grande, esto es ineficiente y lento.
Método con el atributo srcset
Este método permite definir las reglas que permiten al navegador elegir la imagen adecuada a mostrar, estas reglas son «sugerencias» que el navegador utilizará dependiendo del tipo de conexión o incluso las preferencias del usuario. Este método utiliza dos atributos:
srcset: es una lista separada por comas con las imágenes disponibles, cada imagen se expresa con la ruta del archivo y una propiedad de la imagen (ancho, alto, densidad).sizes: es una lista separada por comas con el conjunto de reglas y tamaño sugerido, se pueden usar media queries como reglas.
Es posible usar este método utilizado el ancho de la imagen, para ello se utiliza el factor w que indica el ancho en pixels. En el siguiente ejemplo para pantallas de máximo 480px de ancho se sugiere utilizar imágenes de al menos 440px que en nuestro caso sería la imagen de 480px.
<img srcset="photo-320.jpg 320w,
photo-480.jpg 480w,
photo-800.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="photo.jpg" alt="Photo">
Es posible usar este método utilizando la densidad de pixels, para ello se utiliza el factor x que indica la densidad de pixels del dispositivo (2x es para pantallas retina), en este caso no es necesario incluir el atributo sizes.
<img srcset="photo-400.jpg,
photo-600.jpg 1.5x,
photo-800.jpg 2x"
src="photo.jpg" alt="Photo">
Método con el elemento <picture>
En este método se utilizan las etiquetas <source> para definir las reglas y la respectivas imágenes a utilizar. Las reglas se interpretan en el orden que se declaran: si la primera regla se cumple ya no continua con las demás reglas, si ninguna regla se cumple entonces se utiliza la imagen declarada con la etiqueta <img>.
Se puede utilizar este método de acuerdo al tamaño de la pantalla:
<picture>
<source media="(min-width: 800px)" srcset="photo-800.jpg">
<source media="(min-width: 480px)" srcset="photo-480.jpg">
<img src="photo-320.jpg" alt="Photo">
</picture>
Se puede utilizar este método de acuerdo al formato de imagen que soporta el dispositivo:
<picture>
<source type="image/svg+xml" srcset="logo.svg">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="Logo">
</picture>
Conclusiones
Para utilizar imágenes responsive hay que evitar problemas de performance utilizando un método que permita mostrar las imágenes de acuerdo a alguna característica del dispositivo (ancho de la pantalla, la densidad de pixels, soporte de formatos de imagen).
Comentarios