Page 201 - DCAP303_MULTIMEDIA_SYSTEMS

Unit 12: Image Format

introduction notes

When developing a Web site you may not think much about what image format you use but
you could end up saving yourself or your organization a chunk of change in bandwidth costs by
making your choice more wisely. On the Web today there are three main image format types to
choose from and all have their advantages and disadvantages. You have a choice of three different
compressed image formats: GIF, JPEG or PNG. They each use different techniques to compress
the image information.
Gif
The GIF uses a lossless compression which means that no quality is lost in the compression. The
uncompressed image stores its information in a linear fashion. Each line of pixels is read from
left to right. An interlaced GIF file stores the lines of the image in a different order. First lines 4,
8, 12, 16 and 20 may be read in. Then lines 2, 6, 10, 14, and 18 and soon until the entire image is
read. When the image is read in this way, a user with a slower internet connection may be able
to understand or read the image before it has fully loaded.

The GIF format achieves its compression by removing repeated patterns within the GIF file and
storing references to these sections in a list, also known as a hash. Images with horizontal lines
of the same colour or pattern benefit most from the GIF format. This would include images like
background graphics, images with text and patterned images.
Another great advantage is the ability to create animated images. You have no doubt seen them
throughout the internet. Especially if you were around for the heyday of the 90’s! An animated
GIF is essentially a sequence of GIF files with some timing information included. Animated GIFs,
however, can run into large file sizes awfully quickly and with very few frames of animation.
While it may be a fairly ubiquitous format, if you have to do animation, you may be better off
going with Macromedia Flash. If one frame is 15 kB then 20 frames could suddenly find you well
over 100 kB just for one animated image.

Another advantage to GIF files is transparency. A colour within the colour table can be selected as
the transparent colour. In doing so, wherever that colour occurs, you will be able to see through
to the HTML background. One of the largest downfalls to the GIF format is its inability to have
a colour palette of more than 256 colours. This can create poor-looking images when used on a
photograph which may originally have thousands of different colours.

JpeG
JPEG uses a loss compression which means that image quality is lost in the process of compressing
the image. The JPEG compression works by first converting the image from RGB to YUV which
stores information about each pixel using brightness, hue and saturation. Then it reduces the
amount of information it stores for hue and saturation since differences are less noticeable to the
human eye. In trying to decrease the file size of the JPEG (for example, when using the quality slider
in Photoshop), you will tend to notice artefacts occur in flat colour areas and especially near edges.
As a result, JPEG is best used for images that have more of a variation in colours. For example,
images with gradients or photographs can handle a lower quality setting with little noticeable
loss in quality. Images with text or large solid backgrounds are best left for GIF or PNG.
pnG
The PNG is the relative newcomer to the list of available image formats and it is a formidable one.
It is similar to GIF in many ways but even better in others. It is lossless like GIF but supports 24
bit colour, unlike GIF which only supports 8. The PNG supports alpha transparency, whereas
GIF only supports one-colour transparency. The PNG uses various compression filters to
minimize overall image size and can apply different filters on a per-line basis to achieve higher
compression. The big attraction to PNGs is its ability to do alpha transparency. Unfortunately,
Internet Explorer currently does not have full support for it, although there are hacks out there
that can pull it off.

LoveLy professionaL University 195