Imágenes adaptativas con HTML

El diseño web responsive o adaptativo no es más que conseguir que la página web sea visible y contenga las mismas funcionalidades independientemente del dispositivo utilizado para acceder a ella.

Desde el punto de vista del diseño de la página la gran diferencia entre los diferentes dispositivos es el tamaño y la resolución del visor. Una pantalla de 25 pulgadas no es lo mismo que otra de 7. Sin embargo las páginas han de ser igualmente utilizables en ambos entornos.

Al cambiar de entorno de visualización los elementos de la página se deben redistribuir y los tamaños de las imágenes deben adaptarse. Para esto se puede usar Javascript y CSS, pero también es posible hacerlo con las nuevos características que ofrece HTML5. Se trata de los atributos srcset. media y size.

Estos atributos permiten ajustar el tamaño de imagen al tamaño del visor, sería una imagen responsive, pero también permite cambiar de imagen para que se ajuste mejor al contexto. Por ejemplo, si reducimos el tamaño de una imagen podemos perder detalles, puede ser mejor usar una versión recortada.

Para ver como funcionan con el editor de esta web (el que se usa con el botón probrar código) mejor usa el navegador Firefox, Chrome no muestra los ejemplos adecuadamente. Pa comprobar puedes modificar el tamaño de la mitad de la página donde se ven los resultados o puedes usar el inspector de código del navegador para probar distintos tamaños de pantalla.

Los tamaños de un elemento img como cualquier otro puede ser modificado dinámicamente mediante CSS. En est página vemos métodos HTML, sin CSS

Imágenes responsive: srcset

El atributo srcset permite usar imágenes alternativas en función de la pantalla que el usuario esté usando. Simplemente le indicamos una url de imagen y el tamaño real de la imagen.

<img srcset="

/tutorhtml5/imgs/foto3x.jpg 996w,

/tutorhtml5/imgs/foto2x.jpg 667w,

/tutorhtml5/imgs/foto1x.jpg 400w "

src="/tutorhtml5/imgs/foto.jpg" alt="imagen adaptativa"

Uso del atributo srcset con resoluciones

¿Como se interpreta esto? Fácil, foto1x.jpg es la imagen más pequeña con 400 pixels de ancho, foto2x.jpg es de tamaño medio 667pixels, foto3x.jpg tiene un tamaño mayor, 996 pixels. Pero ojo la unidad usada es w no los habituales pixels. Esta unidad se refiere a a los pixels de definición del visor.

El navegador adaptará el tamaño mostrado al tamaño de la pantalla. Si el navegador no puede hacer esto porque no reconoce este atributo pues usa la imagen por defecto señalada en src. Eso lo hace dividiendo el tamaño indicado de la imagen por el ancho de la pantalla y seleccióna el más próximo a la densidad de pixeles de esa pantalla..

Para ver el efecto abre la primera ventana que mostrará la imagen de menor tamañño, la foto1x, y agranda la ventana con ayuda del ratón, verás como se van mostrando las otras imágenes.

Pero es más práctico usar las alternativas con valor del ancho de pantalla. En este caso en lugar de valor de resolución usamos tamaños reales de la imagen usando como unidad de medida w, valor relativo al ancho de la vetana.

Con esto las imágenes se adaptarán perfectamente al ancho del dispositivo, la va escalando. Existe una vaiante que adapta la imagen a la densidad de pixels del visor, algo que depende del dispositivo físico. En lugar de anchos en unidades w se indica para cada imagen la densidad de bits del dipositivo 1x, 2x o 3x. A mayor densidad mayor puede ser la imagen usada. Estas cifras indican el número de pixels de la pantalla física por cada pixel de tamaño CSS.

Las reglas CSS permiten igualmente controlar el tamaño de la imagen ajustándola a su contenerdor utilizando anchos relativos (porcentajes)

Imágenes responsive: sizes

Podemos tener aún más control sobre el tamaña mostrado e la imagen mediante este otro atributo, size. En este caso además del srcset indicamos la imagen que debe elegir el navegador según el tamaño del visor (condición de medios).

<img srcset="

/tutorhtml5/imgs/foto3x.jpg 996w,

