tags:

views:

393

answers:

9

I'm improving the images of my website and have met a dilemma.

I know PNG & GIF are lossless while JPEG is lossy.

But what is the main difference between PNG & GIF? Why should I use one and not the other?

If I don't care about each and every pixel, should I always use JPEG since it's the lightest?

+9  A: 

JPEG is not the lightest for all kinds of images. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete..

So basically here is a way to decide the picture format

  • GIF if needs animation or transparency that works on IE6(note, PNG transparency works after IE6)
  • JPEG if the image is a photograph.
  • PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency(and IE6 is not a factor)

And as commented, if your unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.

Earlz
Good answer, but I would like to add the following: If you are unsure, try each and see how good the picture looks and how big the file is.
Jesse Weigert
See, at the end you figured out the question and gave a great answer. thanks. I didn't know about the transparency issues with IE6, you gave a lot to think about.
Faruz
GIF is pretty much outdated and I would not recommend it for anything. For animation there are many modern approaches (videos, Flash, JavaScript + SVG). PNG transparency can also work (not perfectly, but equal to GIF) down to IE 5.5.
Tronic
IE 5.5 and 6 actually support 8 bit PNG transparency the same as GIFs, just not the alpha channel transparency of 24 bit PNGs.
Graham
@Tronic, my arguments are: HTML5 is not supported by any IE browsers, Flash does not work on my (OpenBSD) system, SVG is not supported by IE browsers(without a plugin)...
Earlz
@Faruz: It's not our job to "figure out the question". We're just guessing. You, on the other hand, *know* what you need. It's your job to clarify the question by fixing it until it's perfectly clear.
S.Lott
@Earlz, one could also create GIF-like animation by a series of PNG images, animated by JavaScript.
Tronic
@Tronic, that is true, but that isn't "easy"
Earlz
A: 

png has a wider color pallete than gif and gif is properitary while png is not. gif can do animations, what normal-png cannot. png-transparency is only supported by browser roughly more recent than IE6, but there is a Javascript fix for that problem. Both support alpha transparency. In general I would say that you should use png for most webgraphics while using jpeg for photos, screenshots, or similiar because png compression does not work too good on thoose.

HalloDu
+2  A: 

Also, one of the best articles I've encountered is Everything You Need to Know About Image Compression

alexandrul
Thanks, was helpful as well.
Faruz
A: 

GIF based on a palette of 256 colours per image (at least in its basic incarnation). PNG can do "TrueColour", i.e. 16.7 Million colours out of the box. Lossless PNG compresses better than lossless GIFs. GIF can do "binary" transparency (0% opacity or 100% opacity). PNG can handle alpha transparencies.

All in all, if you don't need to use Alpha-transparent images and support IE6, PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such. JPG is unbeatable for photographs.

Pekka
A: 

JPEG will have poor quality around sharp edges etc. and for this reason it is unsuitable for most web graphics. It excels at photographs.

Compared to GIF, PNG offers better compression, larger pallette and more features, including transparency. And it is lossless.

Konrad Garus
A: 

GIF has 8 bit (256 color) palette where PNG as upto 24 bit color palette. So, PNG can support more color and of course the algorithm support compression

Munim Abdul
A: 

The main difference is GIF is patented and a bit more widely supported. PNG is an open specification and alpha transparency is not supported in IE6. Support was improved in IE7, but not completely fixed.

As far as file sizes go, GIF has a smaller default color pallet, so they tend to be smaller file sizes at first glance. PNG files have a larger default pallet, however you can shrink their color pallet so that, when you do, they result in a smaller file size than GIF. The issue again is that this feature isn't as supported in Internet Explorer.

Also, because PNGs can support alpha transparency, they're the only option if you want a variation of transparency other than binary transparency.

Dan Herbert
A: 

GIF is limited to 256 colors and do not support real transparency. You should use PNG instead of GIF because it offers better compression and features. PNG is great for small and simple images like logos, icons, etc.

JPEG has better compression with complex images like photos.

Desintegr
A: 

I usually go with PNG, as it seems to have a few advantages over GIF. There used to be patent restrictions on GIF, but those have expired.

GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression, which favors flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).

GIFs can be used for small animations and low-resolution film clips.

In view of the general limitation on the GIF image palette to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or the lossy JPEG, which is more suitable for compressing photographs.

The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but are not widely used.

David Bridges
PNG also supports alpha transparency, which is quite essential for web graphics.
Tronic