Una herramienta para optimizar imágenes y cómo no desperdiciarla en Blogger

La mascota de TinyPNG. Un simpágico panda.

La velocidad de carga de nuestras páginas es algo que tiene bastante importancia. Hace ya tiempo que Google valora ese parámetro a efectos de indexarnos más arriba o más abajo en sus resultados de búsqueda, pero es que desde siempre, el tiempo en cargar una página ha sido para muchos usuarios la frontera para llegar o no a leerla. Todo depende del límite de su paciencia.

Generalmente las imágenes suelen ocupar una buena parte de bits cargados y por eso optimizarlas siempre será una buena inversión. A ello nos puede ayudarTinyPNG, una herramienta online especialmente útil para el formato png con transparencia.

Su uso es sencillo. Simplemente arrastramos las imágenes a la página y tras la transformación, la utilidad nos ofrece un enlace para descargar la nueva imagen.

He hecho unas pruebas y en la captura adjunta podréis ver hasta qué punto es eficaz. Entre un 71 y un 89% de ahorro y como media, un 82%. En fin, si no es un 80 (que casi seguro que lo será, un 50% ya merecería la pena.

Sin embargo tengo que hacer una salvedad para los que estéis en Blogger y es que no siempre nos serán de utilidad herramientas como esta si no conocemos las limitaciones, así que allá van.

Particularidades de Blogger

Esto lo descubrí al ir a poner en esta entrada un par de imágenes idénticas, una original y otra optimizada para que pudierais palpar la diferencia. Para ello subí esa de Mario que visteis en la captura de 1,5MB (1500KB) que comprimida ocupaba sólo 301,8KB y para mi sorpresa, una vez subidas a Blogger (Picasa-G+) ambas pesaban más o menos lo mismo: 950KB y 858KB respectivamente. Y sí, la comprimida es la primera por lo que incluso ocupaba algo más que la sin comprimir.

Lo importante aquí es que la imagen original era de 1486x1735px y que Blogger la redujo a 1370x1600px. Esos 1600px es el tope que Blogger a priori (otro día veremos un truco sobre esto) admite para el ancho o el alto de las imágenes, así que deduzco que al cambiarlas Blogger, perdieron sus características originales de compresión y por eso casi se igualaron los pesos... al alza.

Cuando caí en lo de los 1600px, cambié el tamaño de la original para que fuera exactamente de ese alto y repetí el proceso subiendo la normal y la tratada con TinyPNG. Ahora sí que había diferencia y el peso respectivo era de 899 vs 252 KB, así que ya sabéis el tamaño máximo para aprovechar este tipo de herramientas.

Pero había otra cosilla más y es que en mi blog suelo poner las imágenes en tamaño "extra-grande" (640px) y ya sabéis que Blogger genera automáticamente imágenes de todos los tamaños posibles (Ver:Subir una imagen y disponer de cientos), una característica muy útil del almacenamiento de imágenes con Google, pero que en ocasiones tiene algún que otro inconveniente.

En este caso, la imagen optimizada de 1600px volvía a ser "descomprimida" al reformatearla con el tamaño extra-grande (s640) y volvíamos al principio, a la imagen con más peso.

Por fin reduje la imagen a 640px con un editor respetando las proporciones, la pasé por TinyPNG y ¡voilá!... este fue el resultado y como veis, no se aprecia diferencia alguna a simple vista.

Imagen sin tratar de 548x640px = 196,0 KB

Imagen optimizada de 548x640px = 56,3 KB

Conclusión

Cuando quieras subir una imagen a tu blog, usa primero un editor de imágenes para ajustarla al tamaño máximo con el que realmente se va a mostrar en él, olvidándote de que luego la plantilla la pudiera redimensionar. La verás más pequeña y aparentemente pensarás que es menos pesada, pero no siempre es así.

Una vez al tamaño deseado, optimízala con esta u otra herramienta similar y ahora sí que la puedes subir con garantías de que pesará menos que la original.

Si las alojas desde Blogger, usa en cualquier caso imágenes de menos de 1600px (alto o ancho) a menos que no tengas otra opción, como ocurre por ejemplo con infografías, normalmente muy altas de tamaño.