Missy's Place

Graphic Types: GIF and JPG Images

Images with solid areas of color are usually saved as GIF's. I try to use web index colors whenever possible so the best colors will be seen on all monitors. If the web-only colors do not work for an image, I use adaptive index colors.

Images with graduated colors or which are photographs are usually saved as JPG's. I use either JPG's or GIF's using adaptive index colors, depending on the subject and the use.

The quality of your images will be better if you try to follow the above guidelines.

All images should be 72 dpi. If you use a large resolution, such as 300 dpi, the image will be large and take "forever" to load. An image file size of 30 kb (30k) or smaller is preferred.

Following are some examples.

Solid Areas of Color:

GIF Image JPG Image  
flower1.gif
2 kb
This is a GIF image done with only pure web index colors.
flower1.jpg
7 kb
This is a JPG image. The details are not as crisp, and the colors do not match the original artwork. Notice the difference in file size.
 


Blended Areas of Color:

GIF Web Colors GIF Adaptive Colors JPG image
flower2web.gif
3 kb
This is a GIF image done with only pure web index colors. There are not enough pure web colors to effectively show the blended colors.
flower2adap.gif
5 kb
This is a GIF image done with adaptive index colors.
flower2.jpg
7 kb
This is a JPG image. The details are not as crisp, but the colors are close to the original artwork.


Photographs:

GIF Web Colors GIF Adaptive Colors JPG Image
babyweb.gif
6 kb
This is a GIF image done with only pure web index colors. There are not enough pure web colors to effectively show all the colors.
babyadap.gif
13 kb
This is a GIF image done with adaptive index colors.
baby.jpg
9 kb
This is a JPG image. It looks the same as the adaptive index color image on my monitor, though notice the much smaller file size.

Notes:

I use Photoshop for my images, and I work with RGB colors and as many web colors as possible.

GIF'S
For images with solid areas of color, I convert the image to web indexed colors, then I convert back to RGB, then I convert to exact indexed colors. These multiple conversions strip the final file of excess color information, and the file is as small as possible.

For images with blended colors or photographs, I convert the image to adaptive indexed colors. If I am planning to have a transparent background for the image, I must use adaptive GIF's. If it's a choice between using a GIF or a JPG, I may do both and let the final file size and the quality of the image determine the choice. Sometimes the background of a JPG will not properly blend with the page background.

JPG'S
For photographs the preferred choice is JPG's. For images with blended areas of colors, I use either JPG's or GIF's saved with adaptive indexed colors.

My butterflies and logo on this page are JPG images. The drop shadows are blended areas, so I had to use either the JPG or GIF adaptive format.

~  Home Page  ~  HTML Cheat Notes  ~  Java & JS Links  ~
~  Web Colors  ~  Web Font Colors  ~
 ~  Background Image Info  ~
~  Graphics  ~

 Email