As you may know, the most widely supported web image graphic formats are GIF and JPEG. This may add to you confusion--when should I use GIF and when should I use JPEG?

The easy rule to remember:

1. Use GIF format with graphics that you have created on your computer such as horizontal rules, buttons, or animation.
2. Use JPEG format when the images are scanned pictures or photographs.

GIF file can contain the maximum of 256 colors (8 bit) or less, which is good for customizing your graphic files. For example, if you create a GIF image of a red arrow, you can customize the file to have only two colors, read and white. This means that the file is very very small because its palette contains only two colors. GIF file will yield a higher quality and smaller size image, compared to JPEG, when it is used with computer generated graphics such as icons, logos, buttons, etc.

JPEG was built to contain 24-bit (16.7+ million colors) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of color changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low color level and details like computer generated graphics.

GIFs also has some special features such as animation, transparency, and interlacing.

Helios

This guide is very helpful, thank you very much!

Btw i´ve made a transperent logo for my forum in JPEG...
but it looks the same in a GIF format..

Ranfaroth

Except for animations, never use GIF.
Use PNG instead, which is much better than GIF on every points.
For example, PNG are smaller than GIF, PNG are free, PNG can have alpha transparency...

GIF is totally deprecated.

gonzo

Ranfaroth wrote:

Except for animations, never use GIF.
Use PNG instead, which is much better than GIF on every points.
For example, PNG are smaller than GIF, PNG are free, PNG can have alpha transparency...

GIF is totally deprecated.

ditto! PNG24 has 8bit transparency. IE, not being standards complient, will not properly render 24bit PNGs with transparency. All the more reason to use firefox

vizavex

Hm... but most of the web design use
JPG or GIF instead of PNG

Not much people use PNG in their
web design

Ranfaroth

Wrong : modern designs use PNG

ignition

I use gif for compatibily and smaller filesize. All gifs can be displayed in IE, but that is not true with png's!

Otherwise (for things other than my website) I much prefer .png

the666bbq

I am not really sure if there is a problem with PNG and IE (have my doubts though) but I'm pretty confident that jpeg will not handle transparancy.
The difference between gif/png and jpeg cannot be limited to simple graphics versus detailed photography. It all comes down to the number of colours you need to sufficiently visualize the objects on the graphic. You only have a palette of 255 colours. But as you can see on some extreme designer sites (like for 16 color windows bootscreens) you can do nice detailed graphics with only a few colours.

some graphical software apps have comparison tools to see the size and wieght of your graphics. Compare gif, png, and jpegs under different setups (quality percentage,...) to see which size fits your quality.

There are just two rules :
a) less is more on the web and you can get extreme in this : the more you loose on the pics the more you gain on the visitors happiness (even with high bandwith surfing)
b) if you need transparency : no jpeg

007nich

Ranfaroth wrote:

Except for animations, never use GIF.
Use PNG instead, which is much better than GIF on every points.
For example, PNG are smaller than GIF, PNG are free, PNG can have alpha transparency...

GIF is totally deprecated.

Exactly! The only 2 formats I use are JPG and PNG. I don't use GIF because it is defunct and also supports less colours. For what I do in Photoshop (photo-real publication), I cannot use GIF.

Guest

one thing you should remember ...

GIF is loosless image format
and JPG is a loosy compression method ...

so generally for big resolution picture ... gif has the larger size than jpg ... use gif only for small image ...

Gif only support up to 256 color palette plus one alpha layer.
but JPG support up to 32 bit color pallette ... this will make a huge difference between gif quality and jpg's in a gradient/photographic image.

but you have to remember ... JPG is a loosy image.

So if you want to have your image in the best shape ... use PNG instead of gif... Yes, PNG is a loosless image compression that could handle up to 24 byte color image (16 bit color pallete ... and the rest is alpha layer). PNG is the only browser support - image carrier that supporting gradient and level on it's alpha layer.

Tips ... if you willing to use an alpha layer in your web page ... I suggest you use GIF instead of PNG. because some browser didn't support PNG alpha layer.

but ... both jpg, gif, and png are "raster" image ... how best their feature ... they would loose something if you resize them. Use vector image instead to store your precious image.

IE is the most used browser all over the world, and i doesn't support PNG format i mean the PNG24, and it doesn't display alpha transparency, that means if are designing an HTML type site, we sould use gifs,... in FLash type site, use png or gif, no problem

