Graphic

Images

Vector and Bitmapped Images
Compare and contrast vector and bitmap (raster) images.

Vector
1. Infinitely scalable without loss of quality, good for large scale print or posters
(resolution independent)
2. Constructed using mathematical equations to create paths and coloured fills
3. Small file size

Bitmap
1. Made up of many pixels each assigned to a colour (raster)
2. Larger file size
3. Not scalable
4. Higher image quality

Image size
There are two main factors that affect the file size of an image (excluding the file
format). These include the bit-depth (colour depth) and the resolution of the image.

Resolution: Resolution refers to the number of pixels in an image. Resolution
is sometimes identified by the width and height of the image as well as the
total number of pixels in the image. For example, an image that is 2048 pixels
wide and 1536 pixels high (2048X1536) contains 3,145,728 pixels (or 3.1
Megapixels). You could call it a 2048X1536 or a 3.1 Megapixel image. This is
considered the size of the image.

Bit Depth: The number of bits used to indicate the colour of a single pixel in a
bitmapped image.

Page 1
Understanding Bit Depth in More Detail

Vaughan, 2011, p 27

A bit is the simplest element in the digital world, an electronic digit that is either on
or off, black or white, or true (1) or false (0). This is referred to as binary, since only
two states (on or off) are available. A map is a two- dimensional matrix of these bits.
A bitmap, then, is a simple matrix of the tiny dots that form an image and are
displayed on a computer screen or printed.

A one-dimensional matrix (1-bit depth) is used to display mono- chrome imagesa
bitmap where each bit is most commonly set to black or white. Depending upon your
software, any two colours that represent the on and off (1 or 0) states may be used.
More information is required to describe shades of grey or the more than 16 million
colours that each picture element might have in a colour image, as illustrated in
Figure 3-1. These picture elements (known as pels or, more commonly, pixels) can be
either on or off, as in the 1-bit bitmap, or, by using more bits to describe them, can
represent varying shades of colour (4 bits for 16 colours; 8 bits for 256 colours; 15 bits
for 32,768 colours; 16 bits for 65,536 colours; 24 bits for 16,772,216 colours). Thus,
with 2 bits, for example, the available zeros and ones can be combined in only four
possible ways and can, then, describe only four possible colours.

Page 2

Calculating Bit Depth

It is possible to calculate the number of colours that can be used in an image when
the bit depth is given. Likewise, it is also possible to work out the bit depth of an
image when the number of colours used is given.

Number of possible colours

number of possible colours = 2X
Where x = bit depth of a given image

For example, how many different colours are possible with a bit depth of 8?


number of possible colours = 28
number of possible colours = 256



Finding out the bit depth from the number of possible colours

bit depth = log x log 2

Where x = number of colours in a given image

For example, what is the bit depth of an image that has 4096 colours?


