[ACCEPTED]-What image type should I use when? GIF, JPG or PNG?-image

XKCD style comic strip that explains it:

http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

0

PNG should be used when:

• You need transparency (either 1-bit or alpha transparency)
• Lossless compression will work well (such as for a chart or logo, or computer generated image)

JPEG should be used when:

• Lossless compression will not work well (such as a photograph)

GIF should 24 be when:

• PNG is not available, such as on very old software or browsers
• Animation is necessary

Despite myths to the contrary, PNG 23 outperforms GIF in most aspects. PNG is 22 capable of every image mode of GIF apart 21 from animation, and when using the same 20 image mode, PNG will have better compression 19 due to its superior DEFLATE algorithm compared 18 to LZW. PNG is also capable of additional 17 modes that GIF cannot do, such as 24 bit 16 color, and alpha transparency, but this 15 is where you need to be careful: if you 14 forget to convert to palette mode your PNG 13 image may be saved in 24 bit color which 12 will take more space.

PNG modes include (this 11 is just a small subset)

• Palette colour of 2 to 256 colors (like GIF)
• Palette colour of 2 to 256 colors, with transparent color (like GIF)
• True color (24 bit color)
• True color with alpha channel (24 bit color + 8 bit alpha transparency)

For best compression 10 in PNG for the web, use a palette mode. If 9 you find PNG files are larger than the equivalent 8 GIF files, then you're saving the PNG in 7 24 bit color and the GIF in palette mode 6 (because a GIF is always in palette mode). Try 5 converting to palette mode first.

PNG also 4 has other modes such as palette color with 3 alpha transparency. Modes such as this 2 cannot be created in Photoshop, but other 1 applications can create them.

Edit 2013: Removed a bunch of stuff about IE6 compatibility.

Use JPG for photos and PNG for everything 8 except photos. GIF is not really a very 7 good format and PNG can replace it completely 6 in compression and quality for most applications, but 5 sometimes there are compatibility issues, not 4 sure if these have been ironed out in all 3 the current webbrowsers. GIF can be read 2 by basically everything, so that's when 1 it's very useful.

For buttons, icons, logos use PNG. Use GIF 7 only if you need small animated images.

PNG 6 can do all that GIF can (except animation, and 5 even that is coming in APNG), and should 4 almost always be smaller. If PNG isn't smaller 3 than GIF, then your software may be saving 2 it poorly - look for PNG optimisation progams, like 1 PNGOUT and pngnq.

There are problems with GIF:

• It only supports up to 256 colours.
• It uses a patented compression algorithm.

But it does 9 have an advantage:

• It can be used to display an animation

JPEG can have a higher 8 compression ratio than PNG/GIF but is lossy 7 as the cartoon above demonstrates. It is 6 best used for images where the compression 5 artifacts aren't noticeable, photos for 4 example.

Combining images into a texture 3 and using CSS to unpack them will reduce 2 the size slightly and reduce the number 1 of server requests.

Depends on what you want to create. Typically, for 14 your web graphics, go with PNG. For photos, JPG 13 is fine. The 24-bit PNG supports alpha transpancy, so 12 if you want to use "true color" alpha transparency 11 that's your only option really. 8-bit PNGs 10 are better and smaller than GIFs and also 9 have pretty much the same transparency settings 8 as GIF (an indexed color pallet) so there's 7 no reason to use GIF anymore (unless you're 6 making...gasp...animated gifs?). Remeber 5 the the PNG format is lossless compression, so 4 it will be nicer looking that a compressed 3 JPG. One thing to keep in mind is that supporting 2 PNGs in Internet Explorer 6 and below can 1 be a pain, but there are many workarounds.

GIF - losless, small, but limited to 256 6 colors, and has one bit transparency (transparent 5 or not)

JPEG - bigger, no small color limit, lossy. Best 4 for photos.

PNG - losless, better transparency 3 (alpha channel), but IE6 doesn't support 2 alpha correctly, just with special fixes 1 (fix here).

GIF is best for images with lots of solid 5 colour - JPEG for images with lots of colour 4 variance (EDIT: thanks, cletus). PNG is 3 a newer format and often better than either 2 JPEG of GIF - especially for screenshots.

See 1 http://www.ou.edu/class/digitalmedia/articles/CompressionMethods_Gif_Jpeg_PNG.html

In general, jpeg is better suited for photos, while 18 gif is better for graphic objects, like 17 buttons or rendered letters. png is good 16 in both regards, but that discussion tends 15 to get a little religious because there 14 are license fees to pay if you develop a 13 programm that reads/writes gif or jpeg, while 12 png is free.

The difference is mainly in 11 the compression, gif gets smaller file sizes 10 for buttons, jpeg for photos.

My best advise 9 is to play around with the different compression 8 optioopns offered by all three formats and 7 see for yourself which one you want to use 6 for which purpose.

Oh, and because this is 5 mainly about file sizes: See if you can 4 test your homepage from a computer with 3 a low bandwidth connection. That way you 2 get a feeling if you need to worry about 1 compression at all ;-)

Historically, GIF was here first, then JPG, then 11 PNG.

GIF is very efficient for images with 10 large areas of the same color (white background, for 9 instance), because the RLL encoding compresses 8 this well. However, GIF is patented technology 7 (Unisys) and is seeing less and less use. Color 6 depth is limited to 256 colors (I think).

JPG 5 and PNG work well for most applications, but 4 the files will be larger than GIF for very 3 simple graphics. GIF can handle transparency 2 and animations.

Edit: You are right - the 1 patents expired on October 1, 2006.