This documentation is for the old version. Go to the latest Graphics Mill docs

Color Reduction for Web

When we apply color reduction for Web, our main goal is to minimize the file size to make the image to load faster and reduce traffic. It is especially important when you develop websites for mobile devices. On the other hand, it may lead to a worse image quality. As we would like to make website to be not only fast, but also eye-catching, we have to find a way to minimize a file size and at the same time avoid making the image unsuitable for publishing in the Web.

When we reduce colors, we can play with two parameters to balance between file size and quality: number of the colors and the dithering type.

The algorithm which compresses files to GIF and PNG format has a higher compression ratio for images which has a lot of solid areas or regular patterns. When we specify a small number of colors, the resulting image becomes much more simple and the compression algorithm packs it better. Also, some values of maximum colors number allow to use less bits to store each pixel. For example, if only two colors are used, you can convert the image into a 1-bit pixel format, if not more than 16 colors are used - convert an image into 4-bit format.

The quality of dithering algorithm influences the image size in the same way. When we disable dithering or use dithering algorithms which cause regular patterns (such as ordered dithering), we get an image of a worse quality, but these images are compressed better. The dithering algorithms are discussed in more details in the Basic Concepts of Color Reduction topic.

Here is a code example which demonstrates it:

Visual Basic
Dim bitmap As New Aurigma.GraphicsMill.Bitmap("c:\parrot.jpg")
bitmap.ColorManagement.Dithering = Aurigma.GraphicsMill.Transforms.DitheringType.FloydSteinberg
bitmap.ColorManagement.DitheringIntensity = 1
bitmap.ColorManagement.PaletteEntryCount = 64
bitmap.ColorManagement.ConvertToIndexed(8, Aurigma.GraphicsMill.ColorPaletteType.Adaptive, _
Aurigma.GraphicsMill.Bitmap bitmap = new Aurigma.GraphicsMill.Bitmap(@"c:\parrot.jpg");
bitmap.ColorManagement.Dithering = Aurigma.GraphicsMill.Transforms.DitheringType.FloydSteinberg;
bitmap.ColorManagement.DitheringIntensity = 1;
bitmap.ColorManagement.PaletteEntryCount = 64;
bitmap.ColorManagement.ConvertToIndexed(8, Aurigma.GraphicsMill.ColorPaletteType.Adaptive, null);        

In conclusion let's see how the image size depends on the number of colors, dithering algorithms, and output file format.

32 colors image with Floyd-Steinberg dithering 64 colors image without dithering 64 colors image with Floyd-Steinberg dithering
15 204 bytes
GIF, 32 colors with Floyd-Steinberg dithering
14 101 bytes
GIF, 64 colors without dithering
17 319 bytes
GIF, 64 colors with Floyd-Steinberg dithering
13 182 bytes
PNG, 32 colors with Floyd-Steinberg dithering
11 451 bytes
PNG, 64 colors without dithering
15 329 bytes
PNG, 64 colors with Floyd-Steinberg dithering

See Also