Title
Title
Description
Description
/

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.