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:

http://stackoverflow.com/questions/392635/website-image-formats-choosing-the-right-format-for-the-right-task — Andreas Grech, Mar 04 '09 at 13:31
And http://stackoverflow.com/questions/115818/which-format-for-small-website-images-gif-or-png/115838 — Paul Tomblin, Mar 04 '09 at 13:34
Don't forget that IE6 doesn't support PNG transparency natively. — Kieron, Mar 04 '09 at 13:35
Kieron, IE6 doesn't support a certain type of PNG transparency, namely alpha transparency. It supports 1-bit transparency, just like in GIF, fine. — thomasrutter, Mar 04 '09 at 14:05
On the plus side, IE6 is finally below 20% share (according to Net Applications). As of last month, it's now less popular than Firefox :-) — Steve Jessop, Mar 04 '09 at 14:14
I know this was apparently a duplicate of other posts, but I thank you all for your replies. — Ascalonian, Mar 18 '09 at 14:51
This is NOT at all a duplicate of that second link. But it is a duplicate of the first. — thomasrutter, Apr 10 '10 at 04:01

TJL · Answer 1 · 2013-05-02T14:46:14.627

23

XKCD style comic strip that explains it:

alt text

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

edited May 02 '13 at 14:46

answered Mar 04 '09 at 13:30

TJL

6,330
8
34
36

Is this a XKCD comic? if so, can you link to it? =8-) – Yuval Mar 04 '09 at 13:35
As funny as it is, not very explanatory. – Stefan Thyberg Mar 04 '09 at 13:38
this being voted the best answer ...this site is more Digg every day. – typeoneerror Mar 04 '09 at 13:44
3

Definitely !XKCD. To explain a bit: what you see on the right side are JPEG compression artifacts - JPEG is useful for photographs (lossy compression is more bearable there), but on sharp edges it will not do well. That's what PNG is for (left side). – Piskvor left the building Mar 04 '09 at 13:50
1

It's not real XKCD, just "XKCD style" from blog post which is now linked below picture. – TJL Mar 04 '09 at 13:54
I do have to say I really like this comic... friends from work got a kick out of it too – Ascalonian Mar 09 '09 at 20:06

thomasrutter · Accepted Answer · 2013-09-23T02:01:08.367

23

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.

edited Sep 23 '13 at 02:01

answered Mar 04 '09 at 13:43

thomasrutter

114,488
30
148
167

Note that the bit about always using palette mode instead of true color for PNGs for the web is a generalization, but if you are experienced enough to encounter one of those situations where true color PNGs are truly justified, you probably don't need a guide like this. That was my assumption. – thomasrutter Mar 04 '09 at 14:17
There is Palette colour 2 to 256 colors + 8 bit alpha transparency mode in PNG. See: http://pornel.net/pngnq. It also happens to degrade nicely in IE6. There are other modes too (e.g. grayscale and 16-bit per channel). – Kornel Mar 04 '09 at 20:06
@porneL I've updated the answer to mention that the palette+alpha modes can be made to degrade more gracefully in IE6. – thomasrutter Mar 13 '09 at 03:28
Do pngs have a touch of overhead besides compression? On some occasions on really small images, a gif produces a smaller file size. – alex Mar 13 '09 at 03:49
@alex that is most likely because your graphics app is adding unnecessary metadata to the image, which may include comments, gamma and color space information. Photoshop does this, which makes it a poor choice for creating web-friendly PNG. All things the same, PNG overhead is less than GIF. – thomasrutter Mar 13 '09 at 04:29
@thomas: So does GIF not support meta data attached to it? – alex Mar 16 '09 at 06:11
GIF does support some meta-data, but it is for the most part application-specific. Some apps will store a 'comment' in it though. – thomasrutter May 22 '09 at 03:09

score 7 · Answer 3 · answered Mar 04 '09 at 13:31

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.

score 5 · Answer 4 · answered Mar 04 '09 at 13:33

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.

score 4 · Answer 5 · edited Jul 03 '12 at 14:12

4

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

edited Jul 03 '12 at 14:12

answered Mar 04 '09 at 13:40

Skizz

69,698
10
71
108

Note that GIF (or rather, the LZW algorithm used in GIF) isn't patented since many many years ago. LZW patent expired in the U.S. on 20th June 2003 and some few years later in some (few) european countries that were stupid enough to also grant a patent for an algorithm. More info on http://www.kyzer.me.uk/essays/giflzw/ http://www.freesoftwaremagazine.com/node/1772 and http://en.wikipedia.org/wiki/Graphics_Interchange_Format#Unisys_and_LZW_patent_enforcement – José Luis Aug 07 '12 at 12:32

score 3 · Answer 6 · answered Mar 04 '09 at 13:36

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.

score 3 · Answer 7 · edited Mar 04 '09 at 13:43

3

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).

edited Mar 04 '09 at 13:43

kender

85,663
26
103
145

answered Mar 04 '09 at 13:38

Dutow

5,638
1
30
40

This answer's quite misleading. What do you mean JPEG is 'bigger'? It's often smaller. For instance with photos it is much smaller. – thomasrutter Apr 10 '10 at 03:49

score 1 · Answer 8 · answered Mar 04 '09 at 13:28

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

answered Mar 04 '09 at 13:28

Mark Pim

9,898
7
40
59

1

Um, JPG isn't about colour, it's a lossy format (GIF is lossless), which is acceptable for photos but not so much for text, icons or anything with sudden colour/contrast changes because it uses run length encoding. – cletus Mar 04 '09 at 13:31
1

GIF isn't "best" for anything at all except for animation, which is only by default because PNG can't do it. PNG's not really "new" either, unless you consider Internet Explorer 4 and Netscape 4 to be new (the first browsers which supported PNG). – thomasrutter Apr 10 '10 at 03:52

score 0 · Answer 9 · answered Mar 04 '09 at 13:32

0

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 ;-)

answered Mar 04 '09 at 13:32

Treb

19,903
7
54
87

No license fees to pay with JPEG or GIF. There was once the threat of such with GIF, but the relevant patents expired years ago. PNG is not good in "both regards". It's a good replacement for GIF, but not for JPEG. – thomasrutter Apr 10 '10 at 03:54
@thomasrutter: Why do you think PNG is not a good replacement for JPEG? I find it adequate in compression rate vs. quality. – Treb Apr 11 '10 at 09:02
PNG satisfies a different need to JPEG. The biggest difference is that JPEG is lossy compression whereas PNG, like GIF, is not, so PNG won't compress photographs or scans very well at all. PNG is a good replacement for GIF (in all aspects but animation), but it is almost never a good replacement for JPEG. If you have found that it is, then it's likely to be a situation where JPEG wasn't the best choice in the first place - I'd argue that the situations in which JPEG is the best choice have not changed as a result of PNG's invention. – thomasrutter Apr 12 '10 at 02:25

cdonner · Answer 10 · 2009-03-04T14:03:07.263

0

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.

edited Mar 04 '09 at 14:03

answered Mar 04 '09 at 13:35

cdonner

37,019
22
105
153

Didn't the GIF patent expire a few years back? – Eric Petroelje Mar 04 '09 at 13:39
It did, but even so, GIF has other problems and has been mostly superseded by PNG. – Piskvor left the building Mar 04 '09 at 13:52
Plain wrong: "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." Honestly, where do I start? Ok, JPEG and PNG don't work well for "most applications", nor will the files be "larger than GIF", not is GIF the only format that handles transparency. GIF does NOT use "RLL" encoding it uses LZW compression. And as already pointed out, the GIF patents expired years ago. – thomasrutter Apr 10 '10 at 03:58

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

10 Answers10

Linked