Assignment 1 Task 2

Pixel
Picture element the picture element is another way of defining 3
individual colour channels: red, green and blue. These channels
allow black and white images to be viewed as colour. Each channel
can hold 256 levels (shades) of the respective colour this means
that there can be 16,777,216 different colours in a raster image. The
image below shows the 3 different colour levels of red green and
blue.

Image resolution the resolution image can be defined by the

number of pixels across the X and Y axis of the image such that a
picture with resolution with 1080x720 pixels has a high
definition(HD) resolution. The image below shows 3 different
resolution types.

Intensity pixel intensity defines the brightness of each pixel and

is shown usually using a histogram. The bit range from 0-255 is the
different values that the intensity (brightness) that the pixel can
have, 0 being black and 255 being white. There is an example of an
intensity histogram below.

Raster images
A raster image is a graphic that is defined by pixels each raster image can
be made up of hundreds of thousands if not millions of pixels. Raster
images are produced by cameras and scanners, their main use it to
display larger complex images.

Compression (lossy,
lossless) lossy
compression is where some of
the image quality is sacrificed
so the image can have a
small file type. This is useful
when putting images on the
internet but not when editing
images. Lossless compression
is where an image is kept in
its original resolution and the
file size may become quite
large but it will be very high
quality. To save a raster
image you have to export it
to a different file format. For
example in Photoshop you can save your work as multiple different
file formats (see screenshot to right).

File types

o BMP- uses 8 bit or 4 bit absolute compression (BI_RLE8,

BI_RLE4)

o PNG uses lossless compression with lossy elements to

reduce the number of colours used in the image it can support
the rgb range but is capable of many more colours. PNGs are
used for clipart, logos, buttons and photographic images
o GIF these change the number of levels in an element from
256 to 64 giving less colour choice (262,144 individual colours
instead of 16,777,216). These support RGB colour modes and
animation is also supported. GIFF uses lossless compression
so no information is lost in the process.
o TIFF used in scanners in the early days of computers, as
there was no common file type before TIFF

Vector Images
Vector images are made up of co-ordinates and lines
that go from one set to another, this eventually make up
an image, but unlike raster images they dont pixelate
when enlarged. Vector images also can be compressed
much more without losing their quality, this allows for
really small in file size, good quality images to be used.
Also mathematical curves can be used to make rounded
objects. There are a few limitations with vector images,
the main one is that only basic images can be made e.g.
cartoons (see right) and basic logos. Vectors use only a few types of file
e.g., .eps and .ai.
Vector images are mainly used in logos and maps as they need to scalable
to allow the user to view the maps in more detail and to also allow the
logos to be used on bigger and smaller documents whilst remaining
unpixelated.

Encapsulated PostScript, EPS (.eps) EPS keeps a low

resolution version of the image for so it can be previewed in some
programs. When EPS was released only Apple Macintoshes were
capable of reading them. Today EPS can be read by most computers
and is used by a variety of Programs (CorelDRAW, GIMP and Adobe
Illustrator are a few).

Adobe Illustrator artwork, AI (.ai) AI files are created with

adobe illustrator and are used to store Vectors in either EPS or PDF
files, AI is the incomplete file type though it can be used by other
applications as a finished product it can still be edited by Adobe
illustrator. AI used to be known as PGF (progressive file format) but
was changed to AI when Adobe bought the rights.

Bit depth
To understand Bit depth fully you have to have a grasp of mathematics
because to work out the sample rate required for the image it can be
complicated, if you want a greyscale image you would require a sample
rate of 8 bits, this is because in each pixel there are 256 possible levels
(shades) of colour as each bit can be stored as a 1 or a 0 in binary code
each time you increase the sample rate the number of possible shades
increases exponentially for example a 4 bit sample rate would give you 24
(16) different layers to use, this would result in a dreadful image quality, if
you use an 8 bit sample rate you would get 28 (256) shades which is what
we use for greyscale today. As you need more than greyscale we use 24
bit sample rates which allows us 224 (16,777,216) different combinations
of shades per pixel, this is because we need three channels for the 3
colours, red, green and blue. And 3*8 is 24.

Colour space
Greyscale images are made from different shades of black. (Black, grey,
white). Black is the less prominent shade and white is the most prominent
shade. Greyscale images are different to 1bit images as greyscale have
more than 1bit they are either 2bit, 4bit or 8bit. 1bit or binary images are
only black and white because there is only 2 states that the pixels can
take: 1 or 0.
RGB is the most used colour model it uses 3
colours: red, green and blue, they can make up any
colour by using one of the 256 possible hues of
colour in each channel. The RGB model is used by
most digital appliances today including TVs, PC
monitors and phones; they produce 24bit images
by using all 3 channels of colours in the model.
(RGB spectrum to left)
YUV is a colour space and it determines the colour
by using luminescence, Y
and chrominance, UV hence YUV.
This colour space, when
used, allows more room for error
as the errors are less prominent. The
YUV space is used mostly by PAS
systems. (See left for YUV
space)

