This list of tips was inspired in response to Daniel’s PNG vs. JPEG test. As most of you probably know, the vast majority of images that you encounter on the web will be JPEG, PNG or GIF. I’ll briefly explain when to use each type.

GIF (Graphics Interchange Format)

GIF is suitable for line art, animated images, or images with large areas of flat color. GIFs are limited to 256 colors and don’t have full support for alpha transparency. What does that mean? It means it uses 1-bit transparency, so an individual pixel’s transparency can either be toggled on or off—100% opaque or 100% transparent—it cannot be partially transparent (more on this under PNG-24).

When using transparency, a “matte” color matching the background it will be used on is typically specified for the edges of the image. This prevents the edges from looking to jaggedy, however if you change the background color, then the image must be reopened sand saved again with a new matte to match it. Not a big deal if it’s only a couple of images, but if there are many… O_o

IMO, there’s no longer any reason to use GIFs except for animations.

JPEG ( Joint Photographic Experts Group)

JPEG is a lossy compression most suitable for photographs and/or images with color gradations (a photo can have thousands or even millions of colors). Using JPEG for line art almost always results in a larger file size, and you may very well end up with compression artifacts in large areas of flat color.

Tip 1: A “gotcha” to look out for is to always be sure your JPEG is exported as RGB. If you export it as CMYK, it won’t display in browsers and you’ll go nuts trying to figure out why it’s there but won’t show up.

Tip 2: I don’t know if you guys who are photographers have the setting in Lightroom (or whatever photographers use), but applying the Unsharp Mask filter (in Photoshop) lets you fine tune sharpening in a way that regular sharpening doesn’t. I’ll try to do a brief tutorial on using it later in the week, if I have time,

Tip 3: As mentioned, JPEG is a lossy compression which means the data for the image is discarded when it is compressed. Each time you open a JPEG file in an image editor, change it, and save it again, you lose some more data. Eventaully, you’ll end up with a seriously degraded image, so it’s always best to keep an original version in a lossless format such as TIF, PSD, etc.

PNG (Portable Network Graphics)

Like GIF, the PNG format is suitable for line art or images with large areas of flat color. Neither PNG-8 nor PNG-24 supports animation. PNGs use a more efficient compression algorithm than GIFs, and as someone who works with web graphics every day, I cannot recall the last time a file saved as a PNG-8 wasn’t smaller than one saved as a GIF.

PNG-8 - Like GIFs, PNG-8s have limited alpha transparency and may require the use of a matte to avoid jagged edges. PNG is a lossless compression.

PNG-24 - PNG-24s support full alpha transparency. This means that each pixel can have any level of transparency from 0%-100%, therefore something like, say, a soft dropshadow will look very realistic. The trade-off is that the file size will be significantly larger (because more data must be stored in it). Oh, and in old browsers like IE6 the alpha transparency won’t work properly without a workaround (which I’m not going to go into here).

For a more comprehensive guide, try Six Revisions’ Web Designer’s Guide to PNG Image Format.