One of the areas I’ve always felt Fireworks had Photoshop covered was in its PNG export facility. As well as being more flexible and advanced, it almost always produces smaller files.
But can you do even better? Perhaps now you can.
Back in July, Sergey Chikuyonok wrote a really interesting article in Smashing Magazine on optimizing your PNGs. Basically, Sergey has spent some time understanding exactly how PNG’s compression magic works and then figured out some techniques you can use with Photoshop to make your images more PNG-friendly.
Clever stuff and well worth a read. But what about if you just want the instant PNG gratification without the hefty mathematics primer?
No problem. Happily the smart folk at GracePoint After Five have constructed a free online PNG compression tool called PunyPNG that seamlessly incorporates some of Sergey’s finest PNG voodoo.
I have to admit I was skeptical that my lovely Fireworks-forged PNGs would have any worthwhile fat to trim, but I’ve been able to slim down most files by around 15% — even more for 8-bit PNGs with lots of transparency.
In some random testing I was able to reduce the following:
- Mozilla logo: 10%
- SitePoint logo (originally a GIF): 26%
- Typekit’s logo: 33%
- Google’s search page logo: 10%
Okay, so would anyone really bother trying to squeeze a few measly KB out of a 25KB PNG in the age of high speed, broadband connections?
Some might argue it’s overkill for every random graphic used, but it certainly makes great sense on certain occasions. For instance:
-
Site logos, headers, and other repeated graphics:
As practically every visitor comes across these graphics, a little care in their preparation pays off on every pageload. -
CSS image sprites:
CSS sprites are a great way to pre-cache images for rollovers, animations, and other effects, (and reduce server connections) but they rely on the user receiving one large image quicker than a number of small images. In fact, sites such as YouTube put almost all their interface graphics on a single big image. Clearly anything you can do to make an image like that download faster is a huge bonus to everyone.
Interestingly, I wasn’t able to squeeze a single KB out of that amazing 13KB Youtube sprite.
Anyway, give it a test-drive on some of your PNGs and let me know the results.
From SitePoint Design View #63
Alex WalkerAlex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.
