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 **

Leave your comment

Not published.

If you have one.