PNG vs GIF, the smackdown
The topic of PNG or Portable Network Graphics, pronounced “ping,” has come up a few times lately, designers are afraid to use them because we’re clinging to GIFs like a beat up old teddybear from our childhood. Turns out, PNG compresses to a smaller size when compared to a GIF with same number of indexed colors, in addition to supporting varying alpha levels (degrees of transparency). According to fellow designerd Micah Nolte, they don’t quite render the same across all of the browsers. This is contrary to what I’ve read, but perhaps that’s all just a big conspiracy to rid the world of animated GIF abuse. To be continued…
November 4th, 2006 at 9:24 pm
How dare you accuse me of speaking unqualified information?
Don’t you realize that most things I say I just sorta make up on the spot? You can’t hold me to things I may have said in the past. So clearly your argument is invalid.
On the matter of pngs, the deal, I’m learning, with the browsers is how they do the color correction. Different browsers do different gamma adjustments. The problem comes from the fact that even though the pngs may be properly color corrected in a browser, it still has different color settings than jpegs or gifs. So if you save a file with a certain color in each file format, then place them next to each other, the jpeg and the gif will have the color you chose, and the png may not. How close it is depends on the browser.
http://www.libpng.org/pub/png/img_png/png-gammatest-ie7.png
I have this link as some sort of proof, either for or against my position. I’m really not sure what it is, honestly, but it had boxes of color, and some were of different shades. That may mean something.
I’ll have to do my own testing to be sure, but I’ve seen it render incorrectly in firefox and ie6.
So there!
: P
That is the first (and last) time that I have used that emoticon.
Micah
November 4th, 2006 at 10:06 pm
Okay, Now I have proof!
I made a testing site of my own, so I can be sure of what I made up previously.
http://www.styledisplay.com/pngs/
This page has four colors, each with an image of the color saved in the three ways (jpg, png, and gif) and a border for the box in the original color in Photoshop. Since it depends on the browser, I included screenshots of how both IE6 and Firefox 2 render the colors. If you take the image into Photoshop, you can eye-dropper it and see that the only reliable file format when it comes to anal-retentive color nazis, is the lowly gif.
(The images of the screenshots are saved in gifs, just so there’s no color information lost. hehe.)
Micah
November 4th, 2006 at 10:56 pm
You’re correct that the PNG blocks stand out like little sore thumbs in the middle—except in firefox—while the other two are seamless with the CSS borders.
PNG could still be used where you need varying alpha or a slightly smaller file size as long as you aren’t looking to consistently match an existing color on the page, but looks like we can’t quit GIFs. Alas, the smackdown is settled… for now.
Thanks Micah, and from now on I’ll forget everything you said two weeks ago.