jonlee.ca

I get frustrated when people send me screenshots of their desktop saved as a bitmap file (.bmp) because they don’t know how (or are too lazy) to change the image format. Bitmaps are uncompressed. This means a 1024 by 768 pixel image (XGA) can have a file size of over 2 megabytes. I don’t want to wait 3 minutes to see a picture of your new icon layout nor would you want your readers to wait 3 minutes for your page to load!

Enter the world of compressed images. This article isn’t going to go into the technical details of how image compression algorithms work (I had to write an algorithm in University, I’ll spare you the linear algebra lesson). I will briefly describe the three most popular formats and situations in which you should use them.

JPEG (Joint Photographic Experts Group)
JPEG images use a lossy compression algorithm meaning that some information is loss every time you save (or resave) an image in the JPEG format. Upon saving, you usually get a choice of what JPEG quality you wish to save at. Medium should be fine for web development; this is essentially a trade-off between file size and image quality. JPEGs are a good choice for anything that contains a lot of color information and detail — basically any photograph or anything containing a photograph (like the name implies).

GIF (Graphical Interchange Format)
GIF images use a lossless algorithm meaning no information is lost in your image; instead, your image is compressed by using an index of colors. For this reason, GIFs are best used in images that have limited colors. Since GIFs don’t lose any information (assuming there are enough colors), you won’t get the problem of blurred sharp edges you get with JPEGs. So any sort of computer/web graphic should be saved as a GIF file. GIFs also support animation and basic transparency.

PNG (Portable Network Graphic)
PNGs are the “new” cool thing. They were created as a free version of GIF (software that use the GIF format require a license). Like GIFs, PNGs are also lossless, support transparency and are best used with computer/web graphics. In addition, they also have true color, full alpha channel and gamma storage support. They’re pretty much better than GIFs in every aspect, so why don’t we use them exclusively?

1. No support from older browsers — this may or may not be a concern for you depending on your target audience.
2. Partial support from modern browsers (this is mainly an IE issue, but there are ways to get around it).
3. No animation support.

Conclusion
In short (and for those too lazy to read the above), use JPEGs for photographs and GIF/PNGs for sharp-edged web graphics.

For the curious, here is a good site describing what I’ve talked above in more detail.

Popularity: 5% [?]

This entry was posted on Monday, April 23rd, 2007 at 11:53 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.