Written on July 9th, 2009
PNG 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.
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.
Enjoy! And I hope to see more usage of this great image format on the web.
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
Written on December 7th, 2008
I formatted my workstation the other day and needed a way to transfer all of my Firefox bookmarks and settings. I stumbled upon a very simple and quick method through copying the Application Data folder. Interestingly enough, this method also has the welcome side-effect of transferring all of your add-ons as well; so things like DownThemAll and Firebug will all stay intact.
The folder you need to copy is: C:\Documents and Settings\USERNAME\Application Data\Mozilla\Firefox (in my case C:\Documents and Settings\Nathan\Application Data\Mozilla\Firefox).
The Application Data folder may be hidden on your system. To enable hidden system files do the following:
- From the explorer window, go to the “Tools” menu.
- Select “Folder Options…”
- Select the “View” tab.
- In the “Advanced Settings” area, enable “Show hidden files and folders”.
- Hit the Ok button.
The previously hidden Application Data folder should now be accessible.
Once you have this folder backed up, you can paste it into a Firefox Application Data folder on another system and have your entire user profile and customizations fully restored.
Note: This method has only been tested with Firefox 3 under Windows XP.Posted in Firefox, How To Guide, Open Source