GIF Colors and Dithering
GIF
Graphics Interchange Format is probably the most widely used image format used on the web. It supports on/off binary transparency (e.g. for a logo that can be placed over different backgrounds) and animation, but is limited to 216 specified colors. Files can be progressive scanned so that a course image appears sooner with the detail filling in later.
216 GIF Colors
The Graphics Interchange Format (GIF) was developed when display technology was limited by the amount of memory that was affordable on the graphics cards installed in personal computers. Red, green and blue are each limited to 6 colors using the following intensity values:
| 00 | 33 | 66 | 99 | CC | FF | Hexadecimal Format |
| 00 | 51 | 102 | 152 | 204 | 255 | Decimal Format |
These are referred to as the Browser-Safe Palette. These are the colors that will work on the largest percentage of displays on the Internet and they are the only ones used by GIF.
- Useful Color Chart of the 216 browser-safe GIF colors.
GIF Dithering
The following two examples start with a browser safe shade of blue on the left and the next lighter shade of browser safe blue on the right.
JPG 814 bytes, smooth color transition
GIF 1,573 bytes, dithered color transition
The following two color bars use exactly the same two GIF and JPG files, except that the HTML code has enlarged them to make the JPEG vs the dithered GIF more obvious. Each of the dots in the GIF dithering are selected from the browser safe color set.
Browser Safe
The following two examples use a browser safe shade of blue:
JPG 827 bytes
GIF 892 bytes
Dithered GIF
The following two examples are not browser safe so that the GIF must resort to dithering. JPEG uses compression technology instead of dithering, which can, in some cases look worse than dithering. Notice the significantly larger GIF file size when dithering is involved.
JPG 709 bytes
GIF 1,276 bytes, using the same file stretched
Text Examples
In the following examples, the illustration on the left is true size and the one on the right uses exactly the same file, but the HTML code has stretched the size to better illustrate the JPEG smudging.
GIF 956 bytes.
Notice the crisp edges around the text.
JPG 1,412 bytes with compression set at 10.
There is some smudging around the text.
JPG 905 bytes with compression set at 60.
A bad case of smudging around the text.
