Questions about best image formatting...

quex

So, a short introduction. I'm a graphic designer, trained mainly in design for print. I've taken a few multimedia classes, but the little details about things like image formatting for optimum display online and compression of files continue to elude me.

Here's what I know:

1) The three formats that can be seen online in most browsers are JPG, GIF, and PNG. As I understand it, JPG is for full color with fine gradients and no alpha layer, GIF is for limited color with an alpha layer (and can be animated), and PNG is for full color without fine gradients, and with an alpha layer (recommended as the web display format for images that were built with vectors, rather than raster).

2) JPG files can be saved in varying degrees of quality, usually on a 1-12 or 1-20 scale, depending upon the image editor that they are compiled in.

3) JPG files can deteriorate over time with "handling" of the file, resulting in JPG artifacts (funny blotches).

And HERE is what I would like to ask the community about:

1) Are there any special uses for these filetypes that I'm missing? Am I correct about what I know so far? Is there a fourth or fifth widespread graphic type that can be used in browsers? (Please, I want to know everything!)

2) What is the difference between the compression types offered for JPG files? For example, Photoshop mentions "baseline" and "progressive," but I've never been able to solidly understand what each of these options means... is one better for graphic quality than the other?

3) Do PNG or GIF files deteriorate in the same way that JPGs do? Are there any steps to be taken, either in compiling or storing these files, that can reduce or stop the rate of deterioration? (I've heard that once a JPG has been burned to a CD/DVD, any downloads of that file from the disc source will continue to be as "fresh" as the file was when it was burned... is this true?)

Thanks in advance for anything you can tell me! I appreciate your time!

Donutey

If i remember right PNG is a lossless format, so you don't lose quality when handling it.

From my experience, PNG is best for displaying things like screenshots, or styling elements. PNG also allows for an 8(?) bit alpha channel, instead of 1 bit like GIF, although PNG 8 bit transparency is not supported in IE 6 (but yes to IE7)

JPG is best for pictures (lossy compressed). It looses quality when a person saves an image as JPG, then edits the image, then resaves the image (compressed and lossy) into a JPG image. Thus the image has been compressed twice and you lose more quality. The best way to handle JPG files is to save a lossless version, and then when you need a smaller, compressed JPG file, edit the lossless version, then save it into JPG. That way you won't experience any deterioration.

quex

Good advice, thanks! So, keeping all original files in PNG is the way to go, eh? There was something a printer told me once about PNG not being able to support the same kind of smooth gradients that JPG files can handle, but I wonder if she was thinking GIF, or if she meant something about the maintenance of the gradient when the file is compressed...?

Personally, I can't see the difference, so I'll be using PNGs from now on. Thanks!

Donutey

The printer was probably thinking GIF, because GIF (unlike PNG) can only handle 256 colors at a time, which makes gradients look bad.

Hope that helps.