DIGITAL GRAPHICS

Georgia Harris
Pixel

■ Pixel (short for picture element) is a single unit of a changeable colour on a computer image or display.
The resolution of the display screen changes the physical size of the pixel. If the resolution for the display
screen is set to it’s maximum, the pixel will equal the size of the dot pitch however if not on maximum
then the pixel will be larger than the dot on the screen. The colour of the pixel is a blend of three
components of the colours red, green and blue and is allocated a single byte of data to specify each
colour. Not all systems use the full three bytes, only a 24 bit colour system does. If only one byte of data is
allocated to colour then the display can only show 256 different colours. Each pixel is only ever made up
of one colour and are presented in a grid in either horizontal or vertical lines. The pixels will always be the
same relative size to each other so there will never be one bigger than the other if they are presented
together. The quality of any digital image relies on the pixels, so the more pixels in an image then the
higher the image quality will be. The fewer pixels will mean a lower image resolution, if an image has this
is could be either because of the device the image was captured or the device used to display the image.
The only benefit of having an image with low resolution would be that the pixel count is low so therefore
so will the file size. The pixels intensity is measured based on the brightness of the image. Having the
maximum intensity on an image would create a completely white image whereas having the minimum
intensity would create a completely black image. As pixels are individual though it means part of images
can be altered without the whole image being affected, intensity levels can be altered in various parts of
an image separately.
Raster Images

■ A raster image is an image that is either captured or created by a digital camera and are stored with various formats
in image files. A raster image is presented on a raster grid made up from x and y coordinates. The image file shows
which coordinates need to be illuminated and the colour they should be. A raster image is often larger than a vector
image and can be difficult to modify or update without losing some information. Because the raster image uses
pixels it can become blurry when zoomed in because of the image resolution, in conjunction to this when the image
size is reduced the quality of the image becomes less clear therefore the image resolution cannot be scaled as
quality can be lost. Some examples of Raster image formats and extensions are GIF, TIFF, BMP and JPEG files.
■ GIF stands for “Graphics Interchange Format” and is used widely over the internet to store a graphic image.
■ TIFF is the tag image file format that transfers raster bitmap images between applications.
■ BMP also known as bitmap is a graphics image format that stores raster images.
■ JPEG compresses images up to 5% of the original size however details can be lost and the image will be presented at a
lower quality.
■ Image files can be compressed and this is where the file size is reduced to allow it to be stored in various places for
example a disk. One type of compression is “Lossy” and this is a compression that involves storing images in the
JPEG format. One problem with this compression is that every time a Lossy image is opened some of the data is lost
as the image has been broken down. How much data that is lost depends on the compression rate. Lossless in
another compression process but this time the image is saved as a ZIP file, this makes images and groups of
images easier to transfer as the images are broken down.
Vector Images

■ A vector graphic is a digital image that is created through mathematical statements of command
sequences. The statements and sequences place shapes and lines in any two or three dimensional
space. The way in which a vector graphic is saved means the file size is much smaller as instead of each
line of a drawing containing a different part of the file, a vector file describes the points that should be
connected. One example of a vector image file format is an EPS, this stands for Encapsulated PostScript
and is the most common format however not all programs support these files, some can only read the file
without being able to edit it and some can only export them.When presented, a vector image will look the
same no matter what device it is on, even when it has been printed whereas with a raster image the
quality can be distorted depending where the image is being viewed. One disadvantage of vector images
is that they often lack the realistic look, they tend to look more animated and cartoon like. However unlike
raster images they can be resized as much as you want to and they will not lose any of their quality,
resizing an image is a file extension but the image will not lose any data and will remain the same. A
vector image is created by various connected points, lines and curves, sometimes in the form of polygons.
The image above is an example of before and after an image has become a vector so it is clear to see
that once turned to a vector, it no longer look as realistic.
Bit Depth

■ Bit depth shows how many individual colours a single image colour palette has, a smaller number of bits
means there are less displayed colours whereas a larger number of bits means more colours can be
contained within an image. So a one bit image could only show two colours, black and white.. This is
because black and white are represented by a 0 and a 1, all the other colours fall in-between as a
combination of these two. An 8 bit image would be able to display a range of 256 colours which is nothing
compared to a 24 bit image which is able to display around 16 million colours. The sample size of a bit is
the number of bits used in each sample. Similar to image resolution, the bit depth of an image changes
the size of the image file so if the bit depth is high then the file size will be larger as a higher amount of
colour information is stored in each image pixel. As well as the individual image having a bit depth, so
does the display on a computer and this can be changed in the display properties on a monitor. High
colour graphics stores information of images of 2 byte pixels (16 pixels) and hold a colour palette of 65,
536 unique colours. High colour graphics are usually used on smaller devices such as the Nintendo DS
due to their monitors having the same colour range. A true colour graphic is made up of 24 bit graphic
images using red, green and blue. It is called ‘True colour’ as the images taken using this bit depth
displays the true colours of the image as it would in real life, all individual colours would be able to be
identified. A monochrome image means it is made up of only black and white however similar shades
such as greys are also used to blend the image making it more realistic rather than being so sharp. One
problem with monochrome is that it often does not look realistic as there aren’t as many available shades
to be used.
Colour Space

