Colour reduction algorithms in Photoshop

When you export graphics to be used in web pages, file size is important and for as obsolete as Gifs may seem to the eyes of some, don’t be mistaken,
the indexed color system isn’t going anywhere. Even if Gifs are a bit in decline, Png files can use the indexed color system and this is actually very useful.

Despite the predominance of Jpegs and support to millions of colours, many images are simple enough that they could benefit of using more modest color systems
like indexed color which allows for up to 256 colours but allows you to control with precision which colours these would be and exactly how many, allowing for
extremely compact image sizes.

The RGB system allows you to represent up to 16,777,216 colours. Each colour is represented by 24bits; 8 bits for each of the red, green and blue channels.

This is the cost of having a wide colour spectrum for an image, which is much welcome for that picture you took at the paradisiac island you went on your last holidays.
You need blues and greens for skies and sea, yellows, oranges and reds for the flowers and exotic birds and so on. You can’t settle for less.

Now, how about the icons on your navigation bar? Say they are 16px tall and 16pixels wide. They have only 256 pixels overall, so you can’t possibly have more
than 256 colours, even if no two pixels share the same.

Of course is very rare that an image has every single pixel of a different colour, so in practice you have significantly bigger images with no more than 256 colours.
Further, there are types of images that, for as big as they can be, they have a limited number of colours, for instance, illustrations and drawings with no gradients
or with small ones.

This is where the indexed color system comes in handy.

In this mode, you can have only up 8 bits per pixel. Compared with 24 in RGB, that is a third of the uncompressed size. Very tempting and even more so when
you discover that you can specify the image depth (the amount of bits per pixel) to any amount up to 8. So, if you can afford to have only 16 colours, you only
need 4 bits per pixel.

Photoshop, just as any other half-decent image editor, will allow you to work in RGB for flexibility and to export files in indexed colour on Gif or PNG format for
the web (and on several other formats, that I won’t cover here).

Now, it is a fact that if we remove some of the colours of a colourful image we won’t notice. In fact, this is how the Jpeg compression algorithm works; it will discard
colour information to reduce the file size.

The GIF and PNG compression algorithms are quite different and, in fact you can use that to your advantage, because while the Jpeg will always discard colour information,
the GIF and PNG compression algorithms are conservative and they will preserve your image intact. This is particularly important for drawings and illustrations that have
much less details than photographs and even little losses can be quite damaging.

But having said that, you can use photoshop to discard some of the colours in the image before you export them as GIF or PNG.

To save images for the web in Photoshop, you have to go to File → “Save for web & Devices”. A dialog will open showing you the original image and how the final image will look like.

Now, in the right pane, you’ll see several options and if you select either PNG-8 or GIF, you will have a box for the colour reduction algorithm that allows you to chose
from

• Perceptual
• Selective
• Adaptive
• Restrictive (Web)
• Custom
• Black & White
• Grayscale
• MacOS
• Windows

Let’s start for the easy ones. Black & white will make pixels either black or white. No shades of gray, no colours, only one bit for each pixel. Grayscale will use
8 bits per pixel and will approximate each pixel to a shade of gray, the resulting image will have no colour, but will have shades of gray. MacOS and Windows will
approximate the colours on the image to the closest colour of the basic palette of these systems and custom will allow you to pick the colours you want on your palette.

Custom is very powerful, but can also be very annoying. Also, very often you already selected some colours that you’ve put on your image and you want to preserve.

This is where Perceptual, Selective and Adaptive come in.

If the original image contains more colours than the output file (you can select the number of colours on the right pane, up to 256) some will have to be adapted.

The Perceptual algorithm will create a palette that prioritizes the colours that the human eye has greater sensitivity. This means that colours that appear more
frequently may not be present in the resulting image at all.

The Selective algorithm will prioritize broad regions of colours. If you want to keep your colours as faithful as possible
to the original, this one is more likely to do that.

The Adaptive algorithm on the other hand will prioritize the colours present in more pixels across the image. Predominant hues will have more tones
in the palette.

Finally, Restritive (web) is a bit out of fashion these days but in the old days when was uncommon for computer monitors to show more than 256 colours
a special palette was created for the web with colours that any monitor would be able to show. This palette is made of 6 equidistant shades of each of the three
RGB channels. The tones are 0×00, 0×33, 0×66, 0×99, 0xcc and 0xff. Meaning that you can combine these to form the 216 colours of the web palette, for instance
the colour 0×33ffcc is a web safe colour. You may never need this last one, but it won’t hurt to know either, right?