Digital Images
Digital Images are a lot like Pictures. At least they look like Pictures.
Digital Images are made of dots called Pixels (Picture Elements).
The pixels are arranged in a grid or array.
When we look at them the pixels blur together and look like a picture.
JPG Images
JPG--2,144 Bytes--Quality 80 (low)--125X112 pixels
JPG--4,916 Bytes--Quality 30 (medium)--125X112 pixels
JPG--8,318 Bytes--Quality 10 (high)--125X112 pixels
GIF Images
GIF--3,653 Bytes--16 colors--No Dithering--125X112 pixels -- 11 colors used.
GIF--7,366 Bytes--256 colors--No Dithering--125X112 pixels -- 68 colors used.
GIF--8,695 Bytes--256 colors--Diffusion Dithered-- Standard palette--125X112 pixels -- 79 colors used.
GIF--14,212 Bytes--256 colors--Diffusion Dithered--Optimized palette--125X112 pixels -- 245 colors used.
Click to see them twice as big, 4 times nicer. (About 150K)
There is a description of the images and the effects of the image formats.
If there is little difference between the higher quality images please refer to You and Your Display.
Image Size
How big the image is. This can mean two things. The array size or the file size.
The image array is usually the width and then the height of the image.
Eg. 640 X 480 is the width and height of a VGA screen. Or an image that will fill it.
The image file size is the size in bytes of the file that stores the image.
Resolution
This is how many pixels it takes for one linear inch of image.
It is commonly measured in Dots Per Inch (DPI).
Printers, Scanners and other devices use the same nomenclature.
Depth
This is how many bits are used to represent a single pixel.
A 1 bit image (8 pixels per byte) is black and white.
A bit can have only 2 values, "0" or "1".
A 4 bit image (2 pixels per byte) has 16 possible values.
An 8 bit image (1 pixel per byte) has 256 possible values.
An 8 bit image can be a grayscale image or a color image.
The eye can only see 40 shades of gray.
A 16 bit image (2 bytes per pixel) usually refers to an image with 64,000 possible colors.
A 24 bit image (3 bytes per pixel) usually refers to an image with 16 million possible colors.
When we talk about color and images we are talking about the colors of light in an image.
This is opposed to the colors of ink on a piece of paper. They are very different.
White light is made of a spectrum of colors.
Our eyes see only three colors, Red Green and Blue.
You can make colors in two ways.
By adding more color with light.
Or start with a white piece of paper
and add paint that absorbs some of the colors.
Light that wasn't absorbed is reflected.
If you shine a Red light and a Green light on the same spot,
the lights add together to make Yellow. Red and blue make Magenta.
Green and Blue make Cyan (artists blue).
If you shine a white light on a piece of paper with Yellow ink on it,
the Yellow ink absorbs Blue light. Leaving Red and Green light.
If you mix Cyan (artists blue) with the Yellow. Cyan absorbs Red,
leaving only Green.
Paint or dyes subtract color.
Usually on "Full Color Images" there are 256 different values for each color plane.
That is one byte for each color. This is a 24 bit image.
Sometimes the 24 bits are represented by 6 Hexadecimal numbers, two for each color, RRGGBB.
Palettes
Color images can have a palette of colors to choose from.
All pixels in the image can only use the colors in the palette.
For example an image may have a palette of 256 (byte) different colors.
The value stored for each individual pixel is a pointer to a specific palette color.
Each color in the palette is a 24 bit color. Each has a Red, Green and Blue component.
Any of the colors in the pallet can have one of 16 million colors.
This is important because each pixel takes only one byte or less to store the pointer.
If each pixel stored the actual color it would take 3 bytes for each pixel.
The question is what palette to use. There are several standard palette.
When reducing the number of colors you can load a standard palette.
Or allow the program to optimize a palette for a specific image.
If the original image has colors that aren't in the palette.
You can select what happens. It can be set to the nearest color or dithered (below).
If you optimize a palette for an image there can be a problem. You may have more colors or different colors than your browser can display.
When browsing the web. The images may look different depending on the browser you use. If your display is set to 256 colors (many are) the images are
palletized to your display via your browser. Netscape uses a color cube that contains a progressive amount of each color. Each color changes by #33
(hexadecimal) or 51 (decimal). For example #000000(black), #000033, #000066, #000099, #0000CC, #0000FF(Blue).
In decimal these values are (0,0,0) Black, (0,0,51), (0,0,102), (0,0,153), (0,0,204) and (0,0,255) Blue.
All combinations of Red Green and Blue are made using the same scheme.
This is a palette of the colors used by Netscape. Think of Red, Blue and Green lights. The lights have bands of intensity. These bands are the 6 intensities of each color used by
Netscape. When the lights overlap their values add together. On the left the lights are brighter in the center. On the bottom right the lights are dark in the center. On the top right only the outside edges have constant intensities. On the bottom left is the gray scale. The three values are the same for each color.
You may notice that this palette only contains 216 different colors. It's typically called a 216 color palette or 6x6x6. This palette is great for rendering pictures. It has a little of every color. And when you dither pictures they come out pretty nice. Check the test images.
The problem is when images are drawn graphics. Individual color tones are hard to find. I put this palette in the graphic while I am making it for easy color selection.
Different browsers use different ways of establishing the palette they use. Some use the first colors that they find. Or try to select the best fit.
Please see You and Your Display for more information.
To see the full color chart Please see the Color Chart in Image Processing.
Many images use more than 256 colors.
To make it look like there are more colors, programs intermix different colors
to create the illusion of more colors. This is called Dithering.
The human eye blends the colors in the same way that it blends the pixels on an image.
The result is the illusion of more colors and a grainer, splotchy texture to the image.
This is more apparent in a smooth gradient of color. For example the sky.
There can be another problem when you dither an image.
You usually dither an image when you are trying to reduce the file size of an image.
However, intermixing colors can greatly reduce the compression effeciency of the GIF file format.
Many times reducing the number of colors and dithering results in a larger image.
Please see Image File Formats for more information.
It is best to use the JPEG format for pictures even if the browser palettizes them.
It is best to use the GIF format for graphics. Even if they don't use the 216 color palette. Unless they are transparent or dithering is undesirable.
