Don Marti

Sun 17 Apr 2005 08:33:52 PM PDT

How to replace GIF images?

As webmaster of, I get the "what image format should I use if I burn all my GIFs" question a lot.

Here's the short version: use JPEG for photos, PNG for line art.

Here's the long version. JPEG uses lossy compression, so some pixels get messed up, but it doesn't have a restricted color palette. It works best for photos because you can't see the messed-up pixels ("JPEG artifacts"). If you make a JPEG of, say, an IBM logo, it will look crappy because of JPEG artifacts at all the corners and edges where blue meets white.

PNG has lossless compression so your blue-and-white IBM logo will look crisp and spiffy, but a PNG photo won't compress nearly as well as a JPEG.

PNG has a superset of GIF's capabilities, except for animations. It's supported in Netscape and Microsoft Internet Explorer, version 4.0 and up, and in Opera and Mozilla. However, there is a browser bug that makes transparency in PNGs show up as black. This is fixed in Mozilla.

So, unless you want to do animations (which annoy users) or support really old browsers that have security flaws anyway, there's no reason to use GIFs any more.

Some proprietary software, such as Adobe Photoshop, is notorious for making bloated PNGs. Try running your PNGs through a conversion program -- they're usually smaller than the equivalent GIFs.