CLICK HERE TO BREAK OUT OF FRAMES OR
TO VIEW MY SITE IN FRAMES
Difference Between GIF and JPG

Here's a couple of emails I typed up a while ago when some people emailed me asking about the difference between GIF and JPG.  If you're seeing this, it's probably because I gave you the URL because I saw that you had images on your web site that were in a format that was either an inefficient use of disk space or was making the images look crappy, or both.

Ya browsers can open both but GIF and JPG aren't just two formats that you choose one randomly -- GIF is limited to 256 colors (although each image has it's own pallate so it can be any 256 colors not just a predetermined pallate) and tends to make curves look jagged. They are also "lossless compression" files meaning that it looks for areas that it can compress but it doesn't change anything. JPG on the other hand, uses millions of colors, but it cuts out parts of the image when it saves it, and then browsers interpolate the missing data. Interpolating means basically it's like the browser looks at 2 pixels when there's one that was cut out between them, and makes an estimated guess as to what color the pixel between them should be. So you don't end up with your original image, which is usually okay for photographs (and necessary for web pages -- non-compression formats for photos like TIFF can be 10-100+ megabytes for a photo, depending on the resolution and original image size). But if you save a photo as a GIF, it cuts it down to 256 colors and makes edges jagged, which makes it look shitty.

But if you're saving computer art (line art, clip art, etc.) that has 256 or less colors, GIF is better since it doesn't interpolate, which would give slightly blurred results (since it would change, for example, a solid black line into what would end up looking like black with a little grey around it or something).

Also, because of the way that JPG compression works, any time you open a JPG and then resave it -- even if you didn't change anything -- it takes the interpolated image (which is, of course, not the original image) and re-cuts out more data, which means you're left with even less of the original image. So if you are working with scanned photos and want to change stuff, do all your work in a TIFF file, and then save it as a JPG only as the last step. (by the way in case you're wondering, since browsers only read files, not save them, a JPG on a web site doesn't get crappier looking just from people seeing it with their web browser -- it has to be saved to re-cut the data, not just opened/viewed.)

If you got that photo from your source as a GIF, there's not much you can do -- it's already been cut down to 256 colors and there's no way to get that information back (unless you can get the original TIFF file or a JPG copy from whoever scanned it).

And here's the second one:

JPGs are variable-compression. In Photoshop it gives you a 1-10 level; try 5 or so and it'll make it smaller but still a decent-quality image. The reason is because GIF uses lossless compression, which means that it can't compress the image anywhere near as much as JPG. JPG on the other hand cuts out a lot but since photos are big areas of changing shades instead of distinct shapes of different colors, your eye doesn't notice as much. For more info check out this page on Wayne Fulton's web site:

http://www.cyberramp.net/~fulton/basics09.html

Since GIFs don't fade/smear the edges of color changes, they make edges look jagged in addition to being limited to 256 colors. There's really no reason to use GIF instead of JPG for photos -- they're bigger files than decent compression levels, and they make it look like crap. Mess with the compression, checking file size and image quality until you get a good comprimise. Since with Photoshop you can't actually save a file as a JPG (only "Save a Copy") and then the image open in Photoshop is still the Photoshop files, what I usually do to compare image quality to size is run Windows 95 Explorer and a web browser. Save it as a JPG, check the file size (you're have to choose View | Refresh in Explorer after you save it with a different compression level to see the new file size) and then hit reload in the browser to open the new saved JPG. If the file's too big or looks to crappy, re-save a copy as a JPG and adjust the compression level, then refresh Explorer so you see the new file size, and reload the image in the web browser.

Also, you should never work with JPGs are your master copy. Every time you open a JPG, it looks at the missing data and interpolates the empty spaces. It looks all right to your eye, but if you save it again, it looks at that partly-faked image and cuts out *more.*   The more times you do it, the worse it looks.  So you should do all your work with a Photoshop or TIFF file -- both of which are lossless compression, meaning that although it compresses it, it doesn't cut out any data (and of course ends up with bigger files of course). Then save it as a JPG only as the last step. Also you should consider doing your title images with fading colors as JPGs because for instance in your files "me.gif" I can see horizontal lines at color change areas because it's a GIF. JPG would smear it slightly instead, which would look like a smoother color shift to the eye. Of course, you wouldn't want to save computer-generated line art as a JPG, because the smears would show. A GIF would be better for stuff like that because it keeps color change borders seperate.

The reason I have my titles saved as GIFs is because the started off with only two colors -- black and red. Since a normal color image shows only 256 shades of any color, including all the way down to the darkest shade which is actually black, there are only 256 colors in them (including black). Nothing was cut out. But your title images are multi-color with fading colors, which means that in the areas where one color fades to another there are many, many shades of each color, and since GIF files can only have 256 colors, lots of those transitional colors were cut out. That's what gives it the jagged lines between colors like I was saying before. The was GIF can be compressed without losing any data is because instead of looking at each pixel and then deciding which to throw out like JPG (and then those missing pixels are interpolated later), GIF looks at it like geometric shapes. It says, I've got a 100x50 pixel area of white, and it just stores those dimensions instead of storing a "white" code for 5000 seperate pixels. That's called "lossless" compression -- it compresses it to save disk space but it doesn't actually cut out any data.

Hope this info helps. I realize that not everyone wants to take the time to learn about stuff like this in enough depth to make decisions on their own about it, but I tried to keep it simple so basically it's like photos or anything with blending colors, use JPG. Computer-generated line art with precise border where the color changes directly from one color to another without blending or smearing should be saved as GIF. As far as JPG compression, each image is different based on how many areas of similar colors there are, so you have to guess-and-check to get a good compression-to-quality ratio.