Core_Computer Studies: Index colour

 

Index color is a product of the Internet revolution. The aim in designing graphics for the web is to reduce file size while not abandoning image quality. Why do you need small image files? Have you ever sat in front of a browser window waiting for an image to down load, become impatient and clicked out of the site? User statistics reveal that most people will not wait longer than approximately 20 seconds. 80% of users have left the site is your page is not loaded within that time. So what you need to be able to create smaller image files so they will download to a browser quickly.

Index color images are created from RGB images. As I have said RGB image files being 24 bit colour can contain up to 16-million colors (actually it is just over 16 and half million - but what is the odd half million between friends?). What happens when you convert an image to index color, is that the 16-million colors are converted to 256. This brutal reduction can create image distortions as well as some gradations of tone which are not smooth called banding.

Original gif image

Index color employs dithering. Dithering is the process of using a few colors to create the illusion of more colors. This works in a similar manner to the dot patterns used in CMYK printing. The attractive thing about index color for designers working on screen only is that the mode is that can contain 256 or less (between two and 256). With care, a designer can subtract colors from a graphic file so that it looks like a full-color image while containing far fewer colors with little quality loss.

Image at 86 colours and 20k smaller

When you are dealing with index color, it's important to remember that, once an image's colors are reduced, those colors are gone for good. So keep copies of your images at each stage as you strip colours out - for you can not put them back in. In other words if an index color image is converted back to the full-color, RGB mode, the image file size will increase but the quality will not improve.

Image at 64 colours and 23k smaller
Image at 32 colours and 35k smaller. In this case this image shifting colour as colours are being taken out. So I would use the 64 colour version.

 


 

These notes are written for students who undertake the Core Computer course at School of Art, Australian National University. Students of the course should feel free to contact any member of staff with comments questions and general suggestions..

< Home Index > < Staff Contact > < Class groups > < Assessment >

< Basics Module > < Photoshop 1 Module> < Photoshop 2 Module> < Illustrator Module > <3D Module > < Web Design Module >

< Terms and Jargon > < Online Resources >