Archive for the 'gif' Category

Tip of the day: Use png instead of gif!

September 2, 2006

Ok, I made a mistake. I started this blog right before I went on vacation, which was perhaps not the smartest thing I could do, since the little stream of readers I had thought I had given it up when I suddenly stopped posting. Next bad thing is that I had a laptop with me on my vacation to, among other things do some blogging drafts. And right after I came home the hard drive crashed.

So here we are, two months after my latest post. As a new reader, this might be the first post you read, so here’s a little explanation what this blog is aout. Packets of Knowledge is, as the name might suggest, meant to be a blog with small tips and tricks to specific problems. Either problems I’ve faced myself, or answers to questions I’ve answered in forums. Particularly the latter, since some questions seem to appear over and over, so if that instead of writing a whole new answer, I can link back to this blog. It’s also meant to be a refernce for myself as I build it up.
The topics you’ll see on this blog will mainly be web development, but also other sorts of development and fixes to annoyances in programs and operating systems.

So, back on-topic: All developers and most computer users knows what gif is. It’s a file format for storing image data. It’s the per se standard image format for the web, together with jpeg. Both gif and jpeg are destructive, but in different ways. Gif has a limited color depth. A gif image can store no more than 256 unique colors. Storing a photo in gif will give it a low quality where the 256 colors are used in patterns to give the illusion of the original colors. But other than that gif won’t destroy your image, so images which already has less than 256 unique colors will look ok. This may include graphs and sketches with few colors.
Jpeg on the other hand will not decrease the color depth, but instead slice the image into small blocks and look for blocks that resemble each other and exploit that to be able to compress the file. This works good for photos which can be compressed with jpeg with a good ratio. Jpeg effectively does what it should for real color images, but tends to destroy images with blocks of solid colors, or images with text in them.
So why replace gif with png? Png is probably most famous for its ability to store an alpha channel – a way of giving the image a semi-transparent look. But png can store store 256 color images as well, just like gif. Only with the difference that png will make the image file smaller than the corresponding gif file, but still look the same. Another argument to leave the gif format behind is that it used to be patented. Today, the patent has expired, but still I’d recommend a switch.

Png can also store full color images, optionally with an alpha channel as mentioned above, but the biggest advantage is that png , even for a full color image, is totally undestructive. That makes it the web’s only standardized, full color, non-destructive image format.
While it is true that one major browser still doesn’t support png images with an alpha channel without extra effort. (IE6; this will be fixed in IE7) But every major browser has support for png without an alpha channel since years ago. So next time you’re about to save a gif file, save it as png and make the world a better place.