Geenat.com Nathan’s blog about software development, design and the people behind it.

Why you should use PNG for web design, and how to do it properly!

Written on July 9th, 2009

PNG SamplePNG is a fantastic open source image format that has the technical potential to be the do-all end-all for graphics on the web. In theory, PNG has a sizable list of advantages for people designing websites, including:

  • Full color support.
  • Full alpha channel support. (In modern browsers above Internet Explorer 6)
  • Efficient lossless compression. (And by the end of this article, smaller than an equivalent GIF!)
  • Patent free and open source.

However, in practice one will notice that some web browsers have mixed support for certain features found in the PNG format (usually PNG’s built-in gamma and color correction aka color profiles. Which can inadvertently cause serious differences in shade and color when viewing the same PNG image on different browsers). These inconsistencies cause a huge headache for web designers who wish to use this format for images in their designs!

That said, in this article I will show you how to solve this issue so that your PNG images display flawlessly on all modern browsers! This method also has the welcome side effect of shrinking the PNG file size, making them smaller than an equivalent GIF, and sometimes even comparable to the size of a lossy JPEG!

This process of “PNG Optimization” is extremely easy when one has the right tools. Luckily enough, Windows, Mac and Linux users have a fantastic open source utility called pngcrush. Since it’s a command line tool, you can optimize a virtually limitless number of .png’s with a single command! Perfect for processing the “/image” directory of a website.

pngcrush -rem alla -d outputdir *.png

For those wondering, “-rem alla” stands for “remove all ancillary chunks”.

This command strips out all ICC color profiles, gamma profiles, and other unnecessary auxiliary data that is generally used in photography, but not needed in website design; effectively solving consistency problems between browsers. In addition, this extra data can use up a lot of space in the PNG image, and once it’s stripped out the size of the PNG will generally shrink down significantly.

pngcrush sample image

For Windows users, I’ve created a simple batch file that will run this command for you with a click of the mouse. Just remember to place the batch file, pngcrush.exe and the images to be optimized in the same directory before running it.

You can download the batch file, including the Windows excecutable of pngcrush from me directly, or get the latest version of pngcrush at Sourceforge.net

Enjoy! And I hope to see more usage of this great image format on the web.

Additional Resources:

TweakPNG – A utility for exploring the internals of a PNG file. For anyone who wants to see exactly what is inside of their PNG files. (http://entropymine.com/jason/tweakpng/)

Posted in Download, How To Guide, Open Source

Opensource Download: Creative Zen Support for Mac

Written on January 9th, 2009

My sister upgraded to a new Apple Mac mini the other day. She was disappointed that her Creative Zen V player did not work with it.

After a few minutes of research, we found that Creative does not supply any type of MacOS X download for their Zen MP3 players. Fortunately, the opensource community has their own solution to this: XNJB.

XNJB is a downloadable Mac application that supports transfering of music, recharging, and general management of many types of MP3 players that generally are not supported on the Mac platform. XNJB makes use of the fantastic opensource libnjb and libmtp libraries to make support for these MP3 players possible on many unofficially supported platforms including: Linux, BSD, Solaris, and of course, MacOS X and Windows.

To use your Creative Zen player on MacOS X, go directly to the XNJB application download page and download the Binary. You can find out more about XNJB at the official XNJB website.

Posted in Download, Open Source

Dina Programming Font in TTF format

Written on October 7th, 2008

For a long time now, Dina has been my favorite programming font. I find it crisp, clean and very readable for the amount of pixel space it takes up (wide bowls, no unnecessary serifs). It’s certainly a nice change from Courier New. In my opinion, a great programming font is just as important as any other tool in the programmers toolbox.

Unfortunately, Dina does have one big pitfall. It’s only available in the bitmap based .fon format, which is notorious for bad portability. Incompatible on anything but Windows, and even some Windows applications will not read this format (Sun’s Java Netbeans IDE for example does not support it).

After a long day of various hacks and adjustments, I was able to convert the Dina font to a working TTF format. You can now benefit from the fruits of my labor using the link below:

Dina truetype font pack

Here is a preview for your viewing pleasure:

For those interested, this is a screenshot from the Netbeans IDE. I have been recently giving Netbeans and Eclipse a test drive in preparation for my upcoming developments in Java.

Posted in Download, Programming, Typography