Dithering GIF Images

01
of 05
Largest File - No Optimization

Largest File - No Optimization
Largest File - No Optimization. Courtesy J Kyrnin

Optimizing GIF Files

Dithering in GIF images helps reduce banding in gradients of color, but it also vastly increases the file size. This gallery demonstrates how large the images can get with dithering and no dithering.

For this gallery I started with the same base image, and then saved it in different formats to demonstrate the changes in file size with and without dithering.

Click through the gallery to see the difference in file size between the smallest image and the others.

This is the file without any optimization. I saved it with 256 colors and no dither, and it's huge.

File size: 12.46KB
Base file size: 1.13KB

  • 256 colors
  • no dither

02
of 05
Base File - Best Optimization

Base File - Best Optimization
Base File - Best Optimization. Courtesy J Kyrnin

This is the file with the best optimization. It's also got really bad banding. You wouldn't want to use this as a gradient on your Web site, despite its size.

File size: 1.13KB

  • 8 colors
  • no dither

03
of 05
Diffusion Dither

Diffusion Dither
Diffusion Dither. Courtesy J Kyrnin

The diffusion dither gives some banding, but what's worse, the file size is nearly 4 times the optimized image.

File size: 4.13KB
Base file size: 1.13KB

  • 8 colors
  • 100% diffusion dither

04
of 05
Pattern Dither

Pattern Dither
Pattern Dither. Courtesy J Kyrnin

Pattern dither results in a smoother gradient, but the file size is more than double the optimized file.

File size: 2.75KB
Base file size: 1.13KB

  • 8 colors
  • pattern dither

05
of 05
Noise Dither

Noise Dither
Noise Dither. Courtesy J Kyrnin

This file is saved with a noise dither. As you can see, the banding is reduced, but the gradient isn't as smooth.

File size: 5.60KB
Base file size: 1.13KB

  • 8 colors
  • noise dither