Images

home1 home2
 Bib
 Algorithms
 Bioinfo
 FP
 Logic
 MML
 Prog.Lang
and the
 Book

InterNet
 HTML
  Images
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.

Images (Polly Woodside)

320x320 gif 58K
by L.Allison
160x160 gif 17K
Dept Comp Sci
320x320 jpg 75% 23K
Monash Uni
160x160

left: jpg 75% 7.7K
below left: jpg 33% 4.3K
below: jpg 10% 2.3K

by L.Allison L_Allison

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]

Coding Ockham's Razor, L. Allison, Springer

A Practical Introduction to Denotational Semantics, L. Allison, CUP

Linux
 Ubuntu
free op. sys.
OpenOffice
free office suite
The GIMP
~ free photoshop
Firefox
web browser

© L. Allison   http://www.allisons.org/ll/   (or as otherwise indicated),
Faculty of Information Technology (Clayton), Monash University, Australia 3800 (6/'05 was School of Computer Science and Software Engineering, Fac. Info. Tech., Monash University,
was Department of Computer Science, Fac. Comp. & Info. Tech., '89 was Department of Computer Science, Fac. Sci., '68-'71 was Department of Information Science, Fac. Sci.)
Created with "vi (Linux + Solaris)",  charset=iso-8859-1,  fetched Friday, 29-Mar-2024 03:33:33 AEDT.