This document provides information on different types of digital graphics file formats including raster graphics (made up of pixels), vector graphics (made up of paths and strokes) and the key differences between the two. It then outlines several specific file formats for raster (JPEG, TIFF, GIF, BMP) and vector (PSD, AI, FLA, WMF) graphics and provides details on what each is used for, advantages and disadvantages. The document also discusses topics like compression, image capture methods, optimizing images, file size considerations, naming conventions and asset management.

1. Digital Graphics
File Formats
Oli Walwyn

2. Raster Graphics
• Raster Graphics are one of the main types of
digital graphics. They are made up of Bitmaps
(or pixels) which record the colour information
of that section of the image. Bitmapped
images have a set resolution meaning that
changing the size of the image results in it
becoming distorted (or pixelated).

3. Vector Graphics
• Vector Graphics are another main type of
digital graphics. They are made up of Vectors
(or paths/strokes) which are defined by the
start point and end point, with curves and
angles between them. Vectors can be resized
infinite times and pixilation won’t occur. This
means that Vector Graphics are good for
commercial uses such as company logos that
need to be in many different formats/sizes.

4. Distinction between Raster and
Vector Graphics
• Raster graphics will become pixilated after
resizing an image, whereas, Vector graphics
offer lossless compression – retaining all of
the original data, even after resizing.
• Here is a diagram to help explain the
fundamental difference between the two:

5. Raster Graphics

6. JPEG
Stands For Joint Photographic Expert Group
Used For/Example JPEGs are primarily used for photographs
and on websites. They are used widely on
the internet.
Advantage • Small file size.
• Good for use on websites where data
usage is important.
• Widely compatible with most mobile
phones, tablets, computers, cameras
etc.
Disadvantage • Sacrifice image quality for file size
meaning that they aren’t always
optimal visually.
• Because JPEG is a Raster Graphic,
changing the size of the JPEG will result
in it becoming pixilated.

7. TIFF
Stands For Tagged Image File Format
Used For/Example Newspapers/magazines/publishing. Useful
for graphic designers.
Advantage • Lossless compression means that the
file doesn’t lose composition.
• TIFF enables multipage documents in a
single file, which is extremely useful for
magazine covers and publishing.
Disadvantage • Large file size compared to other raster
graphic formats – could be
inconvenient.
• Isn’t available on as many platforms as
JPEG, for example. May required
specialised software to be able to view.

8. GIF
Stands For Graphics Interchange Format
Used For/Example Mainly used for low file size animation on
the internet.
Advantage • GIFs are essential a series of images
played quickly to create the illusion of
movement. This means that they have
a low file size in comparison to other
video formats. GIFs are a good
alternative to larger video formats.
• Offers lossless compression meaning
that this format will not lose resolution.
Disadvantage • Due to GIFs being very compressed,
their quality can be poor and pixilated.

9. BMP
Stands For Bitmap Image File
Used For/Example Common format in image processing
programs.
Advantage • Lossless compression means that the
file doesn’t lose composition.
• Optimised for Windows operating
systems.
Disadvantage • BMP has a large file size meaning that it
could be inconvenient to upload to the
internet.

10. Vector Graphics

11. PSD
Stands For Photoshop Document
Used For/Example PSDs are used almost exclusively for Image
Manipulation in Adobe’s Photoshop.
Advantage • Specialised – designed for a particular
purpose and are good at what they do.
• Saves all of the layer information and
page formatting in a single document.
• Lossless compression – No loss in
definition. PSDs can be perfectly
reconstructed.
Disadvantage • File sizes can become extremely large
which means that they have to be
converted if needed to be viewed
effectively as an image.
• Not necessarily compatible with some
platforms/devices/software.

12. AI
Stands For Adobe Illustrator Art
Used For/Example Used for creation of logos/designs in
specifically in Adobe’s Illustrator.
Advantage • One of the main features of AI is that
they are vectors and so have lossless
compression. They can be stretched,
resized, uploaded, downloaded and
changed in any way, but will not lose
definition.
Disadvantage • Can create some massive file sizes
unless the image is rasterised.
• Designed for use in a specific program
and so is only compatible with
particular programs.

13. FLA
Stands For Flash File
Used For/Example Used to create animation and games in
Adobe’s Flash systems.
Advantage • Can produce a high quality file with a
relatively small file size.
• Files can also record sound and video
which is something not many other
image formats have.
• Widely readable/used on the internet
and with most software.
Disadvantage • Created for specific use in Adobe
programs, so there may be
platforms/software that can’t read FLA.

14. WMF
Stands For Windows Metafile
Used For/Example An image format originally created for
Microsoft Windows in 1990. Can be used
to create designs and logos.
Advantage • WMF have lossless compression
meaning that they do not lose
definition unless they are rasterised.
Disadvantage • Have become largely irrelevant and
replaced by more efficient file formats
(such as AI.)
• As this format was designed in a
particular operating system, it might
not be compatible with systems like
Apple’s Mac or Linux.

15. File Format Capture
and Optimising

