Digital Graphics File Formats

Joe Young

Raster Graphics

Raster graphic are made up entirely of bitmaps, bitmaps are a graphic that are made up of pixels. Each pixel records the colour information of that section of the image.

Vector Graphics

Vector graphics are made up of vectors (paths and strokes) vector graphics are defined by a start and end point with curves, points and angles between them

From this information the path can become a line, square and triangle or a curvy shape.

Raster Graphics

JPEGStands For Joint Photographic Experts Group

Used For/Example Used for the majority of pictures on the web. Used on big sites such as Facebook etc. The standard for pictures on the internet.

Advantage Small file size, Is used by the majority over the internet. All modern web browsers support this file format.Supports conversion so other file formats can be converted into a JPEG such as a PSD file.

Disadvantage Picture will begin to lose quality after, multiple edits performed on it, this is due to compression and recompression.

TIFFStands For Tagged Image File Format

Used For/Example Desktop publishing, Adobe InDesign.

Advantage Can save multi-page documents to a single TIFF file, when compressed will not loss any quality.

Disadvantage TIFF files cannot be opened by everything and usually have bigger file sizes especially compared to JPEG.

GIFStands For Graphics Interchange Format

Used For/Example Used to create short digital animations using a series of images. Used mostly by animators and the general public to share home videos.

Advantage Can be used as an alternative to video while serving the same purpose with a smaller file size and continuous loops.

Disadvantage Kind of deemed useless by video platforms such as YouTube that has plenty more features and options for content creators. GIF files only support 8-bit colours while other file formats such as PNG and JPEG allow for the use of 24 bit colours allowing more complex shades to be shown.

BMPStands For Bitmap Image File

Used For/Example Photography and art.

Advantage No loss in compression, a universal file type and very good photo quality if not resized. Bitmap files may be easily created from existing pixel data stored in an array in memory.

Disadvantage When using the bitmap file format you are always going to be left with a very large file size meaning that it can take a long time to send/receive bitmap files and also when resizing an image (especially enlarging) is it hard for the image to not become pixelated.

Vector Graphics

PSDStands For Photoshop Document

Used For/Example Photoshop is used for image manipulation and in the industry you will see it frequently used for front covers of magazines and film posters etc.

Advantage The file format will support transparency which all other file formats do not.Uses vectors so pixilation won’t be a problem.

Disadvantage Intricate designs will have the potential for massive file sizes.Photoshop is required to view the files unless converted to another file format such as JPEG.

AIStands For Adobe Illustrator

Used For/Example Creating logos for company use.

Advantage Can be scaled big and small as vectorshave no loss in compression. It comes with a user interface that allows custom viewing and enables space saving.

Disadvantage Similar to Photoshop AI files can only be viewed by the program itself and would need to be converted to send to outside parties.

FLAStands For Flash File

Used For/Example Generally used to create animations and games, usually on a web page.

Advantage These files can include sound and video and can produce high quality files while also maintaining a small file size. Flash files have multiple uses they can be used for movies, banner ads, online presentations etc. There is a variety of video file formats that can be easily converted to flash.

Disadvantage Creating content for flash generally can cost a lot of money and be very time consuming. When visiting a web page that contains flash files, visitors of that web page may experience a longer load time.

WMFStands For Windows Metafile

Used For/Example Similar to AI files in that it can be used for logo creation.

Advantage Again can be scaled big and small as vectors will always have no loss in compression, however uniquely WMF files can contain both vector and bitmap components.

Disadvantage A very simple file type which lacks the features to create complex files like Photoshop, out-dated.

File Format Capture and Optimising

CompressionDefinition The way in which file sizes are reduced by

reducing the amount of information that is saved.

Advantage Downloading and viewing images from awebsite will be a lot easier and quicker if the image is compressed.

Disadvantage Images become more pixelated as they are compressed because they will have a smaller amount of coloured squares each time.

Image CaptureMethod Scanner

How is it used for image capture of graphics

A scanner can digitise physical images like sketches, physical photos and mixed media products.

Method Camera

How is it used for image capture of graphics

A camera can take pictures and allows for them to be transported onto a computer and subsequently the web.

Method Graphics Tablet

How is it used for image capture of graphics

A graphics tablet allows you to control the mouse like a pen, this allows for enhanced controls when performing actions like drawing, selecting and digital handwriting.

OptimisingWhy would you optimise? Optimising allows you to upload images to

the internet for easy viewing.

How can you optimise? The most common way of optimising an image is to use a website that will do the job for you

Advantage to optimising Images that are not optimised will have a large file size, this means that downloading this image will take a lot longer. If you feature an optimised image on your site then you will be helping to greatly reduce the load time of that site.

Disadvantage to optimising Optimised images will have a reduced bit depth and a reduced image size, this subsequently will reduce the resolution of the image.

Storage

File SizeWhat could affect a Working Scale (Photoshop) document file size?

The main problem will come from the amount of layers and effects that you have featured on your image.

How could you reduce the file size of a Working Scale document without

affecting quality?

Some ways you could reduce Photoshopfile sizes is by merging and flattening layers and also making sure you are only keeping the essentials of the image, another thing you can do is rasterize smart objects.

What is an advantage of scaling up images before exporting?

In raster graphics, scaling up the image will make the image seem more soft and less pixelated.

What is a disadvantage of scaling up images before exporting?

Like many of these, the disadvantage of scaling up images is the obvious increase in file size.

File Naming ConventionsWhat naming conventions could you use when creating your video game assets?

A file name should be relevant to the purpose it serves, this helps in making files recognisable from other ones.

In similar fashion when using PSD it helps to name each layer to something conforms to the actual feature such as; Tree, Path, Door etc.

Why is it a good idea to accurately name your assets?

Accurately naming your assets allows to quickly find the exact thing that you're looking for and also if you pass your project on for someone else to look at then they can quickly become accustomed to your project.

Asset ManagementWhy would you use folders when storing

your assets?Using folders can help generally organise your files when dealing with a great amount of files and file types.

What folders would you create and what would you save within them

Personal files: I place to separate your recreational files from work

College: All text based files that you work on at college.

Photoshop: A place to create all of your Photoshop creations, work or play.