Computer Science Higher Graphics Computer Science Higher

Lesson 4: Storing graphics Learning intentions To know how a computer stores graphics To know how a computer can reduce the size of graphic files Success criteria I can describe how computers store bitmap and vector graphics I can calculate the storage requirements of a black and white/colour graphic I can describe the advantages/disadvantages of using bitmap graphics over vector. I can describe how computers can reduce the size of graphic files using RLE, LZW lossy and lossless techniques.

Bitmap graphics A bitmap image is stored as a sequence of binary numbers, each number representing the colour of a pixel. A pixel is the most basic component of a computer graphic. The resolution is the number of pixels that make up the graphic. This determines the quality of the picture. high resolution = sharp picture

Black & white bitmap graphics Shown below is a representation of a very simple graphic

Black & white bitmap graphics To calculate the storage requirements of a black and white bitmap graphic we can follow the steps below. 300 dpi Calculate the number of pixels in the image ( 300 x 3 ) x ( 300 x 4 ) = 1080000 pixels 1 pixel = 1 bit so the image requires 1080000 bits. Convert to bytes 1080000 / 8 = 135000 Bytes Convert to kilobytes 135000 / 1024 = 131.84 kilobytes 3 inches 4 inches

Black & white bitmap graphics Try the following example 500 dpi ( 500 x 3 ) x ( 500 x 6 ) = 4500000 pixels 4500000 bits. 4500000 / 8 = 562500 Bytes 562500 / 1024 = 549.32.84 kilobytes 3 inches 6 inches

Colour bitmap graphics 00 10 01 11 Four colours are used in the graphic and so each pixel is represented using 2 bits. 00 bit for a white pixel, 01 for a blue pixel, 10 for a red pixel and 11 bit for a purple pixel.

Colour bitmaps How many colours could be represented using 3 bits? 000 001 010 011 100 101 110 111

Colour bitmap graphics The number of bits used to store the colour of each pixel is known as the bit depth or colour depth. In order to calculate the storage requirements of a colour graphic you must multiply by the colour depth. RGB colour codes are created by using 8 bits for each of the three primary colours (red, green and blue) then combining them to produce a 24 bit colour code. True colour bitmapping uses 24 bits per pixel (16 777 216 colours).

Bit depth These numbers feature in most exam questions where the number of colours in a system is used to calculate the amount of memory needed. Learn them Colours Bits 2 1 4 8 3 16 32 5 64 6 128 7 256 65536 16777216 24 (true colour)

Colour bitmap graphics The image below is 6 x 4 inches with a dpi of 300 and a bit depth of 16. Let’s calculate the file size. ( 300 x 4 ) x ( 300 x 6 ) = 2160000 pixels 2160000 pixels x 16 = 34560000 bits 34560000 / 8 = 4320000 bytes 4320000 / 1024 = 4218.75 kilobytes 4218.75 / 1024 = 4.11 megabytes

Colour bitmap graphics The image below is 8 x 5 inches with a dpi of 500 and a bit depth of 24. Let’s calculate the file size. ( 500 x 8 ) x ( 500 x 5 ) = 10000000 pixels 10000000 pixels x 24 = 240000000 bits 240000000 / 8 = 30000000 bytes 30000000 / 1024 = 29296.96 kilobytes 29296.96 / 1024 = 28.61 megabytes

Bitmap graphics Advantages Can be edited at pixel level File size remains the same no matter how complex the image is Disadvantages File sizes can be large Individual objects cannot be edited as bitmap graphics packages do not support layers. Pixelation can occur when a bitmap graphic is re-sized.

Vector graphics Vector graphics store the attributes of every object in the image (e.g. circle: centre x, centre y, radius, fill colour, line thickness, etc). This means that a description of how the graphic is to be drawn is stored rather than storing information on every pixel. This results in an image which can be re-sized without pixelation occurring). When the drawing is saved, only the list of objects and their attributes is stored which greatly reduces the file size. When the drawing is loaded the drawing package simply redraws all the objects.

Comparison of vector/bitmap graphics Manipulate at pixel level. Manipulate at object level. Typically a larger file size. File size is affected by resolution of image. Higher resolution = higher file size Typically smaller file size, file size increases as more objects are added to the graphic Becomes pixelated (blocky) when enlarged. Can be enlarged without affecting quality (resolution independent). Ideal for photos and realistic images. Ideal for simple logos on websites, etc.

Vector graphics Advantages Individual objects can be edited File size is generally small Graphics can be re-sized without pixilation occurring Disadvantages Can not be edited at pixel level Increasing complexity of an image results in increasing file size

Compression To reduce the file size of an image so that it is less demanding in terms of storage and memory use and to reduce the file size of an image to allow for faster transmission over a network. Lossless Compression None of the original data is lost. Methods are found to store the information in a more efficient way. e.g. Instead of 250 white pixels, you store 250 times white pixel Lossy Compression This method involves sacrificing some of the data that our eyes will probably not notice. e.g. Instead of using millions of colours we can just use hundreds. Therefore we only use 16 bits rather than 24 bits to represent the colour depth.

RLE Run length encoding is useful if there is a block of pixels in sequence that are the same colour. Take the following image for example: In this picture you may have 24 consecutive pixels which are green. If the bit depth was set at 8 bits per pixel then it would take 144 bits (8 * 24) to store the sequence. RLE would store the colour value once using 8 bits. It would then store the number 24 in binary – (11000). In total 16 bits would be needed to represent all 18 pixels if run length encoding were used. This form of compression is excellent when an image contains large sequences of the same colour.

LZW LZW compression will store patterns that are repeated in an index/look-up table. When a pattern is repeated the look-up table is referenced to create the sequence of pixels. For example, if the pattern shown below were present eight times in an image it would be stored once in the lookup table and an algorithm would be used to call the pattern from the lookup table eight times. Index 5 To use the pattern again the computer would just need to store the binary value for the number 5 (00000101) as this is the index value used to store the pattern.

Compression and file types BMP files use RLE GIF files use lossless LZW compression JPEG files use lossy compression by changing the colour of pixels to create larger areas of the same colour, leading to better compression. The level of compression can be adjusted to suit the necessary quality of an image. PNG files are lossless graphics files with support for better technologies for use online, such as streaming and interlacing. PNGs can also have transparent sections, and even semi-transparent sections. TIFF files are lossless graphics files that are often used by scanners and other high-resolution imaging devices.