This document discusses various digital file formats for raster and vector graphics. Raster formats like JPEG, TIFF, GIF, BMP are described along with their uses and advantages/disadvantages. Vector formats like AI, FLA, WMF are also outlined. Compression and image capture methods like scanning and digital cameras are briefly covered. Key points include JPEG being widely supported but lossy, TIFF being lossless but large file sizes, and vector formats like AI scaling well but requiring proprietary software.

1. Digital Graphics – File Formats
George Boatfield

2. Raster Graphics
• Raster graphics are made up of bitmaps
• Bitmaps are made up of pixels – each pixel records a
specific RGB pattern to make up its own colour.
• There are a fixed number of pixels in a bitmap. This can
result in distortion if the image dimensions are changed.
• A ‘megapixel’ refers to 1 million pixels
• Raster graphics can be compressed, which results in
artifacting of the image as well as a decrease in
resolution.

3. Vector Graphics
• Vector graphics are made up of vectors –
formulas that equate to start and end points with
curves, points and angles between them.
• They can form lines, polygons or round shapes.
• Vector graphics are a lossless format and scale
well. This means that they are good for company
logos and websites designed for different screen
sizes, as well as text.

4. Raster Graphics

5. JPEG
Stands For Joint Photographic Experts Group
Used
For/Example
Photographs and web formats e.g. Facebook saves as JPEG Used widely on the internet by
the public.
Advantage JPEG’s are considered universally supported – most (if not all) modern technology designed
to view websites or images would likely support the format. Furthermore, it allows for small
file sizes depending on the requirements of the user/service and can be compressed to
varying degrees. It was designed to compress images in a way that would not result in a
significant visual loss in quality but still keep file sizes small.
Disadvantage It is a lossy format, which means that images stored as a JPEG are subject to a loss of
quality caused by compression and recompression. This can result in transitions between
colours becoming harsher due to compression of the pixels that smooth the transition. The
format does not support transparency which becomes a necessity when dealing with some
logos, templates etc. Another common file format, PNG, does support transparency.

6. TIFF
Stands For Tagged Image File Format
Used
For/Example
Desktop publishing (newspapers/magazines), good for graphic designers.
Advantage TIFF files are stored without compression, meaning that their quality is lossless. However,
as an option, lossy compression of the format can be enabled if a reduction to file size is
necessary. Adobe InDesign is also able to save save multi-page documents to a single TIFF
file (similarly to the layers system in Photoshop).
Disadvantage TIFF files require specific software in order to be viewed. Most of this software is fairly
professional and is not commonly found on most computers. Furthermore, a fairly
powerful/modern computer may be required to view/edit particularly large TIFF files.
Without compression, the file sizes can be very large (several megabytes). This reduces
portability across devices and introduces the need for higher capacity storage and backups,
especially if many TIFF images are going to be created. Portability is further reduced due to
limited support of the TIFF format from online image galleries.

7. GIF
Stands For Graphic Interchange Format
Used
For/Example
Short animations on the internet – a relic from the time when the internet was too
underdeveloped to support full video services such as YouTube.
Advantage It is comprised of a series of images played one after another in a loop in order to create the
appearance of a video. GIFs allow people to share small, specific moments of a video clip with
other people, which is perhaps the most common use of them on the internet today. This is
usually on a forum or other social networking site or messaging service. They are also small
files, simplistic and easy to make. They load quickly and require no interaction or trigger in
order to be viewed.
Disadvantage They are considered as a much lower quality version of the video playback capable on the
internet today, especially considering GIFs do not contain audio. Furthermore, they only
support 256 colours as it is an 8-bit format. Another problem is that GIF’s cannot be edited
once made, so the source file must be opened up, changed and then re-encoded instead.

8. BMP
Stands For Bitmap Image File
Used
For/Example
Formerly a commonly used file for images on the internet, but smaller files that are much
easier to download quickly within webpages (such as JPEGs) have replaced the format in
recent years.
Advantage No lossy compression is applied to BMP’s, so quality is not lost. Raw image format simply
made up of pixels – can produce a more realistic image than other file formats in certain
conditions. Creation of Bitmap images is very easy to do as most modern computers come
with some sort of Bitmap manipulation software within the operating system, Microsoft
Paint being an example.
Disadvantage File sizes can be very large, particularly if the image contains a large numbers of colours. If
any compression is used to reduce file size, the image must be extracted before it can be
used – this slows down both the viewing and saving process, thus reducing suitability for
webpages. Bitmaps do not scale very well either, as the process involves removing or
duplicating pixels. This means that usually need to be printed at their original resolution to
look acceptable. Generally, they are outdated and have been replaced by formats such as
JPEG, TIFF etc.

