Reducir el tamaño de imágenes PNG con pngquant

Cuando desarrollamos software para dispositivos móviles, hemos de tener en cuenta que éstos tienen unas especificaciones reducidas si las comparamos con los PCs tradicionales. Uno de los aspectos a tener en cuenta es el tamaño final de nuestro programa, pues probablemente de ello dependerá que más de un usuario se decida a instalarlo.

En el caso de los videojuegos, nos encontramos con que normalmente haremos uso de un gran número de imágenes, lo que dará lugar a que nuestro programa ocupe un espacio en disco elevado. Por ello, es interesante conocer herramientas que nos ayuden a optimizar los recursos de nuestro programa.

pngquant

Durante el desarrollo de mi primer videojuego para Android, me encontré que el archivo ejecutable final ocupaba bastante a pesar de no ser un juego demasiado extenso. Buscando información sobre cómo reducir el tamaño de este archivo llegué a pngquant.

pngquant es una utilidad de linea de comandos, disponible para OS X, Windows y varias distribuciones GNU/Linux, que nos permite comprimir nuestras imágenes PNG con muy poca pérdida de calidad. Es una librería de código abierto; podemos consultar su código fuente directamente desde GitHub. Además, existe una serie de herramientas gráficas que nos facilitan el trabajo con pngquant si no nos sentimos del todo cómodos con la linea de comandos. Por ejemplo, TinyPNG es una utilidad en linea que nos permite optimizar nuestras imágenes directamente desde su web.

Cómo usar pngquant

El primer paso es descargar la utilidad para nuestro sistema operativo directamente desde su página web: http://pngquant.org/. En este caso, descargaré el binario para Windows.

Una vez descargado, descomprimimos la carpeta en el lugar donde queramos instalar la librería. Por ejemplo, en mi caso he usado el directorio «C:\ desarrollo\ herramientas\ pngquant».

Al descomprimir la librería, tendremos el siguiente contenido:

Como podemos ver, además de la propia librería (pngquant.exe) se proporciona una serie de scripts .bat, que nos permitirán usar la librería de forma bastante rápida. Basta con seleccionar la imagen que queremos optimizar y arrastrarla sobre alguno de estos archivos .bat, y automáticamente se generará una copia optimizada de la imagen.

Vamos con un ejemplo:

1. Tomamos la siguiente imagen PNG sin optimizar. Es una archivo de 288 KB.

   

2. Arrastramos la imagen y la soltamos sobre el script «Drag PNG here to reduce palette automatically.bat» de pngquant.

   

3. Esto nos genera automáticamente dos imágenes optimizadas, con los sufijos «-fs8» y «-or8»:

   

   

4. Como podemos comprobar, el tamaño del archivo se ha reducido en ambos casos en más de un 70%. Además, he de reconocer que en una comparación a simple vista yo personalmente no soy capaz de apreciar los cambios.

Instalar pngquant

Para poder usar pngquant desde la linea de comandos, podemos instalarla en el sistema. Para ello, simplemente añadiremos la ruta de instalación al path del sistema (Windows):

1. Accedemos a «Panel de Control» > «Sistema y seguridad» > «Sistema»
2. Una vez ahí, seleccionamos «Configuración avanzada del sistema»
3. Se abrirá la ventana «Propiedades avanzadas». Seleccionamos la pestaña «Opciones avanzadas» y a continuación «Variables de entorno».

   

4. En la ventana de «Variables de entorno», seleccionamos la variable «path» y pulsamos el botón «Editar…».
5. En la nueva ventana podemos editar el valor de la variable. Para incluir pngquant en el path dle sistema, en el cuadro de texto «Valor de la variable» hemos de añadir al final de valor un punto y coma (;) seguido de la ruta donde tenemos descomprimido pngquant. En mi caso «C:\ desarrollo\ herramientas\ pngquant»:

   

Tras la instalación, podremos usar la herramienta tecleando «pngquant» desde la linea de comandos:

Para saber más

Por supuesto el uso de pngquant no se queda aquí. Para profundizar en el uso y las posibilidades que nos brinda esta herramienta, puedes consultar su sitio web: http://pngquant.org/