When to use JPG and When to use GIF

Chris Coyier //

Like many of you, I spend a fair bit of time saving out graphics for use on the web. So when I'm browsing around the web, just by second nature I spot optimization mistakes. Kind of like how a typesetter can spot a kerning foul from a mile away or a football fan can spot a botched defensive play just by seeing the formation.

I'm not picking on Blogging Tips, it's a great blog that I enjoy reading, but they just launched a new design that features a big bold red header with some reverse block type. This is classic GIF territory, but they went JPG. JPG in this case will cause artifacting around the letters as a result of the compression. See below:

artifacting.gif

When should you use JPG and wen you should you GIF?

The use of images is a big part of CSS, so it's good to have this information handy

usegif.gif

Use GIF when your graphic uses a relatively low number of colors, there are hard-edged shapes, large areas of solid color, or needs to make use of binary transparency. These exact same rules apply for 8-Bit PNG's. You can think of them almost exactly like GIF files. PNG's can't do animation like GIF can, but are often lower in file size.

usejpg.jpg

Use JPG if your graphic uses a high number of colors, it uses gradients or contains photographic elements.

These are just rules of thumb.

Like all rules, these are made to be broken. There are plenty of circumstances where they don't hold up. For example, photographic images that are fairly small and monotone-ish might work great with GIF. Likewise, gradients can sometimes turn into cool effects with GIF compression. The bottom line is you should do some testing and see what looks best. That the beauty of the 4-up Save Optimized As dialog in Photoshop.

What about PNG?

Mmmmm. 32 Bit PNGs. It's such a lovely format isn't it? Lossless compression. ALPHA transparency. Gamma correction. 48-bit color. Often smaller file sizes. What's not to love? Well the main reason to use PNG is for that beautiful transparency, and that is exactly what doesn't work in IE 6 and lower. There is some hackage that can be done to make it happen, but it's often quite a bit of trouble. PNG is certainly usable. I often use it since it is the native format of the screenshots I take, but for most, PNG is nothing but a tease. As soon as IE 6 starts to drop off the map, we will see more widespread use start happening.

More: Misconceptions about PNG