Ranfaroth

boutolliz wrote:

and i doesn't support PNG format i mean the PNG24, and it doesn't display alpha transparency

GIF don't support alpha transparency neither. So why using this outdated format ?

Laguna Loire

Alpha transparency ...??
both png and gif has them ...

both of them support transparent layer ... but GIF is limited only to one bit transparent layer. But PNG support up to 8 byte transparent color map.

Ranfaroth

Laguna Loire wrote:

Alpha transparency ...??
both png and gif has them ...

No
GIF only has one bit transparency...

foggy

Ranfaroth wrote:

Laguna Loire wrote:

Alpha transparency ...??
both png and gif has them ...

No
GIF only has one bit transparency...

that's what he said later on in his post.

Ranfaroth

foggy wrote:

that's what he said later on in his post.

As what he said at the end of this post was contradictory with what he said at the begining, I correct the whole post.

Nick

that 's good
i can do this

charliehk

I think PNG is also loosless image format, that is, if u open and close a jpg file several times, it's quality could be worsen. Not for PNG.
But PNG has a larger size than JPG

Anonymous wrote:

one thing you should remember ...

GIF is loosless image format
and JPG is a loosy compression method ...

so generally for big resolution picture ... gif has the larger size than jpg ... use gif only for small image ...

Gif only support up to 256 color palette plus one alpha layer.
but JPG support up to 32 bit color pallette ... this will make a huge difference between gif quality and jpg's in a gradient/photographic image.

but you have to remember ... JPG is a loosy image.

So if you want to have your image in the best shape ... use PNG instead of gif... Yes, PNG is a loosless image compression that could handle up to 24 byte color image (16 bit color pallete ... and the rest is alpha layer). PNG is the only browser support - image carrier that supporting gradient and level on it's alpha layer.

Tips ... if you willing to use an alpha layer in your web page ... I suggest you use GIF instead of PNG. because some browser didn't support PNG alpha layer.

but ... both jpg, gif, and png are "raster" image ... how best their feature ... they would loose something if you resize them. Use vector image instead to store your precious image.

m_furquan36

Tue that PNG can be used for wbsite images, but surely PNG is UNCOMPRESSED and it requires plenty of hosting space which isnt easy to find nowadays. GIF files are wonderful for websites, but in animated form only. JPG's are good for static photgraphs or pictures containing real life human content only, cuz then reducing the quality does not affect the ovrall beauty of the image!

Ranfaroth

m_furquan36 wrote:

Tue that PNG can be used for wbsite images, but surely PNG is UNCOMPRESSED and it requires plenty of hosting space which isnt easy to find nowadays.

WRONG.
PNG are compressed (they use the LZ compression), and requires less hosting space than other format.

I think PNG is also loosless image format, that is, if u open and close a jpg file several times, it's quality could be worsen. Not for PNG.
But PNG has a larger size than JPG

So PNG has a lossless compression method, but PNG's compression ratio is not as good as that of JPG, right?

Ranfaroth wrote:

m_furquan36 wrote:

Tue that PNG can be used for wbsite images, but surely PNG is UNCOMPRESSED and it requires plenty of hosting space which isnt easy to find nowadays.

WRONG.
PNG are compressed (they use the LZ compression), and requires less hosting space than other format.

Ranfaroth

charliehk wrote:

So PNG has a lossless compression method, but PNG's compression ratio is not as good as that of JPG, right?

You can't compare compression ratio of different modes.
For example, if I write an algorithme that take an image in input, and ouput a single bit (the average value of all pixels of the image, rounded to the closest integer), that's a loosy compression, and you can't beat it.

If you want to compare PNG and JPEG compression, you must use lossless compression of JPEG, that is to say no compression. And then, PNG compression is obviously better than JPEG's one.

But now, we can go further : you can choose how many colors you keep with PNG. So reducing this number (which leave us from lossless compression), you can achieve a smaller output than with JPEG.

charliehk

I agree that an apple cannot be compared with an orange.

So you are comparing lossless JPEG (a new standard of JPEG) with PNG?

If so, their compression ratio should be more or less the same. Why do you say PNG compression is obviously better than JPEG's one?

Ranfaroth wrote:

charliehk wrote:

So PNG has a lossless compression method, but PNG's compression ratio is not as good as that of JPG, right?