Hue, saturation and value (HSV) is used

in the HSV colour space rather than red,
green or blue. HSV is an adaption of the
RGB colour space as it uses a similar
concept. Hue determines the shade of
the colour and the saturation determines
how sharp the colour is. High saturation
leads to more prominent colours e.g.
bright red, but low saturation leads to
less prominent colours e.g. a grey-red.
Value is simply the brightness of the colour. (See left for HSV space)
Image capture
There are many ways to capture images these days be it by camera or
scanner they both convert analogue colours to the RGB spectrum.
Scanners use a methodical way of collecting the image data of the picture
you want to digitalise. They would start at one end and they would sweep
over the picture a couple of times to collect enough data to display on the
screen in RGB. There are different types of scanners the most common is
the household one that most people have built in to their 3 in 1 printer,
known as a flatbed scanner (see below).

There are also 3D scanners which can scan the surface of a shape or
object and construct its shape and colours on specialised software.
Hardware such as Microsofts Kinect sensor for their Xbox is an example of
a 3D scanner.

Digital cameras use a similar principle to the human eye in the way it
captures light through various lenses and projects it onto a plate at the
back of the camera. This plate is called a charge-coupled device (CCD, see
below).

Though quite different, cameras and scanners both use pixels per inch
(PPI) to measure resolution. PPI is simply what it says on the tin, the
number of pixels in an inch. This can vary, if a camera has a less sensitive
CCD it will capture less light therefore is unable to get many pixels per
inch.
Most cameras use SD cards (see right) to store images and
video, until recently the most common type of SD card had 4
gigabytes of storage. Recently there has been a lot more 16
gigabyte cards made as they have become cheaper to make
than the 4 gigabyte cards. The SD card is very useful because
most computers these days have an SD card slot so it is easy
to get the images from camera to computer. Most cameras offer a form of
asset management as some allow the creation of folders in the camera SD
card. The camera also usually names the image with the date and the
number of photos taken e.g. 234_31_01_15.
The Point and shoot camera may seem cheaper but it does not provide
the user with the higher resolution images that the various types of more
expensive DSLR camera. The high end DSLR camera is mainly used by the
press and professional photographers, whereas the point and shoot
camera is mainly used by the amateur photographer.
Optimizing
Optimising is the process of making something more efficient i.e. making
the file size really small, but there is a fine line between optimisation and
quality. If you optimise something too much its quality will start to

degrade. Optimisation is usually performed as you save an image in

Photoshop. (See screenshot below)

See above screenshot for the file sizes of different file formatss
When making a website all of the graphics have to be saved in one
location so the site doesnt have any trouble locating the pictures. It also
ensures that your site infrastructure is really tidy to prevent things being
lost. It also allows the site to work faster as it is not looking for any images
as it knows where they all are.

Bit depth was covered mostly above, but in terms of file size you need to
find a balance between bit depth, quality and file size to place the graphic
on the internet. Files with large bit depths have a larger file size, this is
because they are better quality.
Image dimensions are often measures in the number of pixels along the xaxis by y-axis, for example: this monitor uses a resolution of 1440x900. If
you multiply the two dimensions you will then get the number of pixels in
the image or on the screen. 1440 X 900 = 1,296,000 pixels.
Intended image output is essential for getting the file size just right. If you
display a low quality on an iPhone screen it will look better than on a
computer screen as the iPhone screen is smaller. Therefore if you want to
aim pictures solely at mobile users then the resolution can be low and the
quality can also be low. If you are using the image as a site background it
has to be quite high in resolution and quality, the most used pc monitor
resolution is 1920X1080 and therefore is the optimum dimension for the
background image. When sizing images correctly there are many things to
consider such as where the image is intended to be viewed be it on
Facebook or on a photography site. The differences are for Facebook the
resolution doesnt need to be particularly large, but on a photography site
it is best to have large resolutions so that he images are higher quality
thus if someone is impressed with your photographs they might consider
hiring you. Typically a Facebook picture is 720p in other words it is partial
HD, whereas a professional image is upwards of 4000p this does really
show when printing as well. If you print a picture off with a low resolution
the printer will have a hard time differentiating the pixels and it will be
blurred. If the printer is printing a high quality picture the image will be
crisp and it will look exactly like the one on the screen.