Imagenes responsive en HTML5

Imagenes Responsive

Imagenes responsive en HTML5

Hola a todos y saludos desde el área Web de la Escola Espai. En el artículo de hoy, veremos cómo implementar correctamente imágenes responsive usando el nuevo elemento HTML5 <picture> y los atributos srcset y sizes del elemento <img>.

El problema de usar una única resolución en imágenes responsive

La forma más cómoda y sencilla de emplear imágenes grandes en diseños responsive, ha consistido tradicionalmente en el uso de código CSS como el siguiente;

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 80%;
}

Con un código como ese, lo que logramos es que las imágenes responsive se adapten a su contenedor (en este caso ocupará como máximo un 80% del ancho disponible y estará centrada), que se hagan más pequeñas si es necesario y que no crezcan por encima de su tamaño original para evitar que acaben pixeladas.

Sin embargo, con la proliferación de pantallas de alta densidad de pixels (pantallas retina, 4k…), nos encontramos con el problema que si queremos mostrar una imagen con mucho detalle en dispositivos con alta densidad de pixels y la misma imagen en un móvil con baja resolución, no queda más remedio que emplear imágenes con diferentes resoluciones. De lo contrario, la solución anteriormente mencionada no es muy recomendable, ya que, o bien enviamos una imagen absurdamente grande al móvil (con la lentitud y la consecuente mala experiencia de usuario que implica), o bien enviamos una imagen con insuficiente calidad a un dispositivo con una pantalla capaz de mostrar mucho detalle.

Otro posible problema es que, por motivos artísticos (art direction), en un dispositivo con pantalla panorámica queramos un imagen igualmente panorámica, mientras que en un móvil en modo retrato queramos mostrar solo parte de dicha imagen o, incluso, una imagen totalmente diferente.

Imágenes Responsive

A este gatete le gustan mucho las imágenes responsive.

 

Afortunadamente HTML5 nos ayuda a resolver estos problemas con el nuevo elemento <picture>, y con los nuevos atributos srcset y sizes del elemento <img>. Con cualquiera de las dos opciones, lo que lograremos es que solo se carguen las imágenes adecuadas para el dispositivo del usuario.

Los nuevos atributos srcset y sizes del elemento <img>

Una posibilidad consiste en utilizar los nuevos atributos srcset y sizes del elemento <img>.

Veamos un ejemplo;

<img src="movil.jpg"
    srcset="pc.jpg 1024w, tablet.jpg 640w, movil.jpg 320w"
    sizes="(min-width: 576px) 33.3vw, 100vw"
    alt="Ejemplo">

En el atributo srcset se indica la colección de imágenes disponibles separadas por comas, y después de cada nombre de archivo se indica el ancho (el número de pixels) de la imagen seguido de la letra w (width).

En el atributo sizes vamos a indicar (de nuevo, separados por comas) en que tamaños se va a usar la imagen, en este caso, indicamos que vamos a usar la imagen en dos posibles tamaños, ocupando todo el ancho (100vw), o ocupando una tercera parte (33.3vw), y además cuando se produce dicho cambio (min-width: 576px). Los dos tamaños que indicamos corresponden a nuestro diseño responsive; que en este caso correspondería a un diseño donde se muestra la imagen en una columna que ocupa todo el ancho o bien, otro diseño donde la imagen se muestra en un diseño de tres columnas ocupando cada una de ellas una tercera parte del ancho.

Con este método es el navegador el que decide cual es la imagen adecuada, incluso existe la posibilidad que en caso necesario obtenga más de una imagen (por ejemplo, si el diseño cambia ante alguna acción del usuario, como por ejemplo, si hace zoom).

En lugar de indicar diferentes tamaños, podemos indicar diferentes densidades de pixels. Veamos un ejemplo;

<img src="espai.jpg"
    srcset="espaiHD.jpg 2x, espai4K.jpg 3x"
    alt="Ejemplo">

En este caso, el navegador elegirá la imagen espai.jpg para pantallas normales (1x), espaiHD.jpg para pantallas de alta densidad (2x) de pixels y espai4K.jpg para pantallas con muy alta densidad (3x) de pixels.

