Teach Computer Science

A-Level

Images

teachcomputerscience.com
 2

Lesson Objectives

Students will learn:

▪ How images are stored and displayed
▪ What the different types of images are
▪ What properties determine the quality of an image
▪ Resolution and pixel density
▪ How to estimate the size of an image file
▪ Metadata of an image file

teachcomputerscience.com
 1.
Content

teachcomputerscience.com
 4

What is an image made of?

▪ Images are made of tiny elements called pixels (picture
elements).
▪ The higher the number of pixels, the higher the resolution of
the image will be; therefore, more memory is occupied by the
image.

teachcomputerscience.com
 5

Types of image format

▪ There are two types of image files: Bitmaps and Vectors.

teachcomputerscience.com
 6

Bitmaps
▪ Bitmap images, also known as pixel maps or raster graphics, are made
of an organised grid of coloured squares called pixels.
▪ When bitmaps are enlarged or zoomed in, the pixels are over-
stretched, and the image loses quality.
▪ JPEG, GIF and PNG are a few examples of bitmaps. These file formats
are widely used in digital cameras and smartphones.
▪ The colour of each pixel in an image is stored as a binary value. For a
black-and-white image, the colour white is represented using the
binary value 1 and black is represented using 0.

teachcomputerscience.com
 7

Vectors
▪ A vector uses coordinates and geometrical shapes such as lines and
curves to define an image.
▪ Hence, a vector image is more efficient than a bitmap image, as it
needn’t store a binary value for each pixel.
▪ Vector images do not lose resolution when scaled.
▪ A vector image contains a drawing list in its file header. It consists of:
• A command that describes the shape of the object
• Attributes of each object such as position, line colour, the
thickness of a line, fill colour

teachcomputerscience.com
 8

Vectors
▪ A vector uses coordinates and geometrical shapes such as lines and
curves to define an image.
▪ Therefore, a vector image is more efficient than a bitmap image as it
needn’t store a binary value for each pixel.
▪ Vector images do not lose resolution when scaled.
▪ Scalable Vector Graphics (SVG) is an example of a vector image. It is an
open standard.
▪ Vector graphics are widely used in animated movies, Adobe Portable
Document Format (PDF), AutoShapes in MS-Office, etc.
teachcomputerscience.com
 9

Vectors
▪ For example,
• Circle (centre = 0,0; radius = 5; fill = green; bordercolour = black;
weight = 2 px)
• Rectangle (position = 3,10; width = 10; height = 5; fill = blue;
bordercolour = None)
▪ When vector images are printed, they are converted to bitmap image
so that image matches the format supported by printers.
▪ Scalable Vector Graphics (SVG) is an example of a vector image. It is an
open standard. Vector graphics are widely used in animated movies,
Adobe Portable Document Format (PDF), AutoShapes in MS-Office, etc.
teachcomputerscience.com
 10

Bitmap Vector
Uses coordinates and geometrical
Made of tiny pixels shapes such as lines and curves to
define an image
When bitmaps are enlarged or zoomed Vector images do not lose
in, the pixels are over-stretched, and resolution when scaled.
the image loses quality.
To edit vector images, the
Pixels can be edited without changing geometric shape needs to be
the design of the image. changed. Individual pixels cannot
be modified.
Does not require a large file size.
Larger file size
Easier to transmit or load.
The image is more realistic. Image is not very realistic. teachcomputerscience.com
 11

Bitmaps vs. vectors

▪ Based on the requirement, it can be chosen whether to use a vector
image or bitmap image.
▪ For example, if the image is expected to be resized, then the vector
image is suitable as bitmaps may lose quality due to resizing.
▪ If images need to look more realistic, then bitmap images are used.
▪ If there are restrictions to the size of the file, then vector images are
preferred.
▪ To modify photographs, bitmap images are preferred.
teachcomputerscience.com
 12

Storing and displaying

images

▪ Irrespective of the type of image, all images are displayed as a

grid of pixels when the output is through a monitor or printer.
▪ A vector image is rasterised or converted to a grid of pixels for
display.

teachcomputerscience.com
 13

Storing a black-and-white
image
▪ The computer stores
binary value 1 for white
and binary value 0 for
black for each row of the
image.
▪ This process becomes
complex when the number
of rows and columns of the
image increases, and
different colours are
included. teachcomputerscience.com
 14

Colour Depth
Binary code Colour
▪ Colour depth is the number of bits
used to indicate the different colours 00 Black
of a pixel.
01 Dark grey
▪ In case of a black-and-white image,
10 Light grey
the colour depth is 1.
▪ A 2-bit colour depth can represent 11 White
four different colours.
teachcomputerscience.com
 15

Colour depth

▪ As the number of bits increases, more colours can be used.

▪ An image with colour depth n can represent 2n different
colours.
▪ Most computer systems and digital systems use a 24-bit
system that can represent over 16 million colours per pixel.
▪ With an increase in colour depth, the size of the file also
increases.
teachcomputerscience.com
 16

Colour depth: Example

