Graphics

Course Content Specification

The most basic method of representing graphics in a computer is by use of a bitmap image. If you zoom into a photo close enough you will see that it is made up of many little squares, or pixels (stands for picture elements).

Structure of a black and white bitmap

A bitmap graphic stores every single pixel in an image. Looking at a black and white image below. 0 is stored for a white pixel, 1 is stored for a black pixel. Each black and white pixel takes up 1 bit of storage.

Structure of a black and white bitmap

A colour bitmap is very similar to that of a black white image except that instead of a single bit being used to represent the colour of the pixel a larger binary number is used.

Structure of a colour bitmap

A standard Gif image (more info here) used on the web can have a maximum of 256 colours. This means that we can represent this using a binary number of 8 bits. So the bit depth is described as 8 bits.

Bit depth is the size of the binary number needed to represent the colour in an image.

Bit Depth Examples

Most modern widescreen monitors will be displaying at 1920 x 1080 pixels (referred to as HD) with a bit depth of 24 bits. 

A standard HD resolution would be 1920 x 1080 pixels

4K Monitors would usually have a resolution of 3840 x 2160 pixels

In 24 bit true colour the colour code is made up of 3 portions, with one byte indicating the number of Red, one byte indicating Green and the other Blue. These are the same three colours of 2 LED’s used in modern televisions to represent colours. Although some manufacturers are now introducing yellow pixels. These are often displayed using the Hexadecimal (Base 16 numbers) and are used extensively by HTML editors and graphic editing programs. We will cover Hex at Advanced Higher.

Resolution

A picture with more pixels is usually a more clear and detailed picture. This picture would be said to have a higher resolution. Resolution is a measure of the amount of pixels that an image consists of.  A common use of resolution is displaying the native resolution of monitors/TV or the megapixel rating of digital camera.

Image with lower resolution

Original Image

Dots Per Inch (DPI)

Another way to measure resolution is dpi (dots per inch) scanners will use this to measure the amount of pixels in an inch that they scan. Or printers will use this on how many pixels make up the printouts.

Vector vs Bitmap Graphics

There is one other method of representation and that is vector representation. Whereas bitmap representation stores every single pixel, vector representation stores the attributes of each object that the image is created from.

Advantages of Vector

The key advantages of vector images are that:

✓ They are resolution independent. Meaning that the same quality of image will be rendered regardless of the resolution of the display or print device.

✓ They are not blurred by scaling unlike bitmap images.

✓ Individual objects can be easily selected and edited. In bitmap images editing is on a pixel by pixel basis

✓ File sizes are generally smaller as only shape attributes are stored.

Disadvantages of Vector

Vector graphics have the following disadvantages:

✘ They usually require a specific vector graphics package to create/edit.

✘ They cannot represent photo realistic images.

Common Vector Attributes

SVG Code - Rectangle

SVG Code - Line

SVG Code - Ellipse

SVG Code - Polygon

Lesson Video

1.4 Storing Graphics.mp4