| 
|
Photoshop
Tutorial - Web Image Formats |
When creating images for a web site, it is easy to be confused over
the type of image you should be creation Photoshop gives you the option
of 'Save For The Web', but you must decide which format to use. The
following overview of image formats should help you to decide which
option to use.
Images can be categorised as being either bitmapped graphics or vector
graphics.
Bitmapped Graphics
In a standard bitmapped image, information about the colour
and brightness etc are stored as data for each pixel. Little processing
is required to display the image; each pixel is simply displayed in
turn. Bitmapped images may be compressed using a range of algorithms.
In this case, more processing is required to reconstruct the original
image.
Vector Graphics
A vector graphic file contains mathematical information used
to reconstruct an image on screen. As formulae are used, more processing
is required but the image can be rescaled without loss of quality. Vector
graphics are best used for images with distinct geometrical shapes,
for example those produced by a CAD system.
Web Graphics
Why use graphic images on a Web page?
Commonly Used Graphic Formats
- GIF - Graphics Interchange Format
This was released by Compuserve in 1987. Supports 8 bit colour - 28
- 256 colours. Image information is organised into related blocks and
sub-blocks which provide information on how to reproduce the image.
When transmitting a GIF image, a program called an encoder produces
a data stream of control and data blocks which are sent to the destination
machine. There, a decoder parses the data stream and reassembles the
image.
To enable compression of the image, GIF incorporates the LZW compression
scheme devised by Unisys. This scheme is best suited to line drawings
or graphics with a few colours. When the image is more complex, the
compression is less efficient and produces ratios of 2:1 or less.
- Transparent GIFS
A feature of GIFs is their ability to have one colour designated as
transparent. When the GIF is rendered on screen, the transparent colour
will be replaced by the page background. The image then appears to float
freely on the page.
- Animated GIFs
Originally animation was created by quickly refreshing an image with
other versions from the server. This was a complex process.
The GIF 89a standard supports
• Multiple images stored in the same file
• Instructions in the file header defining how the images should
be presented.
When the sequence of images have been created, the can be combined
as an animated GIF by most modern graphics packages.
- JPEG - Joint Photographic Experts Group
This image format stores 24 bits per pixel - 224 - 16.7
million colours. This is the best format to use for photographs where
a continuum of colour is used. The more compression that is used, the
poorer the quality of the image. When an image is decompressed, there
will be a loss of quality. However, compression ratios of 10:1 or 20:1
can be achieved without much appreciable loss in quality.
Note: always save to JPEG as the last step in using an image. Resaving
to JPEG will result in a loss of detail.
PNG - Portable Network Graphic format
This format was defined as a network standard by the W3C.
It is described as "an extensible file format for the lossless,
portable, well-compressed storage of raster (bitmapped) images. The
PNGformat represents a patent free replacement for GIF. It is a new
standard which should become more commonly used.
Lossy Compression
'Lossy' compression schemes cause an image to loose detail
when the compression algorithm is applied, ie when it is saved. This
is the cost of higher compression ratios.
GIF - Uses lossless compression
PNG - Uses lossless compression
JPEG - Uses lossy compression
Interlaced Images
It may be more acceptable to have an image appear gradually
as an improvement in quality of the total image, rather than having
it presented row by row as it is downloaded. The whole image appears
to fade in to the page, like venetian blinds closing. The user therefore
gets a sense of the whole image earlier.
- Interlaced GIFs
Most graphics packages give the option of saving an image
as an interlaced GIF.
- Progressive JPEG
This is a new type of JPEG image and it is stored as a
series of scans which together form the image. The image first appears
as a 'blocky' approximation, then becomes more detailed.
GIF v JPEG
The big question when creating your image in Photoshop is 'Which format
do I save it in?' . The choice of GIF or JPEG as an appropriate format
will depend on the circumstances.
GIF - 8 bit - lossless compression
