Madeleine Wright Peter Wentworth

» On your screen, or with light beams, colours are additive. » Each pixel is a mixture of Red, Green and Blue, the additive primary colours. Additive Colour model Primary colours of the light part of the visible spectrum. These colours work best when generated from a light emitting device such as a computer monitor, Television, or a bulb.

» With pigments, or printing inks. » Colours are subtractive. » The most popular model is YMCK: Yellow, Cyan, Magenta, and an extra Black ink to make the blacks really dark. Subtractive Colour model Each ink absorbs more of the visible spectrum, so adding inks makes the tone of the colour darker, until it becomes black. See a good tutorial at

» Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. » Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black.

» Each colour has a value between 0 (none) and 255 (light or pixel is at maximum brightness). » When you choose a colour for an object in one of the Office tools, you can set individual RGB values and play as much as you like. » R=0, G=0, B=0 is black » R=255, G=255, B=255 is white » R=255, G=255, B=0 is yellow. » Storing needs one byte.

» Transparency has recently become more popular, so some older image formats do not cater for it.

» A modest 1024 x 1024 bitmap has just over a million pixels. » Each RGB pixel needs 3 bytes (24 bits). » Each ARGB pixel needs 4 bytes (32 bits). » So even a 1024x1024 image can be 3MB or 4MB. » Remember, doubling the resolution for more detail will multiply the size by 4 times! » i.e. size = resolution squared » This format is called the bitmap format of the image. » How can we make our image storage more efficient?

» Image resolution = dots per inch (linear e.g. width) » But the SIZE is the total number of pixels/dots over the whole area (e.g. width * height)

Bitmap size as BMP is 2064 KB

» You can use less space for an image, but soon you’ll need to sacrifice some quality. » Different image formats are designed for different purposes, or for different tradeoffs.

» Lossless compression means we’ll look for ways to use less storage for the image, but without discarding any detail. We’ll be able to get the original image back, exactly as it was. » Lossy compression discards some finer details of the image, and can never recover the original exactly. ˃But the techniques are carefully designed to discard aspects that the human eye is not very sensitive to, so the perceived quality of the image can still be good. ˃MP3 music works like this too – you discard some fine detail that the ear is not particularly sensitive to.

» If you have the same pixel colour occurring many times in a “run”, store the pixel just once, with a “replicator count”. » Lossless method: original image is fully recoverable. » Ideal for cartoons, text, Google-doodles: Robert Bunsen’s 200 th birthday. » Saved as a BMP file = 260KB » Saved with RLE = 66KB, no losses.

» Graphics Interchange Format » Creates a palette of 256 colours that are closest approximations to those in the image. » Turns every pixel into a 1-byte index, indicating which palette colour must be displayed. » Approximates colours in image to closest ones in palette, » Uses dithering – dots of different colours in a pattern, to approximate hues it does not have.

» Base of the rocket. » Dithering patterns try to approximate colours that are not in the palette. » Size on disk is 283K (about 14% of the BMP size). GIF compression is lossy, and the thing that is lost is the colour range - the ability to store many shades of colour.

» GIF is great if your image has less than 256 colours to start with, and you don’t need transparency. (Cartoon art, line drawings, diagrams, logos, etc.) » GIF can animate too! (How?) » Terrible for photos of Freddie. » Our Bunsen doodle is just 21KB! See

» Joint Photographic Expert Group standard. » Lossy compression method. Sacrifices fine detail that eye is not sensitive to. » Keeps full resolution grey image, but only half-resolution (1/4 size) colour information for red and blue components. (You can get back green by subtracting a mix of red and blue from the grey!) » Your eye can see finer detail in monochrome and green! ˃About 120 million rods triggered by few photons. ˃About 5 million cones need more photons to trigger, tuned to three colours – they don't work in the dark. ˃That’s why you can’t see colours in the dark!

Kept info

» After reducing the amount of colour information in two of the channels (as on the previous slide),... » JPEG starts ignoring “high visual frequencies” – fine detail in the picture, » It spends its available storage bits on capturing the “big changes” in each channel. » What we sacrifice here is detail.

660KB vs 65KB (JPEG)

» For photographs, not for line-art or text. » JPEG has no transparency information. » Your digital camera will use JPEG. » Poor quality only happens if you over-compress. It most cases JPEG is a great tradeoff.

» Portable Network Graphics » Newest format. » Invented because Unisys claim to own a patent covering a technique used in JPEG. Threat that they might claim royalties on devices or software using JPEG. » Lossless compression, with transparency. » Possible eventual replacement for JPG. » You should use PNG if you can.

» Must the compression be lossless? ˃Facebook pictures versus X-Ray plates, CAT scans, etc. » How many colours does it need? Would an X-Ray that was limited to 256 shades of grey be adequate? » Does it need individual pixel-by-pixel transparency? » 256 or fewer colours – GIF is lossless and efficient, no transparency, but has animation capabilities. » PNG is lossless, can handle transparency, full colour. » JPG is lossy, efficient, you can choose the quality/space tradeoff, especially good for photos.