Web graphics

Bitmaps and vector graphics are the two types of representation for storing graphics data. Bitmaps store a set of numbers for each pixel in an image whilst the alternative vector graphics stores a mathematical description of the picture as a collection of geometrical shapes.

The motivation is to digitise graphics data using efficient compression techniques. The challenge is to devise an algorithm that on balance is effiecient for the variety of graphics formats from a simple line drawing to a high resolution image. There is also the complication of animation, transparency, and the range from a few hundred to several billion colours. It is not surprising therefore to see such variety of formats; png, jpg, gif, and so on. These formats cater for different types of graphics from pictures with a fine colour gradient to diagrams. Choice of which graphics format to use is often a trade off between the file size and the quality of the graphics.

Which graphics format should I use?

The short answer is PNG! Generally, the following guidelines apply:

GIF (8 bit, 256 colours, loss less*, supports transparency and animation)
Suitable for: icons, logos, animated banners, cartoon graphics
JPEG (24 bit, 17 million colours, lossy*, does not support transparency nor animation)
Suitable for: photographs, graphics with colour gradient
PNG (8, 24, 32 bit, 4 billion colours, lossless, supports transparency, no animation)
general purpose

*Lossless compression means the graphics can be uncompressed to its original state whereas lossy compression is not reversible and some information may be lost permanently.

PNG, 1.3 MB
GIF, 0.3 MB
JPG, 0.4 MB

Maximise the browser window and zoom in (Ctrl +) to over 250% and see the differences in the enlarged pictures. Hover over each and note the type and size of the file. Note the colour quality in each image.

Exercise – Graphics

  1. In the portfolio wd folder, create a graphics.html file.
  2. Take a high resolution photograph. Use Gimp (or your favourite graphics editor) and scale the image to 100px by 100px. Save the image in its original format.
  3. Export the image as JPG, PNG and GIF and insert the images into the graphics.html file.
  4. Validate the graphics.html file.