Shortcomings: Images

At its current stature, the site makes use of quite a few images - from backdrops to main elements. Ensuring that they're 100% optimised is paramount.

Here's how I went about turning the large alpha-transparent PNG24 of the gems into an 8-bit version without losing quality and whilst keeping the required alpha-transparency!

24-bit PNG24 Characteristics

• Holds 24-bits of colour (16-million)
• Similar to JPEG
• Alpha-type transparency

8-bit PNG8 Characteristics

• Holds 8-bits of colour (256)
• Similar to GIF
• Indexed-type transparency (In Photoshop)

The illustration of the gems itself doesn't require more than 256 colours, so I knew that dropping from 16-million-capable wouldn't be an issue. The problem lied in the need of alpha-transparency over indexed.

Indexed transparency allows a single colour to be transparent (like GIF), whereas alpha-transparency allows multiple levels of transparency (like PNG24). This becomes especially important if you're using glow-like effects or drop-shadows - a feathered edge requires more than just one colour to be transparent to work!

I found an article which helped me right away.

"...Fireworks really shines when optimizing to PNG8 files where it allows both alpha and index transparency..." (http://www.websiteoptimization.com/speed/tweak/png-optimization/)

The image below shows the custom settings I used to optimise this image. Setting the format to PNG8 allowed me to drop my colours right down; I found 128 was optimal, any less and the illustration suffered. With alpha-transparency selected, the edges were smooth and with over a 60% reduction in filesize, mission was accomplished.