Resumen:
En estos tips vamos a ver las 4 técnicas mas útiles y simples para la optimización de imagenes para una web. Inclusive técnicas con los últimos adelantos de css y los render engine. Los Tips de performance que vamos a desarrollar son:
- Formato, tamaño y compresión adecuada
- Convinar en css sprites
- Cache para imagenes
- Usar CSS Gradients para efectos
El problema:
En el común de los websites o webapps que se desarrollan actualmente, las imagenes son altamente utilizadas, tanto para cuestiones propias de una imagen, como para cuestiones estéticas del site. Esto hace que mas del 70% del peso de una página sean imagenes, y por ende mas del 70% del tiempo de carga depende de este factor. Asi que no podemos dejar de darle una gran atención a la hora de pensar en la optimización.
Un ejemplo de esto es el diario elpais.es, de los 500k que tiene, 370k son de imágenes. Donde hay exactamente 102 imágenes. Haciendo un análisis de los tipos y usos de imágenes, se puede ver que las mismas pueden reducirse a 43 con un peso total de 115k. Lo que nos da una ganancia de 255k, mas del 50% del peso total de la página. Si pensamos que en cada request estamos desperdiciando esa gran cantidad de bandwidth, y eso en nuestro negocio se traduce a $$$. Y peor aún, perdida de calidad de nuestro sitio en la impresión de los usuarios.
De modo que debemos poner mucha atención a la hora de incluir imágenes a nuestro site. A continuación, técnicas y herramientas para resolver este problema.
…. continuará
