Imágenes responsive en HTML

15/08/2019 | HTML | 0 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.

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.

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.

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:

Se puede utilizar este método de acuerdo al formato de imagen que soporta el dispositivo:

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

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>