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

Question

I am trying to create a personal home page for myself to learn more about web design (JavaScript, using Photo Shop, etc). I plan on having a graphical menu on the left, a banner across the top and also a "Photos" section where I can display photos of various pictures I have taken.

However, when I look at other sites that do anything similar, I see some using GIFs, and some use JPGs and some even use PNGs. Is there any difference between these? Should I use a GIF for graphical images used on the site and JPGs for my photos? Should I make everything PNGs?

---

Exact Duplicate:

• PNG vs. GIF vs. JPEG vs. SVG - When best to use?
• Website Image Formats: Choosing the right format for the right task.
• Which format for small website images? GIF or PNG?

Answer 1

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 be when:

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

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

PNG modes include (this 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 in PNG for the web, use a palette mode. If you find PNG files are larger than the equivalent GIF files, then you're saving the PNG in 24 bit color and the GIF in palette mode (because a GIF is always in palette mode). Try converting to palette mode first.

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

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

Answer 2

XKCD style comic strip that explains it:

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