{"id":3,"date":"2009-09-16T00:06:30","date_gmt":"2009-09-16T04:06:30","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=3"},"modified":"2009-09-29T21:50:47","modified_gmt":"2009-09-30T01:50:47","slug":"optimizing-png-files-for-both-web-and-print","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2009\/09\/16\/optimizing-png-files-for-both-web-and-print\/","title":{"rendered":"Optimizing PNG Files, for both Web and Print."},"content":{"rendered":"
\"\"<\/a><\/p>\n

The script included in this post can shrink your images down for easy handling.<\/p>\n<\/div>\n

Optimizing images is not only important for web applications, it is also important for reducing the size of print documents (e.g. Word Documents, PDFs, etc). This size is important not only when emailing them out, but also when embedding them into documents that you will be sharing with others.<\/p>\n

PNGs should be used for drawn images and screenshots (for photographs, it is better to use the JPEG file format).\u00a0 It uses a lossless compression algorithm, so what you save in your graphics editor is exactly what your users will see.\u00a0 It also supports features like alpha channeling<\/a>.<\/p>\n

This article will show how to optimize images in this format.<\/p>\n

A case study: Optimizing Screenshots<\/h2>\n

There are many times a web developer will need to produce screenshots of the work they do to send to clients. When I need to do this, I use the excellent Screengrab Firefox Addon<\/span><\/a>, since it is so easy to use. I will first talk about how to take screenshots using this tool, and in the next section, talk about how to optimize the PNG files they produce. (Note:<\/strong> If you need to take screenshots using Internet Explorer, I would suggest using The GIMP\u2019s screenshot feature to do this. There is a great simple tutorial on how to do screenshots with the GIMP<\/a> at the The Networked Writing Environment at the University of Florida<\/span><\/a> website).<\/p>\n

Using Screengrab<\/h3>\n

After you install this tool, all you have to do is right click the document you want to take a screenshot of and you will get the following menu.<\/p>\n


\n\"\"<\/a><\/p>\n

Right-click any web page
\nto produce a screen capture of any page.<\/p>\n<\/div>\n

How to reduce image data size<\/h3>\n

I created a script<\/a> that would reduce this file size as much as possible. How does this script work:<\/p>\n

    \n
  1. It first uses ImageMagick <\/a> to reduce the amount of colour-palette inside the image to 256, since Screengrab will usually create 16-bit images (which have millions of colours). This usually results in 25% reduction of the size of the image and the extra colours aren\u2019t missed when these images are inside a Word Document because the physical dimensions of these images are smaller than the actual page itself.<\/li>\n
  2. It then uses two command line tools, optipng<\/a> and advpng<\/a>, to compress the image further. It uses these programs in a variety of ways to see which is the most optimal, and saves the smallest result. This usually results to a further 30-40% reduction is data size.<\/li>\n<\/ol>\n

    Together, it is possible to reduce an image to 50-70% of it\u2019s original size. Not bad for a script done in my spare time.<\/p>\n

    An archive with this script and supporting files<\/a> is available here. This archive includes:<\/p>\n