|
- Important Matters:
- gif and jpg formats
- image size, file size, compression
- loading time, image quality
|
Image size (in pixels) and compression each have an effect on
the size (in bytes) of image files.
Remember that the number of pixels in an image is proportional to the
area of the image.
Two image file formats are popular on the world wide web -
gif and jpg (aka jpeg).
An image might be viewed on a large (1200x1000) screen
or a small screen (640x480). It might be a high resolution or
a low resolution screen.
The computer might have 8-bit, 16-bit or 24-bit graphics.
It might even have a grey-scale screen.
The image might be printed on a black and white printer
or on a colour printer.
On top of this, the human perception of images is a complex matter.
It is difficult to provide computer images that
look good under all
circumstances.
The 320x320 75% jpg image file is less than half of the size
of the corresponding gif file.
This means that it will load twice as quickly across the Internet.
A 320x320 pixel image contains 102,400 pixels, about 100K pixels.
Gif format uses a colour map of up to 256 entries.
Each colour map entry specifies a colour as full RGB,
so a colour map occupies up to 0.75K.
For each pixel in the image, the number of the best matching
colour map entry is given; this takes (at most) 1-byte per pixel,
less if the colour map contains fewer than 256 colours.
In addition a simple compression scheme is used that can
compress "runs" of flat colour.
The 320x320 gif image file (100K-pixels) occupies 58K of storage.
Generally speaking jpg
gives much better compression of colour photographs than gif.
Jpg uses a more sophisticated compression scheme.
It has an adjustable compression parameter which allows
the user to influence the amount of compression.
However at high compression there is a noticeable quality loss
and "blockiness" becomes obvious.
320x320 Images
(Polly Woodside) |
gif, 58K
|
jpg 75% 23K
|
jpg 33% 12K
|
jpg 10% 6K
Artefacts of the compression can be seen in this image.
Look at the sky around the yard-arms.
|
The high compression (33% and 10%) jpg's above
may not print as well as the gif and the high-quality (75%) jpg,
particularly on a black and white printer; this depends on the browser.
Jpg can take advantage of areas of smooth flat colour in an image
to get greater compression.
For example, sky and sea usually compress well with jpg:
320x320 Images
(Sky) |
gif, 59K
|
jpg 75% 6K
|
jpg 33% 3.5K
|
jpg 10% 2.7K
Note the artefacts from the extreme compression in this image.
|
Foliage, grass and other complex textures contains a lot
of fine detail and compresses less well with jpg:
320x320 Images
(Foliage) |
gif, 58K
|
jpg 75% 13K
|
jpg 33% 7K
|
jpg 10% 4K
|
If you print the foliage images on a black and white printer
you will find that they appear dark and lose most of their detail
compared with the colour versions.
This tends to happen with those images in which colour rather than brightness
conveys most of the image detail.
[Line Art]
|
|