How Pictures Work on the Web

This should help you understand how to make images to use online. This version, of 13 January 2005, has the basics of compression and channelling, but it will eventually carry more on perception (rods and cones, gamuts, the fovea, illusions, illuminants, etc.) and implementation (optics, wavelet compression, fractal compression, video compression, etc.). I’m merely a hobbyist – I welcome suggestions and corrections of fact and of didactic method.

Above is a sample image with a bunch of natural colors and textures plus some test patterns. We’ll use it to see the parts and derivatives of a digital image. Why don’t you take this opportunity to stare at it a little?

Perceiving images seem natural, but it’s at least partially learned; anthropologists find that aldults who have never seen photographs before don’t immediately see how they relate to their subjects.

When the image is on its way to your monitor, the color of each pixel (raise your hand if you don’t know what a pixel is) is a set of three numbers: how red it is, how green it is, and how blue it is. You can use any scale as long as you’re consistent. If you take R, G, and B as axes, they define a three-dimensional space which you can represent as a cube:

template for an RGB color cube

If you cut this out of your monitor and fold it in the obvious places so that each dab of color is gathered on a corner by itself, you will have your very own color cube to hold and to love. Intermediate students can fill in the faces so that the colors between the corners slowly melt into each other. Advanced students may wish to fill the cube with properly colored clay or glass, thus making it actually three-dimensional.

Drawings of spaces, pictures in spaces, Lab, channels, and some other stuff.