How to reduce filesize of gradient PNG?

Question

I am trying to create a background image on a webpage, which is similar to the 404 page used on tumbler...

http://testing404image.tumblr.com/

Here we can see a PNG which is 1623*1064 pixels, yet appears reasonably smooth gradient wise. The direct link for the image is http://testing404image.tumblr.com/images/status_bg.png?2

When I try to create a similar PNG (different colors, but same size) in Photoshop CS4 for Mac, the resulting file ends up at > 400k, whereas tumblers is 90k

Ive tried playing with all Photoshop options, including reducing number of colors to 55, but I cannot get the image below ~240k.

Ive also tried various optimising tools such as ImageOptim (http://imageoptim.com/) but to no avail.

Are there any properties of this PNG which result in a such a low file size? I tried using JPG, thinking its better suited to gradient images, but even a 100% quality JPG resulted in noticeable aliasing, which an identical content/size PNG didnt have.

Thanks for any advice

Answer 1

Photoshop is not very good with PNG: I simply opened and saved it with the humble xnView (maximum compression), and got 74K. You can also convert it to paletted-image, and do some extra little tuning - PNGoptim gives me a final size of 64.548. I would't expect anything much better than that, the image is just too big.

BTW, be aware that using a gradient that is so big and so smooth that it a digital image (with 8 bits per pixel) cannot represent it without some banding. That image is really oversampled (you could resample it at 25% or less and display it scaled, and the result would be basically the same)

Answer 2

The actual reason is the source image your looking to have a lower gradient quality than the one you are making.

Just uncheck the Dither option (from the top toolbar in Photoshop) when filling the gradient color. the quality and smoothness of the gradient is decreased and therefore you get a very smaller file sized PNG output.

Answer 3

Hi there changed the colours with

Image > Adjustments > Hue/Saturation - In Photoshop CS4

and this is the result:

as you can see it's almost the same size (75k).

Try playing around under the

Image > Adjustments

to get the color you are looking for and save as png with NONE for interlace.