HTML Tips Image Size

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 Colors
  - Using 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 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 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 used for other reasons:
- Big Images
  - If 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 colors
  - If 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.

1000's of colors jpg image - 17K

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.