Encoding Images

Digital images
 Digital images

Graphics on a screen are made up of tiny blocks

called pixels. The more pixels on the screen, the
higher the resolution and the better the quality
of the picture will be. The higher the image
resolution, the more memory is needed to store
the graphic.
 Digital Images
Image files can be either bitmaps or vectors.
 Bitmaps

Bitmap images are widely used on digital

cameras, smartphones and online.
Common bitmap image file types include JPEG,
GIF and PNG. Bitmaps are also known as
pixelmaps or raster graphics.
 Bitmaps
Bitmap images are organised as a grid of
coloured squares called pixels (short for 'picture
elements'). When zooming in or enlarging a
bitmap image, the pixels are stretched and
made into larger blocks. This is why bitmap
images appear as poor quality when enlarged
too much.
Bitmaps
 Bitmaps
Each colour of an image is stored as a binary
number. In the black-and-white image below,
each pixel is either black or white. You need a
binary value for each different colour. As each
pixel is either black or white, this image can be
encoded with a value of 0 for white and 1 for
black.
Bitmaps
 Vectors

A vector image uses scalable shapes such as

straight lines and curves, using coordinates and
geometry to precisely define the parts of the
image. It is more efficient than bitmaps at
storing large areas of the same colour because it
does not need to store every pixel as a bitmap
does.
 Vectors
Vector graphics can be scaled without losing
resolution. They can be enlarged or reduced in
size - but the file size will stay almost exactly the
same.
Vectors
 Vectors
One of the most common vector file formats is
scalable vector graphics (SVG). SVG is an open
standard for vector graphics.
 Vector graphics are used in:
• CAD packages
• AutoShapes in Microsoft Office
• animated movies
• encapsulated postscript (EPS)
• animation programmes such as Blender and
Adobe After Effects
• image manipulation programmes such as Adobe
Photoshop and GIMP
• Adobe portable document format (PDF)
• Windows meta-file (WMF)
 Image display

When a monitor or a printer displays a vector

image it is rasterised - converted into a grid of
pixels. Regardless of the file type, an image will
always be outputted onto a screen or printed in
pixels.
 Colour depth

The colour depth of an image is measured in

bits. The number of bits indicates how many
colours are available for each pixel. In the black
and white image, only two colours are needed.
This means it has a colour depth of 1 bit.
 Colour depth

A 2-bit colour depth would allow four different

values: 00, 01, 10, 11. This would allow for a
range of colours such as:
Colour depth
Colour depth
 Colour depth

Most computer systems and digital cameras use

24-bit images. 24 in binary is 1111 1111 1111
1111 1111 1111. This means there are over 16
million possible colours per pixel.
 Colour depth

Resolution is a measure of pixel density, usually

measured in dots per inch (dpi). Images on
websites usually have a resolution of 72 dpi. This
means that a 1-inch square contains a grid of
pixels that is 72 pixels wide by 72 pixels high. 72
x 72 = 5184 pixels per square inch.
 Colour depth

High quality printed images in books and

magazines have a higher resolution than
computer screens. Magazines often use either
300 dpi or even 600 dpi.
 Metadata

Image files usually also contain metadata. Metadata

means 'data about data' and provides information about
the image. The information includes:
• filename
• file format - eg JPEG, GIF or PNG
• dimensions
• resolution
• colour depth
• time and date the image was last changed
• camera settings when the photo was taken
• GPS
 Compression

Compression is used to reduce file sizes and

change various attributes of an image file. These
attributes include:
• file type
• resolution
• dimensions
• bit depth
 Compression

Compression can be lossy or lossless. Lossless

compression means that as the file size is
compressed, the picture quality remains the
same - it does not get worse. Also, the file can
be decompressed to its original quality. Lossy
compression permanently removes part of data.
Compression
 Types of compressed image files

• PNG is a lossless compression type. It is often

used where the graphic might be changed by
another person or where the image contains
layers of graphics that need to be kept
separate from each other. It is high quality.
 Types of compressed image files

JPEG is often used for digital camera images

because it has a fairly small file size for the
quality that it displays. JPEG is a lossy format
that offers a higher compression rate than PNG
in the trade-off for quality.
 Types of compressed image files

GIF compresses images to a maximum 8-bit

colour depth, making it unsuitable for high-
quality photographs. GIF is often used where
transparency is needed on the graphic. GIF can
also be used to store simple animated images.
 Definition of terms:
• Binary- A number system that contains two
digits, 0 and 1. Also known as base 2.
• Bit- The smallest unit of data in computing
represented by a 1 in binary.
• bit depth- The number of bits available to
store an audio sample.
• Bitmap- An image made up of pixels. This type
of image loses quality if its width and/or
height are increased.
 Definition of terms:
• CAD (Computer-aided design) - the use of
computers to assist in any of the phases of
product design.
• colour depth- The amount of bits available for
colours in an image.
• Compression- A method of reducing file sizes,
particularly in digital media such as photos,
audio and video.
 Definition of terms:
• GIF (Graphics interchange format) - an 8-bit
digital image format which uses lossless
compression. Also used for short animations.
• GPS (Global Positioning System)- These
pinpoint an exact location on the globe
according to lines of latitude and longitude.
• Infographic- A graphical image which contains,
or is generated from, data and statistics.
 Definition of terms:
• JPEG (Joint Photographic Experts Group) - a
digital image format which uses lossy
compression.
• Lossless- A form of compression that encodes
digital files without losing detail. Files can be
also restored to their uncompressed quality.
• Lossy- A form of compression that reduces
digital file sizes by removing data.
 Definition of terms:
• Memory- The part of a computer that stores
data
• Metadata- Data about data. It is a set of data
that describes and gives information about
other data.
• open standard- A publicly agreed method of
using and sharing different types of
information, particularly over the internet.
 Definition of terms:
• Pixel- One of the individual units (often called
dots) that make up an image. Picture element.
• PNG (Portable network graphics) - a digital
image format that uses lossless compression.
• Resolution- The fineness of detail that can be
seen in an image - the higher the resolution of
an image, the more detail it holds. It is
measured in dots per inch (dpi).
 Definition of terms:
• Smartphone- A mobile phone with a powerful
processor that is capable of running
applications and accessing the internet.
• Vector- An image stored as mathematical
instructions for how to draw it. This means its
width and height can be increased without the
loss of quality.