9. PSD
Stands For Photoshop Document
Used
For/Example
Excellent format for image manipulation, front cover images of magazines and other tasks
that require flexible editing tools.
Advantage It saves the individual layers that comprise an image as well as page formatting
information, swatches etc. (this is similar to the pages system in TIFF files). The format also
supports transparency/alpha layers or effects. Furthermore, there is no compression of the
contents of the file. While being primarily a raster graphic, PSD files do support basic vector
layers (e.g. shape tool).
Disadvantage The file sizes are huge, and are designed to be exported once the final image has been
completed. This means that the user is required to have Photoshop or other supported
Adobe software to view it (proprietary software). Furthermore, this makes sharing or
transferring PSD files a more time consuming/difficult process.

10. Vector Graphics

11. AI
Stands For Adobe Illustrator Art
Used
For/Example
Logo creation, vector based drawing.
Advantage As a vector format, images created using this can be scaled to any size required without any
loss in image quality. It is ideal for creating graphics for webpages that need to scale for
many different devices e.g. Phone, Tablet, PC. The format allows for painting and drawing
as well as text-based manipulation.
Disadvantage It is designed by Adobe for use with their Adobe Illustrator software package. While this
may provide a very polished and integrated experience for users, those who do not have
access to the program are unable to view the files without spending upwards of £17.15 per
month for access to the software, or through downloading a cheap, less feature-complete
version that would yield a worse user experience.

12. FLA
Stands For Flash File
Used
For/Example
Animation and games can be created using this method.
Advantage They deliver high quality videos/graphics with a small file size. The file can also include
sound and video. Using the format alongside Adobe Flash Player allows for more interactive
websites, which is further strengthened by the low file sizes and this a reduced time to
load.
Disadvantage It often requires an up-to-date web browser plugin in order for it to be integrated into
websites (which is the common use-case scenario). Devices other than PCs (such as phones,
handheld consoles and tablets) also have limited compatibility with Flash files, as Adobe
controls where and when software is available on devices.

13. WMF
Stands For Windows Metafile
Used
For/Example
Used for logos, similarly to AI. Most commonly seen as ClipArt images in the Microsoft
Office software package.
Advantage It can be scaled, and contains both vector and bitmap elements. The availability of WMF
images is high within the Microsoft Office software, with many images built in while more
can be searched for via the internet.
Disadvantage Bitmaps within the vector graphic will still have the same scaling issues as standard
bitmaps. Also, few applications support the editing of WMF, with Microsoft Draw being one
of them. Not only that, but the format is only supported on Windows platforms.

14. File Format Capture and
Optimising

15. Compression
Definition The process of reducing the size of a file. This can either be lossless or lossy compression.
Lossless compression does not affect the file quality, as all the original data remains intact.
Lossy compression does yield better results when it comes to the reduction of file size, but
file quality is affected, as certain parts of the data are removed or simplified to varying
degrees.
Advantage Reduces the file size of images/videos/music. This allows for people with slow internet or
slower/more limited devices faster access to the files and lower usage of their
bandwidth/data allowance. The file has the ability to scale well over many different devices
with different limiting factors. Smaller file sizes also allow more to be stored with the same
data footprint, benefitting both consumers and companies such as Facebook.
Disadvantage The more compression on the file, the more quality is affected. This means that files with a
high level of compression will be much smaller than the original copy, but quality will be
severely compromised. As a result, the versatility of the file can be heavily impacted,
making it unusable for official documents, published material etc.

16. Image Capture
Method Scanner
How is it used for
image capture of
graphics?
Digitises physical images through the use of a LED light strip to provide even lighting, as
well as a sensor that moves across the image, capturing it in horizontal lines and piecing it
together for the resulting file/printout.
Method Camera
How is it used for
image capture of
graphics?
Captures pictures through the use of a lens and image sensor or film. Using image sensors
allows for a more direct form of digital conversion and the potential for higher quality
images with easier access for editing on a PC.
Method Graphics Tablet
How is it used for
image capture of
graphics?
Allows for enhanced control of drawing/selection/digital handwriting. This works with
tablets with or without a screen, as well as a sophisticated stylus that is able to sense
pressure as well as track distance and angle.

