Graphics file formats

Learning Intentions

Understand the different format of graphics files
Understand the difference between certain formats

Success Criteria

I can choose an appropriate graphics file format for a given purpose

Why all the different formats?

There are many different file formats that you need to know about for this course
Each of these formats was developed for a specific reason
As web developers we often need to know what formats to use ourselves, to ensure optimal delivery of the file.

Why all the different formats?

The different formats come in all different shapes and sizes.
To put it simply, the formats all offer different features but also offer different file sizes

Compression

The word compression in a computer science context is all about reducing file sizes. Compression works by looking at parts of a file that can be removed to make the file smaller.

In terms of images, sometimes this is simply just reducing the number of representable colours or shades in an image and in other times it involves replacing repetitive data with something that tells the computer to repeat something so many times.

Transparency

One of the most common ways to compare image files is whether or not the file type supports transparency.
There are two kinds of transparency:

Semi-transparency

Full transparency

Transparency

When transparency is not supported in the file format when saved, the transparency is removed.
For example, saving an image as a JPG file when it had transparency will remove the transparency from the image.
Some file formats support only full transparency whereas other do not support it at all

Semi-transparency

Full transparency

Colour depth

Another way of reducing a file size is to reduce the colour depth of it.
The colour depth is how many different shades of colours the image can store/represent.
For example, GIF only supports 8-bit colour depth, thus can only represent 256 shades in a single image, whereas JPG supports 24-bit colour depth and therefore can represent 16, 777, 216 colours.
The colour depth of certain files is limited by the file type of the file.

PNG

Portable Network Graphics (PNG) is one of the most commonly used format on the internet.
The main reason for it's wide adoption is that it supports decent compression and also supports good quality
PNG files are considerably larger than GIF or JPEG files but support better colour and lower compression, thus better quality.
PNG files also offer semi and full transparency

PNG

Portable Network Graphics (PNG) is one of the most commonly used format on the internet.
The main reason for it's wide adoption is that it supports decent compression and also supports good quality
PNG files are considerably larger than GIF or JPEG files but support better colour and lower compression, thus better quality.
PNG files also offer semi and full transparency

JPEG

Joint Photographics Expert Group (JPEG) is a file type that is designed to compress an image by removing parts that the human eye cannot see
It is most commonly used for photographs due to its smaller file size and decent quality
Compared with PNG, JPG files are considerably smaller, have similar quality but do not offer any transparency

JPEG

Joint Photographics Expert Group (JPEG) is a file type that is designed to compress an image by removing parts that the human eye cannot see
It is most commonly used for photographs due to its smaller file size and decent quality
Compared with PNG, JPG files are considerably smaller, have similar quality but do not offer any transparency

GIF

Graphics Interchange Format (GIF) was developed for transferring images from computer to computer, primarily from a webpage to a client computer.
To reduce the file size, GIF only stores 256 different shades of a colour, making it an unsuitable format for photographs.
GIF does support full transparency and is ideal for storing logos with very few colours

GIF

Graphics Interchange Format (GIF) was developed for transferring images from computer to computer, primarily from a webpage to a client computer.
To reduce the file size, GIF only stores 256 different shades of a colour, making it an unsuitable format for photographs.

SVG

Scalable Vector Graphics (SVG) is a file type unlike the others.
Instead of storing an image per se, SVG stores details about shapes in an image. This is called a vector graphic.
As a result of this, SVG is unsuitable for storing photographs and is most commonly associated with logos.
SVG code is very similar to HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 300 300">  <polygon points="300,150 256.1,256.1 150,300 43.9,256.1 0,150 43.9,43.9 150,0 256.1,43.9" class="shape-element" fill="rgb(255, 0, 0)" style="stroke-width:3;stroke:rgb(0,0,255)"></polygon></svg>

Animation

Animation is a way of making image seem like they are moving by having multiple images running in quick succession
GIF and PNG are the two main formats that support animation.

Answer the following questions:

Which format supports only full transparency?
Which format does not support transparency but has very small file sizes?
Which format supports animations and uses high-colour depth?
Which format supports animations and uses low-colour depth?
Which format is a vector graphic type?

Graphics file formats

Learning Intentions

Success Criteria

Why all the different formats?

Why all the different formats?

Compression

Transparency

Transparency

Colour depth

PNG

PNG

JPEG

JPEG

GIF

GIF

SVG

Animation

Review questions