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

(opens new window)

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?

(opens new window)Adobe 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 (opens new window)

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

(opens new window)

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!