Imágenes responsive en HTML

15/08/2019 | HTML | 3 comentarios

Que son las imágenes responsive y como incluirlas en tu web para ello te compartimos tres métodos de como hacerlo.


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).

Referencias

Comentarios

Carlos Huayas 23/05/2020 8:02 pm

¿Cual es la diferencia entre las Media Queries de Css y la etiqueta Picture con el atributo Srcset de Html?

kodetop 25/05/2020 8:15 pm

Carlos, es posible usar los media-query de CSS para conseguir el mismo efecto de imágenes reponsive. Pero si las imágenes son dinámicas (por que vienen de una base de datos o CMS), entonces lo recomendable es usar <picture> por que se puede imprimir las rutas de las imágenes directamente en el HTML.

Rolando Picon Nadales 17/03/2022 6:49 am

¡Muchísimas gracias! saludos cordiales

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>