Cómo achicar ese maldito PNG
by gab on noviembre 17, 2011
Este truco es casi que increíble y se lo dedico a mis amigos diseñadores: Cómo optimizar un PNG para Web o Mobile.
Todos hemos luchado con esos [malditos] PNGs en alguna ocasión. Son lindos, maravillosos, se ven bárbaros, pero a veces son muy pesados y ni con la optimización para Web de Photoshop se puede disminuir su tamaño.
Bueno, pues navegando por allí una solución interesante para achicar ese maldito PNG que siempre quisimos… y se cruzó sola ante mis ojos, no la estaba buscando.
El truco sale de un tweet de Anthony Calzadilla y lo leí investigando los artículos de Blog de un Template de WordPress, llamado Bones y consta de una cantidad ridículamente escasa de pasos.
1. Abre tu imagen PNG / PSD,
2. Posteriza la imagen con un valor de 40,
3. Graba para Web como PNG.
Listo. Con solamente eso, la reducción es de 30 / 40 %. Notable. Lo probé con un PNG al azar que tenía y achiqué el tamaño de 558 kb a 355 kb [Insert «wow» here].
Las diferencias entre las imágenes posterizadas, en zoom al 100% son prácticamente imperceptibles.
Try it!
** UPDATE 2017 **
Además de el truco de la posterización, recomiendo ahora un paso número 4.
4. Procesar la imagen posterizada con ImageOptim, que reorganiza, descarta alguna información innecesaria y golpea al PNG hasta que se achica aún más (sin perder calidad). En caso de que acepten perder un % de calidad de la imagen, la recompresión es aún más efectiva.
El ImageOptim también optimiza los JPG, así que se ha convertido en un gran amigo y el último proceso que utilizamos con las imágenes antes de subirlas a producción.
Prueben!
** / Fin UPDATE 2017 **