teachcomputerscience.com
 17

Resolution
▪ The image resolution is the number of pixels that make up an
image.
▪ Screen resolution is the number of horizontal pixels and the
number of vertical pixels that make up a screen display.
▪ For example, if the screen resolution is lower than the image
resolution, the image will be displayed at a lower quality by
removing some pixels or cropping the image or sometimes,
rotating the image. However, the image with lower resolution
gets pixelated when we try to zoom in or enlarge it.
teachcomputerscience.com
 18

Resolution
▪ The pixel density of an image is measured in dots per inch or
pixel per inch. It is the number of pixels or dots in a unit.
▪ Magazines and books have higher resolution compared to the
images on a computer screen.
▪ An image on a website usually has a resolution of 72 dpi. An
image in a book has a resolution of 300 or even 600 dpi.
▪ An image with a resolution of 300 dpi contains a grid of 300
pixels wide and 300 pixels high in a grid.
teachcomputerscience.com
 19

Resolution

teachcomputerscience.com
 20

Pixel density
▪ Pixel density for a screen is calculated using the following
steps.
▪ Calculating the pixel density of Samsung Galaxy S10 phone
which has a resolution of 1440 × 3040 pixels and a 6.1 inches
display
i. Add the squares of resolution sizes, 14402 + 30402 = 11315200
ii. Taking the square root of the result in (i), √11315200 = 3363.81
iii. Divide by the screen size, 3363.81 ÷ 6.1 = 551 ppi (pixels per
square inch) teachcomputerscience.com
 21

Estimating the size of image file

▪ The size of an image file is estimated by multiplying the width

and height of the image in pixels and colour depth in bits per
pixel.

teachcomputerscience.com
 22

Estimating an image file size:

Example

4540960 ÷ 8 =
height = 1010 pixels, File size =
567620 bytes =
width = 562 pixels & 1010 × 562 × 8 =
0.568
colour depth = 8 bits. 4540960 bits
megabytes

teachcomputerscience.com
 23

Compression

▪ Even though the calculated file is 0.567 MB (in the previous

slide), the actual file size is considerably less when the image is
stored in the form of a jpg.
▪ This is because of file compression. Large areas of similar data
are compressed.

teachcomputerscience.com
 24

Metadata
Metadata is ‘data about data’. An image file has metadata that
stores information such as:
▪ Filename and format
▪ Dimensions, resolution & colour depth of the image
▪ Date and place when the photo was taken
▪ Time and date when the photo was changed
▪ Camera settings when the photo was taken
teachcomputerscience.com
 25

Metadata
▪ Photos captured using a mobile
phone when GPS is ON,
automatically stores the location
exactly where this photo is taken.
▪ With an image’s metadata, we can
find the date, time and location
where a photo was captured.
▪ A part of the metadata is shown.
teachcomputerscience.com
 26

Let’s review some concepts

Image Image types Displaying images

Images are made of tiny In bitmaps, the colour of each Irrespective of the type of image,
elements called pixels (picture pixel in an image is stored as a all images are displayed as a grid
elements). binary value. A vector uses of pixels when the output is
coordinates and geometrical through a monitor or printer.
Two types: Bitmaps and vectors
shapes such as lines and
curves to define an image.

Pixel density
Colour Depth Resolution It is the number of pixels or dots
Colour depth is the number of The image resolution is the in a unit.
bits used to indicate the different number of pixels that make up
colours of a pixel. an image. Screen resolution is
the number of horizontal pixels Metadata
An image with colour depth n
and the number of vertical pixels Metadata is ‘data about data’.
can represent 2n different
that make up a screen display.
colours.
teachcomputerscience.com
 2.
Activity

teachcomputerscience.com
 28

Activity-1
Duration: 10 minutes

1. Estimate the file size of an image file with the height of 1210
pixels, width of 729 pixels and a colour depth of 16 bits.
2. The actual size of an image file in question 1 that is stored in a
computer is less than the calculated value. Why?
3. How many different colours can be represented by a colour
depth of 16 bits?

teachcomputerscience.com
 3.
End of topic questions

teachcomputerscience.com
 30

End of topic questions

1. What are the two different file formats available for an image
file? How are they different?
2. What is the resolution of the image file?
3. What information is stored in metadata of an image file?
4. What effects are observed when the colour depth of an image
file is increased?

teachcomputerscience.com
 31

End of topic questions

5. A bitmapped image for a logo in the shape of a home is given. This image
consists of white, black, blue and green colours only.
a) Why must we need at least two bits to represent each bit?
b) A black pixel is coded as 00. The third line from the top is coded as
11001111 11001111.
i. What is the coding for the 4th line from the top?
ii. Calculate the minimum file size of this image in bytes.
iii. What items do you require to store this image as a vector
graphic?
iv. What are the advantages of storing an image as a vector graphic?
teachcomputerscience.com
 32

End of topic questions

6. Calculate the pixel density of Apple iPad Pro, which has a resolution of
2732 × 2048 pixels and a 12.9 inches display.

teachcomputerscience.com