Picturefill

Hoy os hablamos de la librería de jquery Picturefill (http://scottjehl.github.io/picturefill/), cuyo contenido descargable podéis encontrar en GitHub (https://github.com/scottjehl/picturefill).

Esta librería te permite cargar diferentes imágenes dependiendo de la resolución de la pantalla en que se visualice la web. De este modo, tenemos la opción de usar siempre la misma imagen, pero en diferentes versiones, reducida de tamaño (por lo tanto, reducida de peso). El código es muy sencillo de implementar, no son más que unas cuantas líneas (tantas como imágenes queramos utilizar). El rollo: tener que crear la misma imagen para varias resoluciones...

Después de echarle un ratillo e investigarla un poco, me ha convencido. Creo que deberíamos implementarla en nuestros sitios.

Si echáis un ojo al código, veréis que enlaza dos librerías de jquery ("picturefill.js" y "matchmedia.js") y en el código HTML coloca un span dentro del cual se ponen diferentes span, uno por imagen que queramos implementar.

En primer lugar coloca la imagen sin "data-media" (propiedad que Internet Explorer 8 e inferiores no saben interpretar) y a continuación el resto de imágenes con un "data-media" diferente en cada caso (dentro de este atributo se mete el mediaquery que queramos aplicarle a la imagen en cuestión). Al final del todo, pone un código para cargar una imagen en caso de que no funcione el jquery en ciertos navegadores.

Podeis ver el ejemplo de cómo queda en el link de antes: http://scottjehl.github.io/picturefill/. Si reducís el tamaño del navegador, podréis ver que la imagen va cambiando (cada imagen tiene un tamaño-peso diferente, en la esquina superior derecha aparece su tamaño). Sin embargo, en IE8 siempre carga la imagen pequeña, y no queremos eso...

He corregido este error que podría "complicarnos la vida" en Internet Explorer 8 e inferiores. Para ello, existen dos formas:

1.- Poner un condicional que diga que cuando estemos en IE8 te cargue una imagen concreta:

2.- Modificar el orden de las imágenes, poniendo primera la grande (sin el "data-media" que IE8 desconoce) y cambiando el min-width de los mediaquery por un max-width:

       

Pros:

- 100% accesible, valida tanto HTML como accesibilidad (incluso desactivando javascript tienes opción de indicarle qué imagen cargar)
- Al darte la opción de cargar imágenes más pequeñas, las webs que visualicemos en dispositivos móviles irán más fluidas, lo cual es una ventaja y un punto a favor para la navegación vía móvil que a veces se hace pesada a cuenta del peso de los elementos de las web.
- Podemos añadir una clase a cada imagen, por lo que podríamos darle diferente apariencia si fuera necesario.
- Para dispositivos de retina, podemos poner mediaquerys a doble pixel ratio:

   

Contras:

- Hay que crear varias versiones de la misma imagen, lo cual puede convertirse en un trabajo tedioso si queremos optimizar el peso de todas las imágenes de un portal con muchas imágenes.