Image Size is Everything

Now the big issue...Graphics. They make a web page full of excitement and color, but if used wrongly or the images are too big, people will never go back to your site.

There are two common image types found on the web (GIF and JPG). Which is better for you? Keep reading and find out when and how to use these two image types.

GIF images are used for several reasons:

• Gif Animation’s (my favorite)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 ColorsUsing a program, 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 Blocks of ColorGif 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 blocks 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:

• Big ImagesIf you have a big image, try saving it as a jpeg. It will usually make the file size a bunch smaller.

• Pictures with more than 256 colorsIf you have a photograph or an image that you scanned in. It is usually better to save it as jpeg. 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.

The following is a side-by-side comparison of image types and sizes. I took a picture and saved it every way I could and then compared the quality and file size. If you would like to see all of the pictures side-by-side click here (It does take a while to download).

TYPE # of Colors File Size Gif - 3 Bit 8 19K Gif - 4 Bit 16 29K Gif - 5 Bit 32 36K Gif - 6 Bit 64 46K Gif - 7 Bit 128 56K Gif - 8 Bit 256 68K JPG - Low Quality 1000's 19K JPG - Medium Quality 1000's + 24K JPG - High Quality 1000's ++ 36K JPG - Maximum Quality 1000's +++ 56K The top image is a 3 bit gif that only has 8 colors in it (19 K). The bottom picture is a Low Quality JPG image, but it has 1000's of colors and actually has a smaller file size (17K)! There is no question, which image I would use on my home page. If you would like to see all of pictures used in this comparison click here (It does take a while to download). These rules are standard terms and it depends totally on the image that you are working with. If you have an image that could be saved either way. Save it as a JPG and then save it as a GIF. Compare the quality and the file size of the image and you will know which one to use.