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

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.