File Formats and Terminology
Different 2D file formats, such as GIF, JPG (or JPEG) exist. Depending on the software it is possible to
modify images, and convert from one format to the other. Here are some definitions:
File extensions
All files and documents have a file extension (some versions of Windows make these invisible, but they
are still there). A file extension is a like a ‘tag’ or label that tells the computer what sort of file it is (e.g. a
graphic) so that it knows which program to use to open or display it. JPG (known as JPEG) and GIF are
common web or network image formats:
e.g.
mypicture.jpg
mylogo.gif
In order to create a file with the file extension you want, you have to use a program that allows you save
in the format that uses the file extension. For example, you can create a file with a .docx extension in MS
Word but you cannot create a file with the extension .jpg in MS Word (you have to use Adobe Illustrator
or a similar graphics programme for this).
GIF (GIF87 and GIF89a)
GIF (Graphical Interchange Format) was developed by CompuServe for the fast transfer over modem lines
and widely used in publishing. It is possible to allocate transparency to a single colour as well as create
animated graphics (format GIF89a). An interlaced GIF (Graphics Interchange Format) is a GIF image
displays like an image coming through a slowly-opening Venetian blind.
GIF images are limited to 256 colours maximum, but it is possible to specify the range of colours in the
colour palette between 2 and 256 colours.
Interlaced Files (GIF’s)
A interlaced imaged is an image that when opened or loaded, loads every other line (like an image
coming through a slowly-opening Venetian blind) until the image arrives at its full resolution. This method
of loading images is most commonly noticed with slow internet connections when loading an image.
When saving to GIF format the graphic can be specified with or without this format.
JPG (JPEG)
JPG (Joint Photographic Experts Group) has a range of over 16 million colours (24 bit colour). JPG images
can be compressed and are used for web publishing because they are easy to transfer over a network
(e.g. on a web page or an email).
A “progressive JPEG” is the JPEG equivalent of the interlaced GIF Graphics Interchange Format. It's an
image created JPEG compression that will "fade in" in successive waves of lines until the entire image has
completely arrived. Like the interlaced GIF, a progressive JPEG is a more appealing way to deliver an
image at modem connection speeds. Users with faster connections are not likely to notice the difference.
The JPG format uses lossy compression.
A JPG file can be compressed to smaller size for quicker downloading, or to fit more images on a disk.
When the user opens the file up to display the image, the file has to decompress itself and some of the
original image quality may be lost as a result (however in most cases the difference is barely noticeable).
‘Lossy’ compression
Lossless and lossy compression are word used to describe whether or not, in the compression of a file, all
original data can be recovered when the file is uncompressed. Lossy compression is generally used for
video and sound, where a certain amount of information loss will not be detected by most users.
The JPEG format is an image that has lossy compression. Using JPEG compression, it is possible to set
the percentage compression (decrease file size but with, sometimes undetectable, loss of quality),
therefore reaching a trade-off between file size and image quality.
GIF is a file format that provides lossless compression
BMP (Bitmap) (Raster Graphic)
Raster graphics are digital images normally created or captured (e.g. scanning or downloading from
digital camera). A raster is a grid of coordinates (e.g. x, y, z) on a display space. A raster image file
identifies each co-ordinate’s values for monochrome or colour.
The raster file is sometimes referred to as a bitmap because it contains information that is directly
mapped to the display grid.
A bit map (often spelled "bitmap") defines a display space and the colour for each pixel or "bit" in the
display space. A ‘map’ is used to record data such as colour and intensity for every pixel that makes up
the image.
Raster files may loose detail if modified by software (e.g. by re-sampling or enlarging). Because a bit
map uses a fixed or raster graphics method of specifying an image, the image cannot be immediately
rescaled by a user without losing definition (i.e. enlarging the image will often make it look more fuzzy
and grainy).
Examples of raster image file types are: BMP, TIFF, GIF, and JPEG (JPG) files. Raster graphics formats
have more in common with allowing users to create artwork on the computer screen as if they were
painting on a real canvas. Raster graphics can also be digital images created or captured (for example,
by scanning in a photo). A program such as Photoshop and, Corel Photo-Paint allows you to work with
bitmap or raster images.
Examples of graphic image file types that contain bit maps:
GIF JPEG TIF (or TIFF) BMP -
Graphics Interchange Format
Joint Photographic Expert Group
Tagged Image File Format
Bitmap format
TIF (TIFF - Tagged Image File Format)
Tagged Image File Format, developed mainly by Aldus. This is a raster or bitmap format, widely used and
recognised by Apple and PC and a file format used for scanned images.
PNG (Portable Network Graphic)
Picture Network Graphic is a format developed as an alternative to .GIF and .JPEG files. PNG supports
true colour as well as paletted-based graphics. It uses an advanced lossless compression system and also
supports full transparency.
Dithering
Dithering is the attempt by a computer program to approximate a colour from a mixture of other colours
when the required colour is not available. A requested colour will be created from an approximation
composed of two or more other colours. The result may or may not be acceptable to the user. It may also
appear somewhat grainy. Dithering also occurs when a display monitor attempts to display images
specified with more colours than the monitor is equipped to handle.
Web safe palette
In creating Web pages, the number of RGB values that are recommended for use is considerably reduced
- first, by the fact that some displays can handle only 256 colours and, secondly, because PC and Mac
Web browsers handle 40 of these 256 colours slightly differently. In order to ensure that your colours
will be consistent on both browsers, a palette of the 216 colours common to both PC and Web browsers is
recommended. Any colour outside of these will be dithering (approximated).
Vector Graphics
Vector graphics are digital images drawn using a sequence of commands or mathematical statements that
place lines and areas of colour. A vector is a representation of both a quantity and a direction. A vector
graphic is created and saved as a sequence of vector statements.
Programs such as Flash, Illustrator, CorelDraw create vector graphics. Clip art is also a vector geaphic
A vector graphic image is designed to be quickly rescaled (resizing it makes the image redraw itself
mathematically thus no definition is lost). Typically, an image is created using a vector graphics program
(e.g. Adobe Illustrator or CorelDraw) and when the artist is satisfied with the image it is often then
converted to (or saved as) a raster graphic file or bitmap image.
Examples of vector graphics file formats:
EPS AI CDR WMF FLA SVG -
Encapsulated PostScript (Adobe Illustrator)
Adobe Illustrator file
CorelDraw File
Windows Meta File
Flash files
Scalable vector graphic (text based files creating a vector graphic)
EPS
Encapsulated postscript format - some graphics, such as brochure or poster designs have file formats that
allow then to be resized easily and are useful for publishing, e.g. EPS format. File sizes tend to be large.
EPS is a vector format which can store images without any loss in quality and is therefore favoured by
printing companies. If you create artwork you need to send it in EPS format to be printed.
RGB
RGB (red, green, and blue) refers to a system for combining red, green, and blue colours, or channels, to
create 1000’s or million’s of colours on a computer display. Levels of R, G, and B are represented by the
range of decimal numbers from 0 to 255 intensities (256 levels for each colour), equivalent to the range
of hexadecimal 00 to FF. The higher the number the more intense the colour.
The widest number of available colours is 256 red x 256 green x 256 blue, or 16,777,216 possible colours
(nearly 17 million colours, known as True Colour, but still less that what the human eye can see
though).
In binary format, 255(in decimal) is represented by the binary number 11111111 (each ‘1’ represents a
Bit, so there are 8 bits in this number). Each of the red, green and blue colours uses 8 bits to describe it.
As there are 3 colours, 3 * 8 bits = 24 bits. An RGB graphic uses all 3 channels or colours and is
therefore considered to be 24 bit. An example of how the binary number 11111111 can be counted in
decimal is as follows:
Dec
Bin
128
1
64
1
32
1
16
1
8
1
4
1
2
1
1
1
= 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1
= 255 (decimal)
In order to be able display any of the 16,777,216 colours the computer monitor must have 24 bits to
describe the colour in each pixel. If the monitor cannot display 24 bit colour, the colours are
approximated and therefore will not be true.
In the Hypertext Markup Language (HTML), colours are expressed by an RGB with six digits in
hexadecimal format (proceed with #). The first and second digits represent the red level; the third and
fourth digits represent the green level; the fifth and sixth digits represent the blue level.
The hexadecimal system uses multiples of 16 (hexadecimal) where as the decimal system uses multiples
of 10 (decimal). Numbers can be converted to hexadecimal and vice versa, e.g.:
Decimal:
1
2
3
4
5
6
7
8
9
10 11 12 13 14 15 16 17 18 19 20 21
Hexadecimal (#):
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
10 11 12 13 14 15
For example, blue would be: #0000FF or (Red:0, Green:0, Blue:255)
#16
#1
Hexadecimal:
Amount of Red: 00
Amount of Green: 00
Amount of Blue: FF (hex) = 15 * 16 + 15 = 255 (Dec)
F
F
=255(decimal)
Examples of different file formats
JPG Format:
castle.jpg
Non-compressed
133kB
castle.jpg
Compressed by 50%
21kB
castle.jpg
Compressed by 85%
12kB
castle.gif
Reduced palette (16 colours)
33KB
castle.gif
Web safe palette (216 colours)
45KB
GIF Format:
castle.gif
Optimised palette (256 colours)
84kB
Links:
www.lynda.com/hex.html - Browser safe colours
www.wpdfd.com/reference.htm - Reference information regarding design matters
www.irfanview.com - smaller but very useful freeware graphics editor