{"id":31,"date":"2014-10-12T17:40:01","date_gmt":"2014-10-12T16:40:01","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=31"},"modified":"2015-04-03T09:39:13","modified_gmt":"2015-04-03T08:39:13","slug":"optimizar-imagenes-png-con-pngquant","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/tratamiento-imagenes\/optimizar-imagenes-png-con-pngquant\/","title":{"rendered":"Reducir el tama\u00f1o de im\u00e1genes PNG con pngquant"},"content":{"rendered":"

Cuando desarrollamos software para dispositivos m\u00f3viles, hemos de tener en cuenta que \u00e9stos\u00a0tienen unas especificaciones reducidas si las comparamos con los PCs tradicionales. Uno de los aspectos a tener en cuenta es el tama\u00f1o final de nuestro programa, pues probablemente de ello depender\u00e1 que m\u00e1s de un usuario se decida a instalarlo.<\/p>\n

En el caso de los videojuegos, nos encontramos con que normalmente haremos uso de un gran n\u00famero\u00a0de im\u00e1genes, lo que dar\u00e1 lugar a que nuestro\u00a0programa\u00a0ocupe\u00a0un espacio en disco\u00a0elevado. Por ello, es interesante conocer herramientas que nos ayuden a optimizar\u00a0los recursos\u00a0de nuestro programa.<\/p>\n

pngquant<\/h3>\n

Durante el desarrollo de mi primer videojuego para Android, me encontr\u00e9 que el\u00a0archivo ejecutable final ocupaba bastante\u00a0a pesar de no ser un juego demasiado extenso. Buscando informaci\u00f3n sobre c\u00f3mo reducir el tama\u00f1o de este archivo llegu\u00e9 a\u00a0pngquant<\/a>.<\/p>\n

pngquant <\/em>es una utilidad de linea de comandos, disponible para OS X, Windows y varias distribuciones GNU\/Linux, que nos permite comprimir nuestras im\u00e1genes PNG con muy poca p\u00e9rdida de calidad.\u00a0Es una librer\u00eda de c\u00f3digo abierto; podemos consultar\u00a0su c\u00f3digo fuente directamente desde GitHub. Adem\u00e1s, existe una serie de herramientas gr\u00e1ficas que nos facilitan el trabajo con pngquant<\/em> si no nos sentimos del todo c\u00f3modos con la linea de comandos. Por ejemplo,\u00a0TinyPNG<\/a> es una utilidad en linea que nos permite optimizar nuestras im\u00e1genes directamente desde su\u00a0web.<\/p>\n

C\u00f3mo usar\u00a0pngquant<\/h4>\n

El primer paso es descargar la utilidad para nuestro sistema operativo directamente desde su p\u00e1gina web: http:\/\/pngquant.org\/<\/a>. En este caso,\u00a0descargar\u00e9 el binario para Windows.<\/p>\n

Una vez descargado, descomprimimos la carpeta en el lugar donde queramos instalar la librer\u00eda. Por ejemplo, en mi caso he usado el directorio \u00abC:\\ desarrollo\\ herramientas\\ pngquant\u00bb.<\/p>\n

Al descomprimir la librer\u00eda, tendremos el siguiente contenido:<\/p>\n

\"Contenido<\/a>
Contenido pngquant<\/figcaption><\/figure>\n

Como podemos ver, adem\u00e1s de la propia librer\u00eda (pngquant.exe) se proporciona una serie de scripts .bat, que nos permitir\u00e1n usar la librer\u00eda de forma bastante r\u00e1pida. Basta con seleccionar la imagen que queremos optimizar y arrastrarla sobre alguno de estos archivos .bat, y autom\u00e1ticamente se generar\u00e1 una copia optimizada de la imagen.<\/p>\n

Vamos con un ejemplo:<\/p>\n

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

    \"Imagen<\/a>
    Imagen original: 288 KB<\/figcaption><\/figure><\/li>\n
  2. Arrastramos la imagen y la soltamos sobre el script \u00abDrag PNG here to reduce palette automatically.bat<\/em>\u00bb de pngquant.\n

    \"Arrastrar<\/a>
    Arrastrar sobre script de pngquant<\/figcaption><\/figure><\/li>\n
  3. Esto nos genera autom\u00e1ticamente dos im\u00e1genes optimizadas, con los sufijos \u00ab-fs8\u00bb y \u00ab-or8\u00bb:\n
    \"Imagen<\/a>
    Imagen optimizada (fs8): 80 KB<\/figcaption><\/figure>\n

    \"Imagen<\/a>
    Imagen optimizada (or8): 75 KB<\/figcaption><\/figure><\/li>\n
  4. Como podemos comprobar, el tama\u00f1o del archivo se ha reducido en ambos casos en m\u00e1s de un 70%. Adem\u00e1s, he de reconocer que en una comparaci\u00f3n a simple vista yo personalmente no soy capaz de apreciar los cambios.<\/li>\n<\/ol>\n

    Instalar pngquant<\/h4>\n

    Para poder usar pngquant<\/em> desde la linea de comandos, podemos\u00a0instalarla en el sistema. Para ello, simplemente a\u00f1adiremos la ruta de instalaci\u00f3n al path del sistema (Windows):<\/p>\n

      \n
    1. Accedemos a \u00abPanel de Control\u00bb > \u00abSistema y seguridad\u00bb > \u00abSistema\u00bb<\/li>\n
    2. Una vez ah\u00ed, seleccionamos \u00abConfiguraci\u00f3n avanzada del sistema\u00bb<\/li>\n
    3. Se abrir\u00e1 la ventana \u00abPropiedades avanzadas\u00bb. Seleccionamos la pesta\u00f1a \u00abOpciones avanzadas\u00bb y a continuaci\u00f3n \u00abVariables de entorno\u00bb.\n

      \"Configuraci\u00f3n<\/a>
      Acceder a la ventana de variables del entorno de Windows<\/figcaption><\/figure><\/li>\n
    4. En la ventana de \u00abVariables de entorno\u00bb, seleccionamos la variable \u00abpath\u00bb y pulsamos el bot\u00f3n \u00abEditar…\u00bb.<\/li>\n
    5. En la nueva ventana podemos editar el valor de la variable.\u00a0Para incluir pngquant<\/em> en el path dle sistema, en el cuadro de texto \u00abValor de la variable\u00bb hemos de a\u00f1adir al final de valor un punto y coma (;) seguido de la ruta donde tenemos descomprimido pngquant<\/em>. En mi caso \u00abC:\\ desarrollo\\ herramientas\\ pngquant\u00bb:\n

      \"A\u00f1adir<\/a>
      A\u00f1adir pngquant al path del sistema<\/figcaption><\/figure><\/li>\n<\/ol>\n

      Tras la instalaci\u00f3n, podremos usar la herramienta tecleando \u00abpngquant\u00bb desde la linea de comandos:<\/p>\n

      \"Usar<\/a>
      Usar pngquant desde linea de comandos<\/figcaption><\/figure>\n

       <\/p>\n

      Para saber m\u00e1s<\/h3>\n

      Por supuesto el uso de pngquant<\/em> no se queda aqu\u00ed. Para profundizar en\u00a0el uso y las posibilidades que nos brinda esta herramienta, puedes consultar su sitio web:\u00a0http:\/\/pngquant.org\/<\/a><\/p>\n

      \n","protected":false},"excerpt":{"rendered":"

      Cuando desarrollamos software para dispositivos m\u00f3viles, hemos de tener en cuenta que \u00e9stos\u00a0tienen unas especificaciones reducidas si las comparamos con los PCs tradicionales. Uno de los aspectos a tener en cuenta es el tama\u00f1o final de nuestro programa, pues probablemente Seguir leyendo Reducir el tama\u00f1o de im\u00e1genes PNG con pngquant<\/span>→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[13,10,9,12],"language":[5],"_links":{"self":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/31"}],"collection":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":14,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/31\/revisions\/67"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=31"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}