{"id":55,"date":"2014-10-13T00:54:29","date_gmt":"2014-10-12T23:54:29","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=55"},"modified":"2015-04-03T09:39:19","modified_gmt":"2015-04-03T08:39:19","slug":"decrease-size-of-png-images-with-pngquant","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/tratamiento-imagenes\/decrease-size-of-png-images-with-pngquant\/","title":{"rendered":"Decrease size of PNG images with pngquant"},"content":{"rendered":"

When we develop software for mobile devices, we have to keep in mind that these devices have reduced specs if we compare its with traditional PCs. An aspect in which we have to put special attention is the program size, because probably many users will decide to install our software depending on it.<\/p>\n

In the case of video games, we find that we normally use a large number of images, what will cause our program occupies a large space on disk. Therefore, it’s interesting to know tools that help us to optimize our program resources.<\/p>\n

pngquant<\/h3>\n

While the development of my first video game, I found that the size of my executable file was so large, although my game was nos so long. Searching information about how to reduce this size I came to pngquant<\/a>.<\/p>\n

pngquant <\/em>is a command line tool, available for OS X, Windows and several GNU\/Linux distributions, that allow us to reduce our PNG images with lossy compression.\u00a0It is an open source library; we can get its code from GitHub. Furthermore, there are some graphics tools which make easiest our work with pngquant<\/em> if we aren’t confortable with command line. For example,\u00a0TinyPNG<\/a> is an utility that allow us to optimize our images directly from its website.<\/p>\n

How to use\u00a0pngquant<\/h4>\n

The first step is to download the tool for our system directly from its website: http:\/\/pngquant.org\/<\/a>. In my case,\u00a0I will download the binary for Windows.<\/p>\n

Once downloaded, we unzip the library at the place we want to install the tool. For example, in my case this place is \u00abC:\\ desarrollo\\ herramientas\\ pngquant\u00bb.<\/p>\n

When we unzip the library, we will have the content below:<\/p>\n

\"Content<\/a>
Content of pngquant<\/figcaption><\/figure>\n

As we can see, in addition to the library itself (pngquant.exe), provides a number of .bat scripts that will allow us to use the library quite quickly. Simply select the image you want to optimize and drag it onto these batch files, and automatically optimized image copy is created.<\/p>\n

Let’s see an example:<\/p>\n

    \n
  1. We take the following unoptimized PNG image. It is a file of 288 KB.\n

    \"Imagen<\/a>
    Original image: 288 KB<\/figcaption><\/figure><\/li>\n
  2. We drag the image and drop it over script \u00abDrag PNG here to reduce palette automatically.bat<\/em>\u00bb of pngquant.\n

    \"Drag<\/a>
    Drag and drop over pngquant script<\/figcaption><\/figure><\/li>\n
  3. This automatically generates two optimized images, with suffix \u00ab-fs8\u00bb and \u00ab-or8\u00bb:\n
    \"Optimized<\/a>
    Optimized image (fs8): 80 KB<\/figcaption><\/figure>\n

    \"Optimized<\/a>
    Optimized image (or8): 75 KB<\/figcaption><\/figure><\/li>\n
  4. As we can check, the size of the image file has been decreased more than 70% in both cases. Furthermore, I have to recognize that in a visual comparison I cannot distinguish changes.<\/li>\n<\/ol>\n

    Installing pngquant<\/h4>\n

    To can use pngquant<\/em> from command line, we can install it on the system. For that, we simply add the path of pngquant<\/em> installation to the system path (Windows):<\/p>\n

      \n
    1. Access to \u00abControl Panel\u00bb > \u00abSystem and security\u00bb > \u00abSystem\u00bb<\/li>\n
    2. Once here, select \u00abAdvanced system configuration\u00bb<\/li>\n
    3. It will open \u00abSystem properties\u00bb. Select the tab \u00abAdvanced options\u00bb and next \u00abEnvironment variables\u00bb.\n

      \"System<\/a>
      Access to window of environment variables for Windows<\/figcaption><\/figure><\/li>\n
    4. In the window \u00abEnvironment variables\u00bb, select the variable \u00abpath\u00bb and click \u00abEdit…\u00bb button.<\/li>\n
    5. In the new window we can edit the value for that variable.\u00a0To include pngquant<\/em> in the system path, we must to add the character ‘;’ followed by the path where we have unzip pngquant<\/em>. In my case \u00abC:\\ desarrollo\\ herramientas\\ pngquant\u00bb:\n

      \"Add<\/a>
      Add pngquant to system path<\/figcaption><\/figure><\/li>\n<\/ol>\n

      After instalation, we can use the library by typing \u00abpngquant\u00bb on command line:<\/p>\n

      \"Using<\/a>
      Using pngquant from command line<\/figcaption><\/figure>\n

       <\/p>\n

      To know more<\/h3>\n

      Of course, the use of pngquant<\/em> does not end here. To go deeper in the use and the possibilities about this tools, you can check its website:\u00a0http:\/\/pngquant.org\/<\/a><\/p>\n

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

      When we develop software for mobile devices, we have to keep in mind that these devices have reduced specs if we compare its with traditional PCs. An aspect in which we have to put special attention is the program size, Seguir leyendo Decrease size of PNG images with 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":[],"language":[4],"_links":{"self":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/55"}],"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=55"}],"version-history":[{"count":11,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions\/66"}],"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=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=55"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}