Web Safe GIF Colors, Dithering,
Dithering is somewhate undesirable in web page GIF files. The way that GIF files are coded, dithering creates much larger GIF files than simiilar non-dithered ones. Dithered files are therefore slower to load. If text using a small font is displayed over a dithered background, it can be a lot harder to read, too. For clean, fast loading web pages, all GIF files should be made up only of the 216 basic colors. There are still enough people connecting with slow telephone dialups to make this a consideration, but it is much less important than it used to be.
Note that GIF and JPEG files use completely different coding schemes, and are used for different types of graphics. You don't need to be concerned about how many colors are used with JPEG files. See Creating Small, Fast-Loading Graphics for Web Pages for a further explanation.
Aliasing and Anti-Aliasing. Pictures on screen are made up of square pixels. When a diagonal or curved line is represented, what may look like a smooth line is actually made up of jagged lines, as shown in the magnified picture below:
This stair-step appearance is called aliasing. Aliasing is an attempt to represent a curved or diagonal line with edges that can only be horizontal or vertical.
In high resolution images, the aliasing is hard enough to see so that the eye is fooled by the jagged edges. With lower resolution, the jagged edges can be softened by a technique called anti-aliasing. Anti-aliasing inserts pixels of an intermediate color between the main image and its background. Anti-aliasing is illustrated in the magnified picture below:
The intermediate color pixels fool the eye even further and give the appearance of smoother edges. Back away from the screen a bit and compare the aliased and anti-aliased images. Which appears smoother?
Many graphics programs like PhotoShop automatically anti-alias GIF graphical images by default. There are some potential problems with this, however. First, by putting in intermediate colors, it does increase the size of a GIF file. This may or may not be acceptable. But a worse problem occurs when an anti-aliased transparent GIF picture is created against one background, but then displayed against another color background. See the results below:
The above image is exactly the same as the anti-aliased picture above it. Only the background color has been changed. You will sometimes see this halo effect around a picture on a web page. It happens when a transparent GIF is created against the wrong background color. Watch out for it on your own web pages.
Comments? Was this article useful to you? Do you have any questions, comments, corrections, or suggestions for improvement? Leave us a question or a comment in the Publishing on the Web Message Base or complete the Form below.
|Go to Top||Go to Learning Tree|