GIFs and JPGs - Image Size, Quality, Which is Best -

Graphics -- They make a web page full of excitement and color, but if used incorrectly or the images are too big and take forever to download, people may never go return to your site.

The two common image types found on the web are GIFs and JPGs or JPEGs. Which is better? See below for a quick guide:

GIF images are used for several reasons:

GIF Animation’s
Draw each frame of an animation in a paint program, you then save each image as a different frame. You then compile all the GIF frames in a program and it forms 1 GIF file, but plays like an animation.

Transparent Images or Colors
You can assign one of the colors in your image to be transparent. This is a very useful technique to get rid of an ugly square image or to let the background of your home page shine through

Interlaced Pictures
These type of images load a poor quality image up quickly, and then through 3 more passes, the image gets better and better as you go. This is a good type of image for large pictures that load in slowly. By using this technique, the viewer can see at least something while they wait for the rest of the image to load in.

Images with few colors (less than 256) or Solid Areas of Color
GIF Images are great if you only have a picture with a few colors, because it loads in a lot quicker. They are also good if you have large areas of the same color. The file size is a lot smaller if you use a GIF for this type of image.

JPG images are better used for these reasons:

Large Images
If you have a big image, try saving it as a JPG. It will usually make the file size much smaller.

Pictures with more than 256 colors
If you have a photograph or an image that you scanned in. It is usually better to save it as JPG. Not only will you have better quality with 1000's of colors. The file size is usually smaller than a GIF of the same file.

Two tools available to help reduce file size are GIF Crucher www.eons.com/gifcruncher.htm and the JPEG Wizard www.eons.com/jpegwiz.htm . Both are free.

Adobe www.adobe.com offers this advice:

Continuous-tone images look best saved as JPEG (medium or low is all you need) and also give you the smallest file size. If transparency is needed, save as GIF, using an Adaptive palette with the fewest number of colors. Compare the look and file size of the images that follow. Click the image to see who is behind those crazy glasses.

Flat-color images (anti-aliased) do well without any dithering, so using Photoshop's Indexed Color mode (with an Adaptive palette and a Dither of None) and then saving as GIF will give you the best results with the smallest file size. The number of colors you need will depend on the image - try using the least number possible to get the smallest file.

Black-and-white images need very few colors, so saving them as a GIF with Photoshop's GIF89a Export Filter lets you select a low number of colors (six colors works well on an anti-aliased image), and preview the image to quickly see how the image will look.

Gradations look best with as many colors as possible, so JPEG Medium is the best option for gradations. (JPEG gives a much smaller file size than GIF with an adaptive palette.)

------------------
Jeffrey Ellison
[email protected]
www.eons.com - Free Online Tools for Webmasters

[This message has been edited by Jeffrey Ellison (edited January 31, 1999).]