Gradient dither in Photoshop and file size comparisons

Recently we were optimizing a header graphic in Photoshop and stumbled upon a larger than expected file size.

Wayne State University HTML email header

After further investigation of why the file was larger than usual, it came down to Photoshop setting called “dither” on the gradient background

What is dither?

With or without ditherAdobe explains dithering as:
“Computers use a technique called dithering to simulate colors they can’t display. Dithering uses adjacent pixels of different colors to give the appearance of a third color. ”
More about dither

Turning off dither basically saved 60k on this particular header image.  If you closely inspect the image on the right, (click to enlarge) you can see some slight banding, but you have to look very close and zoom it up.  For all intents and purposes on the web, the difference is so slight that we could most likely turn off dither for our gradient graphics.

 

 

How to turn off dither on gradients in Photoshop

  1. Click on the gradient layer thumbnail in Photoshop, a gradient fill dialog/settings box will pop up.
  2. Unselect the “Dither” checkbox

Dither selection in Photoshop

Overall this saved us about 60kb in file size, which is amazing considering we have over 100 different HTML email template headers!

Try it out for yourself and let me know your results in the comments below!