bit depth = log( 4096 log( 2
bit depth = 12

Page 3

Calculating File Size of an image

Image Size (bits) = Width x Height x Bit Depth

Example 1: Calculate the file size of an image (in bits) for an image that is 600 x 300 pixels
and has a bit depth of 4.

Solution: 600 x 300 x 4 = 720 000 bits

Example 2: Calculate the file size of an image (in kilobytes) for an image that is 400 x 100
pixels and has a bit depth of 2.

UNIT CONVERSION NEEDED TO FULLY ANSWER

Solution: 400 x 100 x 2 = 80 000 bits
80 000 bits = 80 000 / 8 = 10 000 (bytes)
10 000 bytes = 10 000 / 1024 = 9.766 (kilobytes)

Example 3: Calculate the file size of an image (in kilobytes) for an image that is 150 x 150
pixels and has 64 colours. COLOURS ARE USELESS

Bit Depth = log 64 / log 2
= 6

Solution: 150 x 150 x 6 = 135 000 (bits)
135 000 bits = 135 000 / 8 = 16 875 (bytes)
16 875 bytes = 16 875 / 1024 = 16.48 (kilobytes)

Example 4: How many 915 kilobyte images can fit onto a 2GB memory card?

Solution: 915kb = 915 /1024 = 0.894 (megabytes)
0.894 megabytes = 0.894/1024 = 0.000873 (gigabytes)

quantity = memory size / file size *must be in same units
quantity = 2/0.000873
quantity = 2290.950744
quantity = 2290 (round down)

Page 4
Calculating File Size of an image

Image Size (bits) = Width x Height x Bit Depth

Revision 1: Calculate the file size of a GIF (in kB) that is 600 x 300 pixels.

600 x 300 x 8 = 1 440 000 bits
1 440 000 bits = 1 440 000/8 = 180 000 bytes
180 000 bytes = 180 000/1024 = 157.78 kB

Hot Tip
If bit depth isnt given for GIF and JPEG image types, but you are asked to calculate
the file size, assume 8-bit for GIF and 24-bit for JPEG.


Revision 2: A graphic designer creates a new document that is 800 x 600 pixels in size.
They then place their company logo inside the document. The logo has the
dimensions of 500 x 240 pixels.

NOT TO SCALE

a) What percentage of space in the document is taken by the logo?

Solution: 25%




b) What percentage of space in the document is free?

Solution: 75%

Page 5

Various graphic file formats
Vaughan, 2011, p 97
http://en.wikipedia.org/wiki/Comparison_of_graphics_file_formats last accessed 4th
October, 2012

Most applications on any operating system can manage JPEG, GIF, PNG, and TIFF image
formats. An older format used on the Macintosh, PICT, is a complicated but versatile format
developed by Apple where both bitmaps and vector-drawn objects can live side by side. The
device-independent bitmap (DIB), also known as a BMP, is a common Windows palette
based image file format similar to PNG. PCX files were originally developed for use in Z-Soft
MS-DOS paint packages; these files can be opened and saved by almost all MS-DOS paint
software and desktop publishing software. TIFF, or Tagged Interchange File Format, was
designed to be a universal bitmapped image format and is also used extensively in desktop
publishing packages. Often, applications use a proprietary file format to store their images.
Adobe creates a PSD file for Photoshop and an AI file for Illustrator; Corel creates a CDR file.
DXF was developed by AutoDesk as an ASCII-based drawing interchange file for AutoCAD,
but the format is used today by many computer-aided design applications. IGS (or IGES, for
Initial Graphics Exchange Standard) was developed by an industry committee as a broader
standard for transferring CAD drawings. These formats are also used in 3-D rendering and
animation programs.

JPEG, PNG, and GIF images are the most common bitmap formats used on the Web and may
be considered cross-platform, as all browsers will display them. Adobes popular PDF
(Portable Document File) file manages both bitmaps and drawn art (as well as text and
other multimedia content), and is commonly used to deliver a finished product that
contains multiple assets.

Page 6

 Comparison of Image File Formats
Compressi Raster/Vec Transpare
Format Colour Depth Interlacing Animation
on tor ncy

BMP None Raster 1, 4, 8, 16, 24, and 32 Yes No No

GIF Lossless Raster 1, 2, 3, 4, 5, 6, 7, and 8 Yes Yes Yes

8-bit(greyscale), 12-bit,
JPEG Lossy Raster No Yes No
and24-bit

PCX None Raster 1, 2, 4, 8, and 24 No No No

1, 2, 4, 8, 16, 24, 32,

PNG Lossless Raster Yes Yes No
48, and 64

1, 2, 4, 8, 16, 24, and

TIFF None Both Yes Yes No
32

Note: If bit depth isnt given for GIF and JPEG image types, but you are asked to calculate
the file size, assume 8-bit for GIF and 24-bit for JPEG.

Interlacing: Interlacing is a web-specific feature of GIF. It is a mechanism that makes images

appear faster on-screen by first displaying a lower resolution version of the image and
gradually showing the full version. Example: http://goo.gl/gb0ZzV

