GIF vs. PNG
I recently ran a small test on image compression of GIFs and PNGs and I thought it might be worth sharing. For the test, I created images at different sizes with 100% transparency. The sizes I used were 4×4, 256×256, 384×384 and 512×512.
I saved each image in a different format.
- PNG - 8bit, saved using Photoshop CS3’s ‘Save for web’
- GIF - saved using Photoshop CS3’s ‘Save for web’
- PNG (OptiPNG) - 8bit, run through PNGpong
If you’ve never heard of PNGpong, it’s a great little tool for OSX. It strips out color space information from the PNG and then runs it through OptiPNG which further removes extra information.
The test confirmed much of what I’ve read. The PNG format contains a larger file header, causing GIFs to actually compress better at small sizes. At around 220×220, the better PNG compression makes up for its larger header and surpasses the GIF. Keep in mind that this tested a very basic image (possibly the most basic?). If images with more information in them are used, the compression of a PNG will surpass a GIF much sooner. The compressions of both formats are heavily dependent on the actual information in the image.
It should also be noted that it’s not always the best idea to run your PNGs through optimization tools such as PNGpong. In certain cases, such as with photographs, it’s often a good idea to allow the image to use a higher range color space, rather than the web’s lowest common denominator, sRGB.
Extra information for this entry
-
Abstract
A simple comparison of GIF and PNG compression.
-
Comments
You may leave a comment, or trackback from your own site.
-
Tags
Comments Post a Comment
Have you tried Firework’s compression on PNG 8’s before? I have had good luck with it for spriting transparent images.
Cool, this info is really really cool.
There was a good comment on Digg once where someone said they put their PNGs through 4 programs to get the smallest files. It works great too. I dont remember who posted the comment but I made a note of the programs.
The following for in order
optipng
pngout
advancepng
deflopt
Too bad there isnt just 1 program to do them all easily. I guess I could write a batch file to walk me through all 4.
The only downside I’ve experienced with PNGs is that Firefox (on Windows) has been rendering the gamma/colours wrong. Which has been a major pain when you have a PNG with the same background colour as the CSS!
More info here: http://koke.amedias.org/articles/2008/03/08/whats-wrong-with-colors-in-firefox/
and here: http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
And what about JPEG?
Need a better format for pictures to load faster and i think its because i didn’t use PSCS2’s ’save for web’ with my gif images. I’m going to try it agian, thank you.
Post a Comment