You can't compare compression ratio of different modes.
For example, if I write an algorithme that take an image in input, and ouput a single bit (the average value of all pixels of the image, rounded to the closest integer), that's a loosy compression, and you can't beat it.

If you want to compare PNG and JPEG compression, you must use lossless compression of JPEG, that is to say no compression. And then, PNG compression is obviously better than JPEG's one.

But now, we can go further : you can choose how many colors you keep with PNG. So reducing this number (which leave us from lossless compression), you can achieve a smaller output than with JPEG.

Ranfaroth

charliehk wrote:

So you are comparing lossless JPEG (a new standard of JPEG) with PNG?

Lossless JPEG is only JPEG with 0% of compression

Quote:

Why do you say PNG compression is obviously better than JPEG's one?

Because compression is obviously better than no compression.

charliehk

First of all, I want to correct your statement:

Lossless JPEG is only JPEG with 0% of compression

No. Refer to this site:

Subject: [13] Isn't there a lossless JPEG?

There's a great deal of confusion on this subject, which is not surprising
because there are several different compression methods all known as "JPEG".
The commonly used method is "baseline JPEG" (or its variant "progressive
JPEG"). The same ISO standard also defines a very different method called
"lossless JPEG". ....

When I say "lossless", I mean mathematically lossless: a lossless
compression algorithm is one that guarantees its decompressed output is
bit-for-bit identical to the original input. This is a much stronger claim
than "visually indistinguishable from the original". Baseline JPEG can
reach visual indistinguishability for most photo-like images, but it can
never be truly lossless.

So you are not talking about lossless jpeg, so forget about it.

Secondly, you said

If you want to compare PNG and JPEG compression, you must use lossless compression of JPEG, that is to say no compression. And then, PNG compression is obviously better than JPEG's one.

So your logic is to compare "PNG with compression" with "JPEG without compression" and come up with a conclusion that PNG is better. I think that is not fair.

So I did an experiement with PhotoImpact 10: I open the "Autumn" pic from Fill Gallery, then save it to different formats. Here's the result:

If anyone knows there's somethg wrong about the experiment, pls point out. Or if anyone wants to do experiment with Photoshop, or wants to select a range of pic to do experiment, pls free to do so(but remember to share the result here!)

Ranfaroth wrote:

charliehk wrote:

So you are comparing lossless JPEG (a new standard of JPEG) with PNG?

Lossless JPEG is only JPEG with 0% of compression

Quote:

Why do you say PNG compression is obviously better than JPEG's one?

Because compression is obviously better than no compression.

Ranfaroth

charliehk wrote:

First of all, I want to correct your statement:

Lossless JPEG is only JPEG with 0% of compression

No. Refer to this site:

Subject: [13] Isn't there a lossless JPEG?

There's a great deal of confusion on this subject, which is not surprising
because there are several different compression methods all known as "JPEG".
The commonly used method is "baseline JPEG" (or its variant "progressive
JPEG"). The same ISO standard also defines a very different method called
"lossless JPEG". ....

When I say "lossless", I mean mathematically lossless: a lossless
compression algorithm is one that guarantees its decompressed output is
bit-for-bit identical to the original input. This is a much stronger claim
than "visually indistinguishable from the original". Baseline JPEG can
reach visual indistinguishability for most photo-like images, but it can
never be truly lossless.

And ? Where am I wrong ?
There're talking about the current use of JPEG : with compression. But you forgot the end of the answer :

Quote:

Lossless JPEG is a completely different method that really is lossless.
However, it doesn't compress nearly as well as baseline JPEG; it typically
can compress full-color data by around 2:1. And lossless JPEG works well
only on continuous-tone images. It does not provide useful compression of
palette-color images or low-bit-depth images.

Lossless JPEG has never been popular --- in fact, no common applications
support it --- and it is now largely obsolete. (For example, the new PNG
standard outcompresses lossless JPEG on most images.)

And even talking about baseline JPEG, using the 100 quality is equivalent as not doing anything. In fact in JPEG algorithm, 100 is a mathematical limit, you can only reach when you don't run it. (To be more precise, with a 100 quality, you don't drop anything in the quantification phase)

Quote:

If you want to compare PNG and JPEG compression, you must use lossless compression of JPEG, that is to say no compression. And then, PNG compression is obviously better than JPEG's one.

So your logic is to compare "PNG with compression" with "JPEG without compression" and come up with a conclusion that PNG is better. I think that is not fair.

That's why your idea of comparing JPEG and PNG compression was stupid.
I'm glad you realise it by yourself after those few posts.

Quote:

So I did an experiement with PhotoImpact 10: I open the "Autumn" pic from Fill Gallery, then save it to different formats. Here's the result:

No.
First PhotoImpact is buggy : even with quality 100 it looses informations. So you have to compare with the original file.
Second, PNG compression use algorithme which can be optimized. For example, it's well known that PhotoShop™ produce huge PNG files, because it still doesn't know how to compress them. you have to run a PNG optimizer after it to have normal size. Maybe it's the same problem with your software.

I ran different tests with imagemagic, which confirm what I said.
For example :
Initial file : 17k
100% JPEG : 17k
Final PNG : 14k

Or with bigger file :
Initial file : 90k
100% JPEG : 90k
PNG : 6.9k

By the way, JPEG2000 can be use loosy or loseless. If the file is smaller than PNG one, you're using loosy compression.

PS : why do you copy previous messages at the end of your posts ?

charliehk

I don't want to talk with a guy who say my ideas are stupid, do you?
I think you are impolite. So excuse me, I don't want to respond to you anymore from now on.

First of all, you asked, "And ? Where am I wrong ?"
Ans: you mess up the concepts of lossless JPEG with 0% compression of JPEG

Secondly, I think PhotoImpact (I've double checked my setting and it is okay) and Photoshop produce similar results: PNG file is larger. Since I don't have imagemagic, I have nothing to say about your experiments. But could other experts help to verify the followings via experiments?
1. Is PNG larger than 100% Quality JPEG?
2. Is PNG of more or less the same size as Lossless JPEG?

Lastly, you asked, "why do you copy previous messages at the end of your posts ?"
Ans: To remind us the previous conversations. I know why you asked such a question: because you don't know the rule! In the last post, you put your own words "(For example, the new PNG
standard outcompresses lossless JPEG on most images.)" under a Quote section, but actually it doesn't exist in previous posts!!!!!! So it appears that I said the words (but I didn't). PLEASE learn the rules of Forum discussion before you post!!

Ranfaroth wrote:

charliehk wrote:

First of all, I want to correct your statement:

Lossless JPEG is only JPEG with 0% of compression

No. Refer to this site:

Subject: [13] Isn't there a lossless JPEG?

There's a great deal of confusion on this subject, which is not surprising
because there are several different compression methods all known as "JPEG".
The commonly used method is "baseline JPEG" (or its variant "progressive
JPEG"). The same ISO standard also defines a very different method called
"lossless JPEG". ....

When I say "lossless", I mean mathematically lossless: a lossless
compression algorithm is one that guarantees its decompressed output is
bit-for-bit identical to the original input. This is a much stronger claim
than "visually indistinguishable from the original". Baseline JPEG can
reach visual indistinguishability for most photo-like images, but it can
never be truly lossless.

And ? Where am I wrong ?
There're talking about the current use of JPEG : with compression. But you forgot the end of the answer :

Quote:

Lossless JPEG is a completely different method that really is lossless.
However, it doesn't compress nearly as well as baseline JPEG; it typically
can compress full-color data by around 2:1. And lossless JPEG works well
only on continuous-tone images. It does not provide useful compression of
palette-color images or low-bit-depth images.

Lossless JPEG has never been popular --- in fact, no common applications
support it --- and it is now largely obsolete. (For example, the new PNG
standard outcompresses lossless JPEG on most images.)

And even talking about baseline JPEG, using the 100 quality is equivalent as not doing anything. In fact in JPEG algorithm, 100 is a mathematical limit, you can only reach when you don't run it. (To be more precise, with a 100 quality, you don't drop anything in the quantification phase)

Quote:

If you want to compare PNG and JPEG compression, you must use lossless compression of JPEG, that is to say no compression. And then, PNG compression is obviously better than JPEG's one.

So your logic is to compare "PNG with compression" with "JPEG without compression" and come up with a conclusion that PNG is better. I think that is not fair.

That's why your idea of comparing JPEG and PNG compression was stupid.
I'm glad you realise it by yourself after those few posts.

Quote:

So I did an experiement with PhotoImpact 10: I open the "Autumn" pic from Fill Gallery, then save it to different formats. Here's the result:

No.
First PhotoImpact is buggy : even with quality 100 it looses informations. So you have to compare with the original file.
Second, PNG compression use algorithme which can be optimized. For example, it's well known that PhotoShop™ produce huge PNG files, because it still doesn't know how to compress them. you have to run a PNG optimizer after it to have normal size. Maybe it's the same problem with your software.

I ran different tests with imagemagic, which confirm what I said.
For example :
Initial file : 17k
100% JPEG : 17k
Final PNG : 14k

Or with bigger file :
Initial file : 90k
100% JPEG : 90k
PNG : 6.9k

By the way, JPEG2000 can be use loosy or loseless. If the file is smaller than PNG one, you're using loosy compression.

PS : why do you copy previous messages at the end of your posts ?

mathiaus

Quoting a small bit of wht you are refering to is OK but to quote what yuo have quoted in your last post is plain damb daft. What a waste of space!
Your lucky I aint mod in here!

Ranfaroth

charliehk wrote:

I don't want to talk with a guy who say my ideas are stupid, do you?

It's yourself who realised it

Quote:

First of all, you asked, "And ? Where am I wrong ?"
Ans: you mess up the concepts of lossless JPEG with 0% compression of JPEG

No I didn't mess up.
Maybe it's a bit complicated for you, but read again my post. I clearly disinguish the two cases

Quote:

Secondly, I think PhotoImpact (I've double checked my setting and it is okay) and Photoshop produce similar results: PNG file is larger.

Oki, then we've got the answeer : it's a PhotoImpact bug.
As I said, Photoshop is known to bug with PNG file, producing none optimise ones.

Quote:

Lastly, you asked, "why do you copy previous messages at the end of your posts ?"
Ans: To remind us the previous conversations. I know why you asked such a question: because you don't know the rule! In the last post, you put your own words "(For example, the new PNG
standard outcompresses lossless JPEG on most images.)" under a Quote section, but actually it doesn't exist in previous posts!!!!!! So it appears that I said the words (but I didn't). PLEASE learn the rules of Forum discussion before you post!!

So read yourself the rules more carefully. You'll see that your answsers must be put after the quote, and not the contrary as you're are doing....

- Find thanks
- How are you ?

Do you understand the problem ?

davmcmul

@Charliehk

Not that I think ranfaroth needs any backing up...

charlie you need to read ranfaroth's posts more thoroughly, and stop assuming you are correct. This has become a heated debate, and there's nothing wrong with that, as long as you both take that into account and don't take it personally. You referred to a website where someone spoke about the misunderstanding between lossless jpeg and not lossless jpeg except i don't think you read it thoroughly, this website said that it was impossible to compress jpeg and keep it lossless, agreeing with ranfaroth.

also, about quoting at the end of posts "to remind us of the topic". Even if you are a star wars fan, it doesn't make sense to remind us after you've made you're argument....

Finally I would like to thank both of you for thrashing out this topic so thoroughly, it makes me trust the result even more when I know both sides were argued a lot!

charliehk

davmcmul,

thx for your opinions. I have nothing more to say, pls refer to my previous posts and others' posts to determine who is right.

For all, if you are interested in the new lossless jpeg standard, pls refer to the following site:

Lossless JPEG was added to the JPEG standard in 1995 to allow for image compression with no loss of information...

mohamed

JPEG compression in the main graphic softwares in its core program (w/o) plug-ins seem to yield a better optimisation. This is quite the main reason for the popularity of JPEG.

secondly, png does not boast the browser support of jpg.

I really like png for its quite a leap from a .gif for an extension that retains the alpha layer. But universal browser support for versions that is primitive always deter usage of new extensions for the sake of a perfect site.

ionide

Personally, I find png to be very useful and I use png or jpg for almost everything I do (image-weise). It is disappointing that IE does not display png alpha transparency very well, and that is why I use firefox and encourage others to do the same. gif seems inefficient to me and I'm not sure but it looks to me like gif files are not as high quality as png and/or jpg. just my two cents

knieja

Quote:

Btw i´ve made a transperent logo for my forum in JPEG...
but it looks the same in a GIF format..

How You made a tranprency in JPEG format... I thought: "Only Gif and PNG has transparency effect...."