/tutorhtml5/imgs/foto2x.jpg 690w,

/tutorhtml5/imgs/foto1x.jpg 400w "

sizes = "

(max-width: 400px) 400px,

(max-width: 720px) 600px,

(min-width: 721px) 1024px"

src="/tutorhtml5/imgs/foto.jpg" alt="imagen adaptativa">

Uso del atributo srcset con dimensiones

Para cada imagen posible existe un atributo size con dos partes:

Una condición entre paréntesis que comprueba el tamaño de ventana
La anchura disponible para mostrar la imagen

Al usar el los atributos srcset y sizes el navegador actúa como sigue

Comprueba el tamaño de la ventana
Verifica la primera condición de medios que se cumple
Determina el ancho disponible para la imagen
Ellije la imagén con tamaño más proximo de las declaradas en srcset

En el ejemplo propuesto si la anchura de la pantalla es 400px o menos (max-width: 400px) se usa foto1px, si esa condición no se cumple pasa a la siguiente: si la pantalla tiene un ancho hasta 720px se usa la imagen más próxima a 720px y si está por encima de 720px se usa la imagen foto.jpg.

La última coindición no sería necesaria, pero la dejo a fin de que se vea como funionan las condiciones.

Este ejemplo no se ve bien con página de probar códigos, deberías crearte una página web y abrirla con ventanas de explorador de diferentes tamños para ver el efecto. Para verlo ahora:

Al igual que en el caso anterior, para ver el efecto comienza abriendo la primera ventana que mostrará la imagen de menor tamañño, la foto1x, y agranda la ventana con ayuda del ratón, verás como se van mostrando las otras imágenes.

Insisto si no ves el efecto puede ser por problemas de cache, lo mejor es probarlo en páginas independientes

El uso de sizes no es indispensable para el escalado. Realmente srcset es suficiente.

Imágenes responsive: Picture

Aún existe una tercera via para conseguir que nuestras imáges se ajusten a la pantalla. Se trata del elemento <picture>, es parecido a una abreviatura de los atributos srcset y sizes. Este es el que mejor funciona como podrás comprobar si lo ejcutas en el editor.

Se trata de un contendor con elementos hijos

source: imagenes optativas en función del formato y/o el tamaño de visor disponible

type: tipo mime para esta imagen. Vale para tipos de imágenes.
media, srcset : imágenes según comdición de medios

img: imagen por defecto si no existe una imagen adecuada entre los elementos source

Este contenedor no deja que el navegador decida que imagen usar, se la indicamos nosotros en el código con los atributos srcset y media explicados en el apartado anterior. Ademas este contenedor permite también adapta el formato de la imagen al formato admitido por el navegador. Incluye un elemento img que actuará como imagen por defecto si no se puede cumplir con el atributo type ni con el srcset - size.

</picture>

Uso del elemento PICTURE para imagen responsive

Utiliza una imagen de tamaño fijo en función del ancho de la ventana. En el ejemplo

si el ancho es igual o menor de 400px usa la imagen foto1x.jpg
si el ancho es mayor de 400px (por la primera regla) e igual o menor a 720px usa la imagen foto2x.jpg
si el ancho es igual o mayor que 721 usa la imagen foto3x.jpg

Volvemos a la importancia del orden de las condiciones de media. Si la condición max-widht: 720px estuviera en primer lugar al acceder a la página en un dispositivo de 300p de ancho de pantalla se mostraría la foto2x.jpg, porque se cumpliríra que el ancho no alcanza los 720px.

Para ver en funcionamiento este método puedes usar estos enlaces que abrirán ventanas de distintos tamaños

Aparentemente son métodos iguales, pero hay una diferencia sutil: el uso de srcset-sizes deja que el navegador elija la imagen usada y adapte mejor los tamaños, en Picture es el diseñador el que decide todo. Si se trata de cambiar una imagen por otra el elmento picture es más indicado, si predomina una cuestión de resolución y tamaños puede ser mejor usar srcset-sizes.

El uso de sizes y picture es adecuado par mostrar imágenes de un tamaño fijo pero adatado al dispositivo