Timeshifting Interactive Blog

Optimising difficult index colour images

A common situation, at least for me, with web graphics is you’ll get an image that needs transparency but due to file size constaints or browser compatibility has to be an 8-bit png.

These images undoubtedly will contain far more than 256 colours, so some form of dithering would be required to make them more visually acceptable. The problem is images with mixed content.  Text looks best with ‘no dither’, photographic images almost always with ‘diffusion’ and in many cases gradients with a ‘pattern dither’.  Photoshop one allows you to choose one, so which area do you sacrifice?

I was thinking about this with a particularly problematic image during a client job.  The image in question was part of the voting widget on IKEA’s Easy to Assemble site.  There was a background gradient, a large amount of text that needed to be sharp and contestant photos that had to not look like a bad Warhol.

The solution was rather simple, once you selected the palette size, the palette colours don’t change with the dithering type.  Export the different dithering options, open them as layers in a new document, and add layer masks using the pencil tool—important as it does 1-bit transpancy unlike the brush tool.

Mask in the pattern dithered parts for the gradients, diffusion for the photographic elements and with the no dither version as your background layer. Export the resulting composite with the same number of colours and no dither, and you’re done.

Leave a Reply