Logo de Webp

Webp, un nuevo formato de imagen para la web.

Si queremos simplemente mostrar nuestras imágenes responsive con la mejor calidad posible en cada resolución, este (usar el elemento <img>) es el método recomendable. Si además queremos cambiar la imagen (no solo su tamaño/calidad) según el tipo de dispositivo (art direction), o queremos usar un formato de imagen más moderno como webp, es más recomendable el siguiente método utilizando el nuevo elemento <picture>.

HTML5 y el nuevo elemento <picture>

El nuevo elemento <picture> es más recomendable cuando necesitamos mayor flexibilidad y/o control.

Veamos un ejemplo;

<picture>
  <source media="(min-width: 800px)" srcset="img/pc.png">
  <source media="(min-width: 480px)" srcset="img/tablet.png">
  <img src="img/movil.jpg" alt="Ejemplo">
</picture>

Nota: El orden de los elementos <source> es importante tal y como veremos a continuación, también lo es el del elemento <img> que debe de ser el último hijo del elemento <picture>.

Tal y como se pude intuir fácilmente, en este ejemplo tenemos 3 imágenes diferentes. La imagen por defecto la definimos en el elemento <img> y será la que tenga la resolución más baja (además en este caso es .jpg). Esta será la que se utilice, por ejemplo, para teléfonos móviles. Después, tenemos un par de elementos <source> que indican diferentes imágenes si se cumple una serie de condiciones.

En este caso, el navegador está forzado a elegir la primera opción (de ahí la importancia del orden de los elementos <source>) que cumpla las condiciones que indican las media queries (o bien la que indica el elemento <img> si no se cumple ninguna). Por lo tanto, el navegador no tiene la capacidad de decidir cual se adapta mejor a cada caso, se limita a “cumplir ordenes”. Por eso, a no ser que tengamos muy claro que es lo que queremos, si solo necesitamos hacer que la misma imagen a diferentes resoluciones se adapte al diseño, es más recomendable el método anterior.

Otro caso en el que deberíamos de emplear el elemento <picture>, es si quisiéramos usar un nuevo formato de imagen más moderno en aquellos navegadores que lo soportan. En dicho caso, podemos usar algo como en el siguiente ejemplo;

<picture>
    <source srcset="espai.webp" type="image/webp">
    <img src="espai.jpg" alt="Ejemplo">
</picture>

Obviamente, en este caso también podríamos usar media queries al igual que en el ejemplo anterior.

En los elementos <source> tambien podemos utilizar los atributos srcset y sizes de forma similar a la empleada en el elemento <img>, ofreciendo de este modo un amplio abanico de combinaciones y posibilidades (aunque es a costa de complicar sensiblemente el código HTML).

Herramientas para crear automáticamente imágenes responsive

Afortunadamente existen herramientas que nos ahorran el tedioso trabajo de crear las múltiples versiones de la misma imagen para diferentes resoluciones.

Un ejemplo es esta página, Responsive Image Breakpoints Generator, en la cual podemos subir una imagen, configurar los diferentes tamaños que deseamos, y descargar de forma cómoda todas las versiones de la imagen a diferentes resoluciones y optimizadas para su uso en la Web. Para nuestra comodidad, incluso nos generará el código HTML necesario para utilizarlas tanto con el elemento <img> como con el elemento <picture>.

Y nada más. Espero que este artículo os haya sido de interés, y que os haya ayudado un poco a comprender cómo funcionan realmente las imágenes responsive y cómo implementarlas en HTML5 con el nuevo elemento <picture> y los nuevos atributos srcset y sizes de <img>.

3Comentarios

  • San Judas Tadeo
    17/08/2018

    muy buen aporte amigo me gusto mucho le leido lo pondre a aplicar de inmediato

  • jose
    21/06/2018

    Muchas gracias por tomarte el tiempo para hacer este tipo de aportes, realmente es de mucha ayuda, felicitaciones.

  • daniel
    27/03/2018

    Muchisimas gracias por tomarte el tiempo y el esfuerzo por educar a los novatos ,còmo es mi caso…Desde ya un caluroso abrazo y mis felicitaciones…

Escribe un comentario