17. Optimising
Why would you
optimise?
Not all image formats are suitable for every possible platform that they could be viewed on. Indeed, many
formats may not even be supported on a basic level. Optimising allows for images or other files to be
viewed properly across a range of devices. Perhaps the most common occurrence of this is when web
pages have both a desktop and mobile site.
How can you
optimise?
Continuing the example of a desktop and mobile version of a website and noting the differences can show
what optimisation actually is. The most common form of optimisation is when image resolution is reduced. This
may include website banners or images within articles. Other forms of optimising include increasing the
compression on images or changing the format altogether if it is not supported on most phones. One other
method of optimisation comes in the form of altering an image’s bit depth. This controls the number of colours
in the image – a lower bit depth results in fewer colours in the image and thus much smaller file sizes. Vector
graphics can be of particular help in these situations, as the image scales to best fit with the size or resolution
of a screen without a drop in quality.
Advantage to
optimising
It allows for images or other file types to be viewed across a range of devices, and in a way that scales
correctly and keeps loading times relatively quick in an environment where internet speed or processing
power may be questionable. Furthermore, several file types support automatic optimisation and scaling,
such as FLA and WMF.
Disadvantage to
optimising
While it does improve the quality of the user experience in terms of layout and speed, overall image
quality may be significantly reduced (unless vector graphics are used). Furthermore, depending on the
format being used, optimisation may not be handled automatically for all content and would need to be
done manually (for example within HTML code in the case of a webpage.

18. Storage

19. File Size
What could affect a
Working Scale
(Photoshop) document
file size?
When setting up a new Photoshop image, the initial resolution/imperial or metric measurements
of a canvas as well as the Pixels per inch/centimetre and the colour mode/bit depth all act as
varying factors to what the file size of a Photoshop document starts off as. Continuing on from this,
the number of layers as well as effects applied to them increase the image size further once work
on the document has begun.
How could you reduce
the file size of a Working
Scale document without
affecting quality?
Exporting PSD files as another format such as a JPEG or PNG allows for smaller file sizes than the
original file. This is due to information such as layers and other formatting being directly encoded
into fixed pixels rather than as interactive data that can be manipulated individually. Also, some
form of lossless compression can be used on either Photoshop files or exported images to further
reduce file size without affecting quality. Of course, lossy compression can be used on exported
images also, especially since this is synonymous with the JPEG format.
What is an advantage of
scaling up images before
exporting?
Scaling up images increases their flexibility for further editing, such as resizing in PowerPoint or
Word with reduced pixelation and artifacting. Furthermore, as this would be scaled up directly in
Photoshop, the exporting process would remove some of the pixelation that may be caused by this
process (depending on the quality of the assets used in the PSD).
What is a disadvantage
of scaling up images
before exporting?
This increases the file sizes of exported images, which may lead to further optimisation being
necessary when images are used on websites etc. Furthermore, any elements of the image that are
of a lower resolution than the rest will stand out once scaled up, reducing the quality of the image
until it is scaled back down outside of Photoshop (this never usually completely resolves the
problem and in some instances it offers little improvement).

20. File Naming Conventions
What naming
conventions could you
use when creating your
storyboard assets?
It would be appropriate to use a systematic naming convention for the creating of
my assets considering it is likely that there will be many PSD files necessary, as well
as exports in various other file types. Something along the lines of “Scene X Image Y”
seems to be sufficient, but adapting this system may be necessary if multiple
versions of scenes are created, for example by including the phrase “Version Z” after
the scene number.
Why is it a good idea to
accurately name your
assets?
Using a thorough naming system for my assets ensures that time is not wasted on
finding files that would otherwise be clearly visible if named correctly. Also, it
ensures greater clarity on what the file actually is and therefore reduces chances of
files mistakenly being discarded.

21. Asset Management
Why would you use
folders when storing
your assets?
The mentality needed for naming files appropriately transfers well to naming folders.
The previously mentioned strategy of naming files after their scene number (“Scene
X”) may be more suitable to include in the folder name. Therefore, less time would
be spent searching through all the scenes to find the correct version, and instead an
individual folder would contain all versions of a scene.
What folders would you
create and what would
you save within them?
Folders for each scene of the storyboard, as well as folders separating PSD and
Export file types within the scene folders would perhaps be the most effective
management system. It would allow for quick access to both images from a specific
scene, as well as the file type required at that time.