One thing to keep in mind when you are creating your images is file size. There are two main file type on the web. GIF and JPEG.
GIF images are limited to 256 colors. They can have one of those colors set as transparent (technically called an alpha channel). Where colors are blended, GIF images use a method called dither to make the colors look like the are blending. GIF images are best used when your picture has large areas of solid color, like logos or icons. You can usually change the number of colors and the type.amount of dither in a GIF image to adjust the file size. GIF images with 256 colors tend to have a larger file size. A GIF image with 16 colors may have a small file size.
JPEG images are always displayed in full color, but they are compressed. They cannot have any transparency. JPEG images are best used when the picture has a lot of colors and intricate detail, like a photograph. Because JPEG images can be compressed they can make images with lots of color and detail very managable. When a JPEG is compressed the image may begin to look blotchy or blurry in some spots.
Small graphics, like thumbnails vary in size. It is best to test both GIF and JPEG formats for thumbnails and use the file with the smallest size and best quality.
It is best to carefully test your images until you find which file type, compression level, and color level works best for you. Below are several images in different formats and versions. I have made the text bold for the image versions that I would choose for a web page so you can get an idea of what to look for.
|
Full Quality Image |
Medium Quality Image |
Low Quality Image |
G
I
F |
GIF Image - All 51 Colors - 9k size
Excellent quality, small file size. |
GIF Image - 16 Colors - 8k size
OK quality, small file size. |
GIF Image - 8 Colors - 7k size
Poor quality small file size. |
J
P
E
G |
JPEG Image - 100% Quality - 57k size
Excellent quality, large file size. |
JPEG Image - 50% Quality - 15k size
OK quality, medium file size. |
JPEG Image - 15% Quality - 7k size
Very poor quality, small file size. |
G
I
F |
GIF Image - 256 Colors - 43k size
Good quality, very large file size. |
GIF Image - 64 Colors - 29k size
OK quality, large file size. |
GIF Image - 16 Colors - 16k size
Poor quality, medium file size. |
J
P
E
G |
JPEG Image - 100% Quality - 33k size
Excellent quality, large file size. |
JPEG Image - 50% Quality - 13k size
Good quality, medium to small file size. |
JPEG Image - 00% Quality - 5k size
Very poor quality, small file size. |
G
I
F |
GIF Image - 256 Colors - 10k size
Good quality, large file size. |
GIF Image - 16 Colors - 3k size
OK quality, small file size. |
|
J
P
E
G |
JPEG Image - 100% Quality - 12k size
Excellent quality, large file size. |
JPEG Image - 20% Quality - 2k size
Good quality, small file size. |
|