Page 7

Define lossy compression and demonstrate how it works.
Wikipedia, https://en.wikipedia.org/wiki/Lossy_compression, last accessed 28th September,
2015

In information technology, lossy compression is the class of data encoding methods that
uses inexact approximations (or partial data discarding) to represent the content. These
techniques are used to reduce data size for storage, handling, and transmitting content.

Define lossless compression and demonstrate how it works.
Wikipedia, https://en.wikipedia.org/wiki/Lossless_compression, last accessed 28th
September, 2015

Lossless compression is a class of data compression algorithms that allows the original data
to be perfectly reconstructed from the compressed data.

GIF file format uses the LZW compression algorithm developed by Abraham Lempel, Jakob
Ziv and Terry Welch.

Compression algorithm constructs a colour table for an image wherein each colour value is
matched to a pixel.
Compression is horizontal
No information is lost (provided there are less that 256 colours)

Page 8

Importing Images

It is possible to gather images from a wide range of different sources, including:

Clip Art: Premade/designed images used in a multimedia presentation. Normally
vector based images.
Screen Capture: The process of saving the image presented on the screen.
Scanning: The process of using a device to capture an analogue image and
converting it to a digital image.
Graphics Tablet: A particular input device that is used by a multimedia specialist to
input data. A graphics tablet is often used by graphic artists to draw images on the
computer screen.
Still Camera: A still camera is a type of camera used to take photographs. Traditional
cameras capture light onto photographic film. Digital cameras use electronics,
usually a charge coupled device (CCD) to store digital images in computer memory
inside the camera. The digital image can be transferred to a computer for later
processing. http://en.wikipedia.org/wiki/Still_camera
Video Camera: A video camera is a camera used for electronic motion picture
acquisition, initially developed by the television industry but now common in other
applications as well. http://en.wikipedia.org/wiki/Video_camera
Image Libraries: A large collection of images (either owned by a photographer or an
organisation), available for hire by anyone wanting to use or publish the image.
http://findaerialphotography.com/glossary.php
Stock Photographs: Is the supply of photographs licensed for specific uses. It is used
to fulfil the needs of creative assignments instead of hiring a photographer. Today,
stock images can be presented in searchable online databases. They can be
purchased and delivered online. http://en.wikipedia.org/wiki/Stock_photography

Page 9

Notes on stock photography, image libraries and clipart
Legal rights protecting use of images from clip libraries fall into three basic groupings.

Public domain images were either never protected by a copyright or their copyright
protection has ended. Generally these can be freely used without obtaining
permission or paying a license fee, though there still may be an ownership issue for a
particular work of art (such as a painting owned by an art gallery).

Royalty-free images are purchased and then used without paying additional license
fees.

Rights-managed images require that you negotiate with the rights holder regarding
terms for using the image and how much you will pay for that use.

It is important to note that some images are licensed for unlimited use. But you should
note that unlimited use often contains conditions: in many cases there is an upper limit to
the number of units of your own product that you may distribute without paying more, so
you need to read the fine print. These additional fees are usually reasonable, however, and
affect only commercial multimedia publishers.

Identify and describe three licensing categories for stock photography.

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

_____________________

___________________________________________________________________________

_______________________________________________________________

_____________________________________________________________________

Page 10

Object Layering

It is possible to layer text and objects to create different effects. Objects can be sent to the
back or to the front or can be positioned anywhere within a set of layered objects.

Page 11

Image Enhancements

There are many techniques that can be applied to enhance images. These include:

Filters: Filters allow you to overlay effects to an image. You can use filters to clean
up or retouch your photos, apply special art effects that give your image the
appearance of a sketch or impressionistic painting, or create unique transformations
using distortions and lighting effects.
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e410
01031ab64-7986a.html
Special Effects: An effect added to a photograph that is not necessarily achievable in
real life.
Anti-aliasing: Is the smoothing of jagged edges in digital images by averaging the
colours of the pixels at a boundary.

Page 12