■ Colour space is created by the pigments of the primary colours, it can also be known as the colour system
or colour model. Each colour in the model is represented by a dot and shows the colours numerically.
Colour space is based around the colour model of RGB which defines the three colours of red, green and
blue. The saturation, hue and colourfulness make up the chromaticity which is the quality of a colour.
Every individual colour is made up from different levels of these and altering one level even slightly can
create a complete new colour. The colours of the RGB format are the basic primary colours which work
together to make any colour needed in an image or displayed on a device. As well as using the basic
shade of each colour, different shade variants can also be used in order to make an image look more
realistic, because of this the RGB format is the most popular in gaming graphics and animations.
Greyscale images are only ever made up from black and white however the black and white can be
altered to create different shades of grey. The different greys are placed together with the compared
shades of the RGB format to create the ‘grey scale effect’ this is done as the amount of colour needed in
a greyscale image will not be as high due to the intensity and the fact that less information will be
required for each greyscale pixel compared to a coloured one.
Image Capture

■ An image can be captured using any digital device such as a camera, mobile phone or scanner. Images can then
be transferred either wirelessly using things such as ‘the cloud’, by USB charger cables or using the memory
cards in the device. After being transferred, images can be edited in various editing software’s. When saving an
image it can be saved as a file with an edited name, the file name can be either a simple number or a name to
make it easier to find at a later date. Each image should be saved with an individual name similar to no others
so that an image can not be lost or confused with another. The quality and amount of detail in an image will
depend on the resolution of the device the image was taken with, the higher the resolution, the better the image
quality will be. The resolution is measured in pixels so the more pixels means the resolution will be higher and
will therefore capture a better quality image. However, the higher the quality of the image, the more storage
space it will require once transferred and whilst still on the device, however additional memory can be
purchased either through larger memory cards or by using external hard drives to store images on. The most
popular resolutions are 256x256 (often found in less expensive mobile phones), 640x640 (still low quality but
used for web images), 1216x912 (the ideal printing resolution) and 2240x1680 (the highest quality showing the
most colour in prints). As well as the resolution affecting the final image, so does other settings on the various
devices. For example when it comes to digital cameras the aperture and shutter speed control how much of the
image is in focus and how much light is let in through the lens. Depending on how complex the device is, some
may have these settings pre set that can be chosen from a menu or some may be able to be controlled manually
and therefore giving more control over the final image to the user.
Optimising

■ Optimising images is mainly used in webpages and involves image files being compressed to a suitable size specified
beforehand to fit the webpage. The most common compression formats are: JPEG, PNG and GIF. The files are usually
compressed by removing certain data from the image to make a file size smaller. However, this means the image quality
will be reduced so detail will be lost and things like shadows and highlights will be much less prominent. As much as web
designers want their pages to look the most professional and receive the most traffic, if higher quality images are used
and therefore attract more people to the page, they will in fact be charged more. So the way around this is using lower
quality, smaller images however this could have an impact on the final finish to the page and could prevent it from
looking as professional. The target destination is about where the images will be featured (eg the internet, websites,
backgrounds, etc.). These will all need to be taken into consideration when designing as file sizes will need to be correct
for each device that it will be displayed on. So for my product the file sizes must be appropriate for a computer as that is
where it will be displayed. The amount of unique colours that can be displayed depends on the bit depth so an image
with a smaller bit depth will take up less space and have a smaller file so would be more suitable however it won’t be
able to show as many colours as an image with a higher bit depth. Resolution describes how much detail the image
holds, the higher the resolution, the higher the amount of detail. Resolution is measured by dots per inch (DPI) and pixels
per inch (PPI). Instead of reducing the resolution of an image to lessen the cost, images can be printed and presented
that way as then there is no restrictions and the images can be a much higher quality. The dimensions of an image are
the width and length and can be presented as different units of measurement such as mm, cm, inches etc. they can also
be measured in pixels. If in image is going to be made suitable for a specific device then the dimensions of the device
will be needed to be known before anything is designed so that it will be suitable. When it comes to my intended image
output I will need to do research into other webpages that are already available and before anything is designed, the
dimensions of a computer screen will need to be taken into account.
Sources
■ http://whatis.techtarget.com/definition/pixel

■ https://www.google.co.uk/search?biw=1280&bih=904&tbm=isch&sa=1&q=pixels&oq=pixels&gs_l=psy-
ab.3..0l4.5000.5828.0.5962.6.6.0.0.0.0.92.498.6.6.0....0...1.1.64.psy-ab..0.6.492...0i67k1.0.UZFVpeOxDLs#imgrc=sWP6Y06F0X3V-
M:&spf=1506083747076

■ https://en.wikipedia.org/wiki/Raster_graphics

■ www.urbandictionary.com/define.php?term=GIF

■ https://www.google.co.uk/search?q=raster+images&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjA_5Dm77jWAhVpKcAKHSwaD1MQ_AU
ICigB&biw=1280&bih=904#imgrc=k3wMysSanJvGtM:&spf=1506086063968

■ http://searchwindevelopment.techtarget.com/definition/vector-graphics

■ http://etc.usf.edu/techease/win/images/what-is-bit-depth/

■ http://www.arcsoft.com/topics/photostudio-darkroom/what-is-color-space.html

■ https://vectormagic.com/support/file_formats

■ https://www.google.co.uk/search?q=bit+depth+sampling&oq=bit+depth+sam&gs_l=psy-
ab.3.1.0j0i22i30k1l9.1565.3851.0.5762.13.13.0.0.0.0.107.1206.9j4.13.0....0...1.1.64.psy-
ab..0.13.1194...0i131k1j0i67k1j0i10k1j0i3k1.0.23TKr4RYtcE

■ https://content.historicengland.org.uk/images-books/publications/digital-image-capture-and-file-storage/heag059-digital-images.pdf/