weballey logo
 
left Web design - dithering backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

LAYOUT

GRAPHICS

palettes
examples
web palette
anti-aliasing
< dithering >
downsizing
backgrounds

  dithering     Most monitors can only display a limited amount of colors. Often no more than 256, in some cases only 16. If you want to display an image that has more colors, you will have to come up with something for the intermediate tinges. You can replace it with a closely resembling color, that can be displayed. Or you can use a raster to mix two color to make the intermediate. This technique is known as dithering.
    Dithering comes in two varieties: ordered and random. Ordered dithering uses a regular raster, like a chessboard pattern. This will work best for graphics with relatively large areas of the same color. Random dithering uses (seemingly) random patterns. This will work better for photographs and graphics with areas of blended or fading colors.
    Blended color areas will get very ugly when you use color replacement. Where one color meets the next, you will get a line, like an altitude line on a map. The area will be separated into bands, making new areas. In graphic or artistic images this may be acceptable or even a desired effect. In photographs it will look very unnatural. Most of the time you cannot use this method.
    There is a danger when combining dithering with anti-aliasing. Especially graphic images you will get saw-tooth edges where two color areas meet. In such cases you will have to dither or to anti-alias, but not both. If you do combine these methods, you will have to zoom in on every line and recolor every undesired pixel. This can result in a lot of work.
    Dithering is a quite crude technique. Only use it when really necessary. Preferably use a palette of 256 colors for graphic images, consisting of the colors a standard monitor can display. Should you require dithering, preferably use the ordered variety. Random dithering is best used for photographs.
    Your browser will automatically dither or replace colors, depending on its setup. The trick will be to prevent dithering or color replacement. This can easily be done by using a palette of colors that can always be displayed. To this aim you can use the web palette or netscape-palette consisting of 216 colors.
bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right