Una guía para el uso de las especificaciones <picture> y srcset.
Dentro de toda la información que engloba una página web, las imágenes son a menudo una de las partes más importantes. Desde que existe internet, y ya van más de 25 años, las imágenes no han sido muy “adaptables”, siempre han tenido como un valor fijo su tamaño, el formato, el recorte que muestran. Todo ello definido por un único src.
Para los desarrolladores web, las pantallas de alta resolución y los diseños Responsive han supuesto un acicate a la hora de “inventar” soluciones para que las imágenes no se queden atrás con respecto al resto de la maqueta. En un primer momento, esto supuso que las imágenes que se subían eran cada vez más y más grandes y pesadas con lo que el tamaño de los archivos se disparó, y provocó una navegación cada vez más lenta.
Hay que partir de la base de que las imágenes han sido el primer obstáculo para la implementación de páginas que sean realmente adaptables (Responsive), que escalen correctamente en sentido vertical y horizontal, y que lo hagan de manera eficiente teniendo en cuenta el contexto de navegación de cada usuario.
Y aquí viene el cambio.
La última especificación del elemento <picture> es el resultado de años de debate sobre la manera de hacer adaptables las imágenes. Permite a los desarrolladores web adoptar formas semánticas que agrupan varias versiones de la misma imagen. Cada una de estas versiones tiene las características técnicas más adecuadas a cada usuario en particular. Esta nueva especificación se está aplicando ya en Chrome, Opera, Firefox e incluso Internet Explorer.
En primer lugar vamos a echar un vistazo a las formas en que los entornos de navegación varían, es decir, la forma en que queremos que nuestras imágenes se adapten.
- Las imágenes deben ser capaces de adaptarse a diferentes dispositivos-pixel-ratio. Que las pantallas de alta resolución ofrezcan imágenes de alta resolución, pero que no necesitemos enviar esas mismas imágenes a los usuarios que no verán todos esos píxeles extra. Este uso le llamaremos device-pixel-ratio.
- Si nuestro diseño es fluido, sensible, entonces las imágenes se deben encoger y estirar para adaptarse a él. Este será el uso tipo imagen-fluida.
- Teniendo en cuenta los dos casos anteriores, necesitamos que las imágenes estén disponibles en múltiples resoluciones para que se puedan escalar de manera eficiente. Afrontar los dos casos anteriores será el caso del uso del tamaño variable de la imagen.
- En último lugar los navegadores ya soportan diferentes formatos de imagen. Se puede dar el caso de querer enviar formatos más de fantasía como el WebP para navegadores avanzados, y proveer de jpg a los navegadores que no soportan formatos tan novedosos. A esto lo llamaremos un uso de Conmutación.
La nueva especificación <picture> aporta características para estos casos, a continuación los analizamos uno a uno.
Device-pixel-ratio
Partimos de una imagen de ancho fijo que deseamos adaptar a diversos dispositivos-pixel-ratio. Para esto utilizamos la primera herramienta que nos da la nueva especificación para agrupar y describir las fuentes de la imagen: el atributo srcset.
Tenemos dos versiones de la imagen:
small.jpg (320 × 240 píxeles)
large.jpg (640 × 480 píxeles)
Si queremos enviar large.jpg sólo a los usuarios con pantallas de alta resolución, lo hacemos así:
< img srcset = " 1x small.jpg, 2x large.jpg " src = " small.jpg "alt = " Una foto " />
Srcset toma una lista separada por comas de las direcciones URL de las imágenes, cada una con una x que indica el pixel-ratio del dispositivo al que está dirigido.
Src está para los navegadores que no entienden srcset. Y el alt para los que ni siquiera muestran las imágenes.
Imagen-fluida y tamaño variable de imagen
Para los navegadores siempre las imágenes han sido la parte más pesada del contenido con lo que lo primero que un navegador va a hacer es repasar todo el código HTML, localizar las imágenes y comenzar a cargarlas. Para evitar este problema de la pre-carga, primero se empezaron a utilizar preguntas enviadas a las fuentes. Pero esto no evita tiempos de carga mayores y errores en la respuesta y la muestra de los contenidos.
Realmente es mucho más sencillo decirle al navegador el número de pixeles que necesita a través de un nuevo atributo sizes, y el número de pixeles de cada una de las fuentes disponibles con el atributo w, descritos en la etiqueta srcset. Lo único que tiene que hacer el navegador es coger la fuente más pequeña que puede mostrar nítida.
Para mostrarlo gráficamente, si tenemos tres versiones de una imagen:
large.jpg (1.024 × 768 píxeles)
medium.jpg (640 × 480 píxeles)
small.jpg (320 × 240 píxeles)
Y queremos colocar este contenido en una cuadrícula flexible que comienza con una columna hasta adaptarse a tres en los tamaños mayores, proporcionamos este código:
< img srcset = " 1024w large.jpg, 640W medium.jpg, small.jpg 320W "tamaños = " (min-width: 36em) 33.3vw,
100vw " src = " small.jpg " alt = " Una foto " />
Utilizamos de nuevo srcset pero en lugar de x, adjuntamos una descripción con w a nuestras fuentes. Este describe el ancho real del archivo de referencia en pixeles.
De momento damos la especificación sólo de anchura. Aunque la altura también es importante, de momento lo dejamos solo en anchura.
Por lo tanto, w en srcset que indica cuántos pixeles tiene cada imagen. El siguiente atributo es size. Este indica al navegador el número de pixeles que necesita mediante la descripción de la anchura de nuestra imagen. Con esto estamos dando al navegador información sobre el diseño de nuestra página, para que pueda elegir una fuente de imagen antes de haber analizado siquiera una hoja de estilo css.
Esto lo hacemos dando al navegador una anchura en css que informa del ancho de la imagen representada. Las anchuras en css pueden ser absolutas, 99px, o relativas, 33.3vw, como en nuestro ejemplo. Esto permite a la imagen ser flexible.
Si la imagen ocupa un tercio de la pantalla, el atributo size debería tener este aspecto:
Size=”33.3vw”
Pero nuestro ejemplo no es tan sencillo ya que tiene un limite en 36ems. Por debajo de este la imagen ocupará el 100% de la pantalla.
Para hacerlo, utilizamos este código:
sizes="(min-width: 36em) 33.3vw, 100vw”
Este es su formato:
sizes="[media query] [length], [media query] [length] etc… [default length] "
El navegador repasa cada consulta de medios hasta que encuentra uno que coincida y luego utiliza la longitud correspondiente. Si no hay uno coincidente, el navegador utiliza la longitud por defecto.
Tanto con un size de longitud, y un conjunto de fuentes con descripciones w en la etiqueta srcset para elegir, el navegador dispones de todo lo que necesita para cargar de manera eficiente una imagen en un diseño fluido.
Además, estos atributos dan al navegador información suficiente para adaptar la imagen a diversos dispositivos-pixel-ratio. También permiten que el navegador tenga cierto margen de maniobra. Al fijar las condiciones de navegación en función de las fuentes significa que el navegador puede adaptar su elección en base a un conjunto de condiciones como si la pantalla es de alta resolución, o si opcionalmente se pueden cargar imágenes más pequeñas cuando el ancho de banda es más lento.
Y una cosa más, aunque el ejemplo mantiene un tamaño en porcentaje del ancho de la pantalla, podemos combinar anchos absolutos y relativos si por ejemplo añadimos una barra lateral de 12em añadida al diseño de tres columnas.
Utilizaríamos este código:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
Conmutación
Supongamos en vez de estirar y adaptarse a las múltiples condiciones de los navegadores, queremos dar un nuevo formato de archivo a los navegadores que no soportan las nuevas especificaciones. Para ello utilizamos lo siguiente:
< picture >< source type = " image/svg " src = " logo.svg " /> < source type = " image/png " src = " logo.png " /> < img src = " logo.gif " alt = " Un logo " /> </picture >
Si el navegador no entiende image/svg, entonces salta la primera fuente, y si no entiende la segunda finalmente cae en la imagen simple gif.
Todas estas características permiten disponer de un amplio conjunto de herramientas para crear imágenes verdaderamente adaptables y flexibles en una amplia gama de dispositivos.
Más información en Responsive Images Community Group
Comentarios