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.
Adobe Fireworks seems better at compressing PNGs.
You can use Fireworks to make PNG 8-bit with alpha transparency too. The pro? IE actually understand PNG 8-bit with alpha transparency, without any hacks. Just make sure there’s no gamma correction on the PNG file.
[…] utilizar para otro propósito? navegando un poco fui a dar de casualidad con la prueba que realizo Eric Puidokas en donde comparo los resultados en base a la compresión que cada formato realiza sobre la imagen, […]
[…] suis tombé sur un article écrit il y a un peu plus d’un an par Eric Puidokas appelé GIF vs. PNG. Il arrivait à la conclusion que le PNG-8 devenait plus intéressant que le GIF à partir de 48400 […]
[…] opted for PNG-8 because it compresses better than GIF, and doesn’t require any hacks to implement transparency for all the A-grade […]
Your article is half information, half disclaimer to make up for your test, which apparently wasn’t even tested on a real-world graphic (i.e. a logo) where PNG would typically be used. Time for a better test? With a set of images (logo, white square, button) that might influence results? Back to the drawing board!
And to everyone who is complaining about gamma inconsistencies with PNG, you can blame your software (Photoshop) instead of the PNG format. Fireworks’ native format is PNG and it has none of those colorspace issues, because it is a web design program that only does RGB. Fireworks was made for web design, Photoshop was made for editing photos of your cat.
I wasn’t looking for the average size where PNG compression beats GIF compression. I wanted to know the *largest* possible image in which a GIF could be the optimal filesize.
The point here being that if your image is larger than 220×220, you can be certain that PNG is the best format for the job. Any smaller than that and you have to test your individual image to know which compression will actually perform better.
Post a Comment