Uno de los mayores desafíos de los desarralloradores web está relacionado con el imprimir imágenes por pantalla: que estas sean lo suficientemente nítidas (buena definición) y se carguen rápidamente al mismo tiempo. El desafío es mayor cuando se requiere código semánticamente correcto y código que se adapte a cualquier navegador, cuando se requiere “responsive images”.
Hace tiempo que existe en la web un debate sobre la mejor solución para las imágenes adaptativas y mientras esta solución no esté en los navegadores el debate continuará.
El problema es que no tiene sentido servir imágenes de menor resolución en dispositivos de mayor dimensión y vice-versa, pues la (mala) experiencia del usuario puede no resumirse solo a la mala calidad de las imágenes. Utilizar la misma imagen que se usa en un desktop, en un dispositivo móvil puede resultar desastroso para el 3G del usuario. Sin imágenes responsivas, los dispositivos móviles cargan 2-3x más datos de lo que es necesario.
Existen diferentes soluciones en la red. Sobretodo en el formato Javascript. Javascript suele ser la solución a muchos problemas de incompatibilidad en el momento de desarrollar código HTML, pero a veces, por conflictos con otros scripts en la misma plataforma es el origen de otros problemas.
Entonces, mientras no existe el formato nativo de imágenes “responsive”, ¿qué solución utilizar?
Adaptive Images
Adaptive images detecta el tamaño de la pantalla del usuario y automáticamente crea, cachea, y printa la versión correcta de la imagen a través de un script de PHP. No hace falta cambiar la estructura del HTML existente. Este script es utilizado en multiples proyectos, inclusivamente como base para servir imágenes adaptativas en proyectos desarrollados con la ayuda de CMSs.
Picturefill
Picturefill está ya en su versión 2.0 y es gestionado por Filament group, con la ayuda de miembros de la comunidad RICG, una comunidad interesada en crear una única solución para las imágenes responsivas y es una de las soluciones más pontentes a dia de hoy.
En su esencia, Picturefill es un fichero de JavaScript, un Polyfll que hablita el soporte al elemento picture y sus correspondientes características en navegadores que no lo soportan.
Para evitar que la imagen se cargue dos veces en estos navegadores, picturefill no utiliza el atributo src, utilizando el atributo srcset envés.
También es posible integrar Picturefill con los CMSs más populares.
rwd.images.js
rwd.images.js es un script de Matt Stow que esconde el atributo src del elemento img, haciendo que los navegadores no executen sus propiedades en las imágenes.
Este script soporta “art direction”, lo que de cara al usuario, permite una experiencia optima en dispositivos de menor resolución.
Slimmage
Con Slimmage el control de qué imagen se carga es hecho por el CSS y no por el HTML. Slimmage reivindica funcionar en el 99% de los navegadores y providenciar una redución masiva de ancho de banda, pues no duplica las peticiones. Pretende ser completamente accesible y se ajusta de la mejor manera si no hay JavaScript. Si WebP está activado, lo detecta automáticamente y hace peticiones de imágenes WebP.
Wordpress & Drupal
Además de diferentes opciones personalizadas que se pueden encontrar en la red, de forma gratis, en los repositorios de Wordpress y Drupal es posible también encontrar plugins (o módulos) que ayudan en este proceso de forma bastante digna.
Conclusión
Creo que a pesar del interés que pueden tener cualquier una de las técnicas, aún se está muy lejos de la perfección. Es entonces necesario entender la necesidad, o lo que creemos importante para nuestro sitio web, o el sitio web que estamos desarrollando. Además de la calidad de las imágenes, hay que considerar temas como el contenido antiguo, marcas especiales de HTML, o la semántica. Estos definirán la mejor solución para nuestro problema.
Fuentes:
Still Waiting for a Standard? Try Rwd.Images.Js Instead!
Which responsive images solution should you use?
Picturefill 2.0: Responsive Images And The Perfect Polyfill
