Adaptar automáticamente imágenes a dispositivos móviles

Adaptive Images, creado por Matt Wilcoxyes, un interesante proyecto muy novedoso por el cual vamos a poder adaptar automáticamente las imágenes de nuestro sitio para que se visualicen correctamente a las distintas resoluciones de los diversos dispositivos móviles.

Entre las principales ventajas de implementar este proyecto podemos destacar:

Se instala en 5 minutos.

Trabaja con sitios existentes, sin la necesidad de cambiar una sola linea de código.

Funciona directamente desde el servidor.

Funciona tanto en CMS como en sitios que no cuentan con una plataforma predeterminada.

Los requerimientos técnicos para utilizar Adaptive Images son muy sencillos: Apache 2, PHP 5 o superior, la finalmente la biblioteca gráfica GD.

El proyecto se encuentra desarrollado íntegramente en PHP, para instalarlo en nuestro sitio solo debemos incorporar unas directivas al htaccess, el proceso es muy sencillo.

Implementar esta biblioteca no solo se traduce en una mejora visual, sino que también se reflejaran importantes cambios en el rendimiento de nuestro sitio, la gráfica que inserto a continuación sirve perfectamente para entender el ahorro en transferencia que podemos llegar a obtener.

El proyecto cuenta con algunas opciones de configuración avanzada (mirar la documentación oficial), no obstante de las opciones adicionales por el momento la que me resultado más interesante es la relacionada a la cache, especialmente importante para evitar sobrecargar nuestro servidor si nuestro sitio cuenta con cientos de visitas diarias.

Si nos fijamos en la imagen podremos ver la diferencia en tamaño (Kb) de una imagen a distintos tamaños si lo adaptamos según el dispositivo con Adaptive Images.

Pero lo más importante es que con Adaptive Images, si accedemos mediante un móvil a nuestro sitios web, adaptará la imagen a un tamaño menos pesado, con la consecuente reducción de carga y tasa de transferencia.

¿Cómo funciona? El proceso es bastante simple. Los pasos que sigue son:

Cuando la página carga, un pequeño script javascript en el "head", comprueba el tamaño de la pantalla y guarda una cookie con su anchura.

El .htaccess que tendremos en el servidor intercepta cualquier respuesta para .jpg, .gif o .png que no están dentro de directorios protegidos.

La respuesta de esas imágenes se envía a un script PHP que comprobará si existe un tamaño apropiado de esa imagen para el dispositivo con el que se accede a la página, en caso de existir lo muestra.