Introduction
There seems to be a good deal of confusion around the web, particularly with web developers, regarding what image formats should be used in webpages. I'd like to clear up some of the confusion with this handy guide, matching your content type and audience with a proper format. Let's start with a brief rundown of the formats we'll be discussing.

The Formats
PNG: One of the most versatile and lossless image formats that routinely produces very low file size, PNG (Portable Network Graphics), is good for applications that require detail on webpages. It even supports 256 levels of alpha transparency (as opposed to GIF's 1-bit transparency). However, its downside is a lack of widespread support. Firefox, Safari, and Opera all render PNG well, but the web's most-used browser, Internet Explorer, fails miserably. In particular, versions below 7 display flat matte black for any transparent area in the PNG, completely ruining any translucency effects. This format is best used in sites aimed at other developers, technologically-minded users who probably do not use Internet Explorer, and images that do not have extensive use of the alpha (transparency) channel. I'd like to point out that in many cases on the web, PNG is the unqualified best choice, including with large photos, since it is indeed a lossless format. Unlike JPG, no data is lost in the compression process. The only thing that holds me back from such a statement is the current lack of complete support for PNG on older browsers. If you test an image as PNG in your site and find it performs satisfactorially in any browser you'd like viewers to be able to see it, by all means use PNG for photos and images large and small. Also, keep in mind that most mobile (PocketPC and smartphone) browsers do not support PNG at all. As you can see, PNG is the best choice for the rightmost image below, and probably the leftmost as well.

Left to right: 56KB, 28KB, 8KB

GIF: Perenially the most popular web format for use other than photos, the Graphics Interchange Format is good for site graphics and icons. Its limitation is a 256-color palette; while any colors can be used, no more than 256 colors can be present in any image. This means that highly-detailed images tend to look blurry or coarse in GIF due to the dithering used to approximate intermediate colors. Most modern image editors do a good job of hiding this flaw, but GIF is best used for images that have relatively few colors. In addition, GIF is capable of animation, produced by storing a series of frames together in a single GIF and then quickly flashing through the images. Animated GIFs can be set to play once or multiple times, and the time increment in between each step is also customizable. As you can see, GIF is the best choice for the middle image below since the quality is comparable to PNG and it's half the size in terms of memory.

Left to right: 25KB, 14KB, 25KB

JPG: JPG or JPEG is a solid choice for images of a photographic nature if you are avoiding PNG, such as those with detail that use a wide palette of colors. PNG and JPG both support the same number of colors, though PNG has the added feature of transparency. Photos converted into GIF tend to look washed-out and distorted, while JPG format generally maintains the intensity and variety of the original colors. JPG supports a range of image qualities from 0-100%; lower quality produces distortion near areas of high detail, termed artifacts. Artifacts are most noticeable when an area of high detail happens to also have intricate coloration, and can be minimized by using a higher image quality. Unfortunately, the tradeoff is larger image size. As you can see, JPG is the best choice for the leftmost image below if PNG cannot be used. Once again, be aware that PNG is vastly superior to JPG even for photos, and the only reason you should use JPG at all is if you both don't care about artifacts and want to support very old (and mobile) browsers.

Left to right (all at 85% quality): 10KB, 11KB, 12KB

Other Formats
These formats aren't specifically discussed here, but you should be aware of them, as they and others may become more widely used as the web develops from Web 2.0 to Web 3.0.

BMP: BMP, the bitmap format, should be avoided completely on websites. Its large filesize and inconsistent OS/browser support make it a terrible choice for websites.

SVG: SVG, or Scalable Vector Graphics, is the only vector-based image format supported by popular browsers. Whereas traditional raster (bit-mapped) images store the colors of each pixels, vector graphics store coordinates of shapes and colors relative to the image as a whole. The upside is that you don't get pixelization distortion when an image is scaled above its original size. Unfortunately, only Firefox 1.5+ and Opera contain full support. Since it's an XML format and the first web-based vector image format, it has a great deal of potential for future expansion.

What to Use, When
The three most important things to consider when choosing an image format are colors, detail, and size. As a general rule of thumb, you should use JPG for all your photos, GIFs for small non-photos, and PNGs for large non-photos. Allow me to reiterate:

Rule of Thumb
>> PNGs for large or small detailed images, including photos
>> GIFs for small non-photos
>> JPGs for photos, but only if compatibility is a big issue

Needless to say, there are a lot of shades of gray within these distinctions, so let's take a look at the three important areas I mentioned.

Colors
Any photo has a relatively large number of colors, and thus should almost automatically be saved as a PNG unless you're committed to using JPG instead. If an image has many colors, immediately discard GIF as an option. Exceptions might be for thumbnails and photos that are used for navigation or buttons. If you have a small, simple image, GIF is your choice because of its small size and fast render times.

Detail
In general, you'll want to use PNG for your most detailed images, GIF for less detailed images, and JPG for images where the overall picture, not specific features of the picture, are the most important. Within JPG, you should use the lowest possible quality that still gives acceptable results when saving to lower the size of files clients on slow connections need to download. GIF should be used in detailed non-photos where the detail is not an essential part of the image, such as a navigation with text on a patterned background. PNG would be the best choice for a detailed schematic, diagram, or other such image.

Size
Size is as important a consideration as image quality (details and colors), particularly for clients on slow connections. If your site takes too long to load, visitors will simply give up and find another site to visit. There's no hard-and-fast scale of smallest size to largest size by format; each format is the smallest for particular image dimensions and detail. GIF images are very small for small dimensions, but get increasingly unweildy (often over several hundred KB) for larger dimensions. PNGs start at a moderate size for small dimensions and stay relatively small for large dimensions. JPG gets increasingly large with both dimensions and quality, and a good balance should be struck when choosing a quality setting for a given image size.

Conclusion
I hope that you found this tutorial helpful in clearing up some confusion, and that you go on to create attractive, fast, well-organized sites. Please post here or email me if you have questions, suggestions, praise, or flames.

Digg it! http://digg.com/software/The_Web_Developers_Guide_to_Image_Formats

nice tutorial, I prefer to use PNG for *everything* of course, but thats cause editing images with even small artifacts is annoying.

That's why you should save as .xcf or .psd for your master image, then save as .png/.jpg/.gif for your production images.

I disagree. PNG should be used for anything large (ESPECIALLY PHOTOS - there is a reason it is called a "loss-less" format ), and JPEG should be used for small images. GIF should be avoided completely (unless you require the transparency or animation)

You should also have better selections for photos - those all suck. You need a large, colorful photo to show the crapiness of GIF at colors, and to show the artifacting JPEG introduces. You also need an image with transparency to show PNG vs. GIF in that regard.

And this statement is completely false



There is a reason high-end digital cameras and SLRs don't save as JPEG by default. It is HORRIBLE for photos - remember the whole lossy issue? Just by using a JPEG format, you piss away some of your quality (regardless of how high you set its compression level). However, since you can't use RAW formats in a website, PNG is therefore the only possible alternative. Unless, of course, you LIKE blurry, crappy looking pictures

Until this issues are fixed, I'm considering dugg-downing it

dont do anything irreversible

While I agree with you on the obvious advantages of PNG over JPG, at this point I'm not going to advocate it (unless you convince me otherwise) because of lack of support in older and closed-source browsers. My considerations included compatibility while writing this.

unless people advocate it, it will never gain support.

But that does not mean you should blatantly and INCORRECTLY support and praise JPEG over PNG. JPEG sucks for photos, yet you claim otherwise. PNG may lack support (mainly just dealing with transparency issues - which is not a problem for photos in PNG) in IE, but that does not diminish the fact that JPEG sucks for pictures.

You say use PNG for large, non-photos. Why? It is BETTER for photos that JPEG, and has BETTER SUPPORT IN THAT REGARD. IE chokes on the transparency, which photos do not have.

Support is not the issue. The issue is that your "guide" misrepresents the formats, their abilities, and their roles (especially with your particularly crappy choice of subject photos)

@Elf: I would rather Kerm's pride take a hit than to have more misinformation out on the web

I did some additional research and decided to make some concessions to Kllrnohj on this issue. The tutorial has been revised to more strongly support PNG and less strongly support JPG.

Now if you would just add a large, colorful photo, and maybe some more relevant pictures (transparency? animation? these things are discussed, but not demonstrated - show them!)

I'm not trying to prove any points about animation, so I'll omit that, but transparency isn't a bad idea.

Ok, that was harsh, but I couldn't help myself.

You missed my edit.

Actually, I made that post BEFORE your edit:



But at least it's fixed now. Perhaps we should have given this Tutorial some feedback before you went to Digg with it.

yeah, but you can give him time to revise

I figured 8 minutes was sufficient for Kerm.

/me gives stamp of approval

Dugg

lolz, I sure had to work hard for that one. Now it needs more for frontpageabilitization.

I don't really find this helpful, as everyone is arguing about what's better for what...

No, we are now all in agreement (as far as I know) - Kerm just overplayed JPEG and downplayed PNG based soley on its browser support, and not the actual formats strengths and weaknesses (which has since been corrected)