FIT3084: Images


In the previous lecture:

In this lecture:


After Lynx the introduction of the Mosaic web browser brought with it inline image display...

Another web spider

...and the Web has never been the same since!


Images used as...

Special considerations...


What is a digital image?


Lossy and Lossless Bitmap Image Compression

Simple (but space hungry) to write every pixel value into a file as either


Compression schemes

Lossy schemes

Lossless schemes

Skull image - captured using a camera.

skull lossless compression (GIF)
GIF
38 kBytes (lossless*)

skull lossy compression (50% JPEG)
50% JPEG
4 kBytes (lossy)

skull lossless compression (25% JPEG)
25% JPEG
2.5 kBytes (lossy)



Spider image - synthesized digitally.

spider lossless compression (GIF)
GIF
15 kBytes (lossless*)

spider lossy compression (50% JPEG)
50% JPEG
3 kBytes (lossy)

spider lossly compression (25% JPEG)
25% JPEG
2 kBytes (lossy)

 

Text image - synthesized digitally.


GIF (lossless)

JPEG (lossy)
Under very high compression to accentuate the edge artefacts

Image Formats With Web Browser Support

Image Format Attributes

 

GIF87a

GIF89a

JPEG

Progressive
JPEG

PNG

Lossless Compression

X*

X*

-

-

X

Transparent Backgrounds

-

X

-

-

X

Interlacing

X

X

-

X

X

Animation

-

X

-

-

-

Maximum colours

256

256

16.7 mill.

16.7 mill.

16.7 mill.

Transparent Image Backgrounds

  • User-selected colour rendered transparently

  • Browser background shows through

  • Hides rectangular image border
The image left (which has a transparent background) can easily be displayed in two different table cells, each with its own background colour showing through.

Image Interlacing

GIF Animation

  • Sequence of image frames stored within GIF89a file

  • Frames displayed in sequence by browser

Thumbnail Images

  • Scaled down version of larger image

  • May be hyperlinked to larger image

  • Loads (much) faster than larger image

  • Consume less screen space than larger image

  • Provides preview of larger image

  • Useful in gallery setting

  • Useful as buttons & icons

  • Example: above

* Footnote: GIF is lossless only if the source image has 256 colours or less!


Image maps


Backgrounds



This lecture's key point(s):


Courseware | Lecture notes

©Copyright Alan Dorin 2008