PNGs have a growing purpose in web site design and development. It used to be that PNGs and their advantageous full alpha channel were poorly supported (or not supported at all) by peoples’ web browsers of choice. Luckily, that’s all but a painful memory these days.
Besides having a full alpha transparency, meaning various levels of opacity are possible, PNGs also have lossless compression like GIFs.
I still opt for JPGs whenever there’s no need for transparency.
But when transparency or the utmost quality is needed, PNGs are the obvious choice. Problem though is they still tend to be big files, especially when compared to a similar JPG file. For me, there are two ways to optimize and minimize file size.
The first is utilizing Photoshop’s “Save for Web” command, exporting all PNGs initially like this.
Prior to a site going live, I also like to utilize PNGCrusher, a tiny little OS X app my friend/co-worker Bret Kruse introduced to me. Even images that have already been optimized via Photoshop tend to see at least a 4% reduction in file size. That doesn’t sound like much, but consider the number of PNGs on a typical modern web site. A minimum of 4% reduced file size means a bit faster loading web site for your audience, but also can be a big savings in bandwidth/hosting costs for high traffic sites.
PNGCrusher is based on OptiPNG, an advanced PNG optimizer. I didn’t realize until reading the page, it can also help optimize BMP, GIF, PNM and TIFF files to optimized PNGs. I may have to add that to my workflow, though it’d really only be GIFs that ever get utilized.
Interested in reading even more on the PNG file format, compression, and everything surrounding the file format? Check out the page below. Interesting reading. I really found the PNG delta filters section interesting.