16. Compression
Definition Compression is reducing the amount of bits in
an image to reduce the file size. If a file has
lossless compression, then the image will
never lose definition. But if a file has lossy
compression, then it has been changed by
reducing the information in each pixel to
make the file size smaller.
Advantage The primary advantage of using compression
in images is that the file is carrying less
information and therefore, the file size is
reduced substantially. It is sacrificed for a
lesser quality of the image in general as all of
the bits will have less colour information.
Disadvantage The disadvantage is that the quality and
clearness of the image is largely affected by
compression, meaning that the image will
appear blurry and distorted instead of clear
and in it’s original quality.

17. Image Capture
Method Scanner
How is it used for image capture of
graphics
Scanners can be used to process physical
documents and turn them into digital
copies so that they can be sent/used
online. They are useful in professional
office working environments.
Method Camera
How is it used for image capture of
graphics
Cameras are commonly used to create
photographs of surroundings and to
record data via an image. They create a
digital copy of this information so that it
can be imported to a computer and used
online.
Method Graphics Tablet
How is it used for image capture of
graphics
Graphics tablets have the primary function
to manipulate images on a mobile device –
essentially a portable version of Adobe’s
Photoshop.

18. Optimising
Why would you optimise? You would optimise an image if you were
uploading it to the internet as if an image
is not optimised, it might take a long time
to load that web page.
How can you optimise? One way to optimising an image is
changing the size and dimensions of it.
This is a basic function in any photograph
manipulation software. In Photoshop, it
can be done by going into Image>Image
size.
Advantage to optimising • The file size is smaller making it easier
and quicker to view on the internet.
Disadvantage to optimising • The file is smaller, meaning that it’s not
in it’s original format.
• Some forms of optimising can make the
file lose quality.

19. Storage

20. File Size
What could affect a Working Scale
(Photoshop) document file size?
The Working Scale will affect the dimensions of
the image, meaning that the larger the width
and height, the larger the file size is going to be.
This is because as the width and height are
increased, so is the amount of pixels in an
image.
How could you reduce the file size of a
Working Scale document without
affecting quality?
To reduce a file size without affecting the
documents quality, you would have to give the
image a smaller resolution by going into Image >
Image Size in Photoshop.
What is an advantage of scaling up images
before exporting?
Making an image larger before it is exported is
good because this means the picture will last
longer (damaged through saves and uploads.)
What is a disadvantage of scaling up
images before exporting?
A disadvantage of this is that by scaling up the
image, you could cause pixilation and reduce
the quality of the image.

21. File Naming Conventions
What naming conventions could you use
when creating your video game assets?
To keep organised, I will have a structure in
my files to make them easier to find. They
will be named exactly what they are: for
example, if there is a rotoscope of an
elephant, it will be name elephant1.psd
(or .jpeg or whichever format it is in. If
there is an updated version of this file, it
will be name elephant2.psd and so on.
Why is it a good idea to accurately name
your assets?
It’s good to be organised so that you don’t
lose any work as what I will be working on
are large files which I will spend many
hours on.

22. Asset Management
Why would you use folders when storing
your assets?
Folders are a good idea because this keeps
your work in order and organised. This
avoids having a messy storage device
which has lots of randomly named files
and many different projects.
What folders would you create and what
would you save within them
• I will have all of my work saved into a
folder called “Print Based Media” and
then that folder sectioned into sub-
catergories such as “Rotoscoping” or
“Lecture Powerpoints”. This will enable
me to know where everything is and
keep a clean, pristine storage system.

23. References
1. Various. (2015). Vector graphics. Available: https://en.wikipedia.org/wiki/Vector_graphics. Last accessed
24th November 2015.
2. Various. (2015). Raster graphics. Available: https://en.wikipedia.org/wiki/Raster_graphics. Last accessed
24th November 2015.
3. Various. (2015). JPEG. Available: https://en.wikipedia.org/wiki/JPEG. Last accessed 26th November 2015.
4. Various. (2015). Tagged Image File Format. Available:
https://en.wikipedia.org/wiki/Tagged_Image_File_Format. Last accessed 26th November 2015.
5. Various. (2015). GIF. Available: https://en.wikipedia.org/wiki/GIF. Last accessed 26th November 2015.
6. Various. (2015). BMP file format. Available: https://en.wikipedia.org/wiki/BMP_file_format. Last accessed
26th November 2015.
7. Various. (2015). Adobe Photoshop. Available:
https://en.wikipedia.org/wiki/Adobe_Photoshop#File_format. Last accessed 27th November 2015.
8. Various. (2015). Adobe Illustrator Artwork. Available:
https://en.wikipedia.org/wiki/Adobe_Illustrator_Artwork. Last accessed 27th November 2015.
9. Unknown. (2015). FLA file extension. Available: http://www.file-extensions.org/fla-file-extension. Last
accessed 27th November 2015.
10. Various. (2015). Windows Metafile. Available: https://en.wikipedia.org/wiki/Windows_Metafile. Last
accessed 27th November 2015.