web design: in your face, png transparency!

Heres a section of a traditionally nightmarish image to convert to a png. Its that complex transparency that increases the file size.

In photoshop…

Step 1: remove as much colour information from the image as possible. Seeing as its basically just black with this image you can select the transparency

and create a solid colour fill…

Already its a little better:

2. Posterise the transparency: alt/option click on the layer mask. Goto image>adjustments>posterise. I chose 6 levels for this image.

And bingo:

Lets see if it works for a messy graphic with a gradient.

Photoshop save for web is saying 59.6K

And after: 45.95K So – not great but it’s the gradient here that the png doesn’t like. Take it away and you get before and after values of…

51.3K and 35.8. You can also try posterising the image.

This one has 11 levels and no gradient, bringing it to 24K

Advertisement