Como optimizar las imágenes estáticas.

El pasado fin de semana estuve trabajando en saberpsicologia.com y entre otras mejoras estuve arreglando algunas imágenes estáticas. Para aumentar el rendimiento de un sitio web es importante que las imágenes tengan el menor peso posible y pero sobre todo que se reduzca el número de peticiones HTTP.

Para ilustrar el ejemplo he pasado un test a la página inicial de Saberpsicologia con Webpagetest, y este es el resultado:

Como podéis ver se hacen una gran cantidad de peticiones HTTP para obtener las imágenes. Algunos navegadores limitan la cantidad de peticiones paralelas que se pueden hacer, lo que provoca que el tiempo de carga aumente mucho y por tanto disminuya la experiencia del usuario.

¿Cómo reducimos el número de peticiones?

La repuesta es sencilla: utilizando Sprites.

Hay varias webs que permiten generar sprites, pero la que más me gusta es Spritegen:

http://spritegen.website-performance.org/

Dado que nos ofrece muchas opciones para personalizar el sprite, como por ejemplo el tipo de archivo generado (JPG o PNG), o la orientación del sprite.

Optimizando imágenes

Una vez que hemos generado los sprites, el próximo paso es optimizar la imagen, eliminando datos innecesarios en las cabeceras, para ello la mejor herramienta online es Smushit de Yahoo:

http://www.smushit.com/ysmush.it/

Según la documentación de la API de Yahoo aún no está disponible la optimización de imágenes vía REST, pero parece probable que en un futuro cercano lo habiliten. Esto nos permitiría que al subir una imagen, de un post por ejemplo, optimizásemos la imagen por el servicio de Yahoo para después almacenarla.

Finalizamos os dejo una última herramienta online: Pixlr

Consiste en un editor de imágenes que le va a la zaga a Photoshop (salvando las diferencias claro está) pero que funciona online y de forma gratuita.