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

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:

• Website Image Formats: Choosing the right format for the right task.
• Which format for small website images? GIF or PNG?

Answer 1

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

There are problems with GIF:

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

But it does have an advantage:

• It can be used to display an animation

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

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

Skizz

Answer 9

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)
• Full color is needed

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 may run into problems on the web. Alpha transparency has compatibility issues with IE6 that are well documented (though hacks exist to get around).

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, always 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.

If you find that your PNG files with transparency aren't working properly in IE6 while your GIF files are, then you are using 24 bit color + alpha transparency in PNG and palette mode with a transparent color with GIF. You will have to make sure that you convert your PNG into a paletted color mode with a transparent color.

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. The alpha transparency still won't work in IE6, but in some cases can be made to degrade more gracefully.

Answer 10

Personally, I do my best to avoid PNG files. Mainly because I've experienced the GAMMA Correction issue.

See: http://hsivonen.iki.fi/png-gamma/