FIT3084: Images

In the previous lecture:

• Colour is not something to be added lightly to a website or multimedia work.
  
• Things to consider include:
  colour effects, colour meanings, colour relationships, practical issues relating to colour and the web.

In this lecture:

• Image file formats & compression schemes
  
• Uses for images
  
• Improving the user's experience of your image content

The Lynx web browser was text only and used the arrow keys to navigate between links.	The Mosaic web browser allowed for inline images and mouse clicks to select hyperlinks. It really changed the way people thought about the WWW!

Images are now used as...

• Inline decoration
• Backgrounds
• Buttons & icons
• Space dividers
• Navigation tools (image maps)

Special considerations...

(File) Size does matter (and smaller is better!)

	XHTML image tag WIDTH and HEIGHT specification accelerates browser page layout and can be used to scale an image up or down uniformly,
or non-uniformly!
Scaling an image in this way does not make it any faster (or slower) to download. File size remains unchanged, only the screen space the image occupies is altered. The image may look pixellated if scaled up too large.

Accessibility

• Specify image tag attribute ALT = "Text for browsers not displaying images"
• Images cannot be interpretted by text-to-speech or Braille software.
• Images may not be interpretted by people with visual difficulties including elderly or blind web-surfers.
• People who are colour-blind may have difficulties interpretting some images, especially coloured graphs and charts.
  

Use images wisely and carefully so that where possible, their functionality is duplicated using other means.

Examples of legal cases concerning accessibility issues: airline companies, Sydney Olympics organizers.

Bitmap images* - the historical WWW standard, supported by all current web browsers

Object-based / Vector images - supported directly (in the form of SVG) by browsers other than Microsoft Internet Explorer

SVG : Scalable Vector Graphics (based on XML) Collection of geometric shapes: lines; ellipses; rectangles; polygons. These are usually edited with interactive software by moving control points, at line mid / end points or shape vertices. Enable redrawing image at any resolution. Result in very small file sizes.		Bitmap of a vector image (control points marked)
A sample SVG document from w3schools... <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> ...that looks like this (only viewable by SVG enabled browsers or a plugin).
In your own time:	Use your browser controls to zoom in closely on the SVG image (above). Do the same with the bitmap version of the circle (right). What is the difference?

Lossy and Lossless Bitmap Image Compression

It is simple (but space hungry) to write every pixel value into a file as an R, G, B triple (refer to the lecture on colour for details)
Or, each value stored in the image file is an index into a colour table or palette holding the colours used in the image. For this image, with this palette, 255 = Black 044 = Red 000 = White

Compression schemes

Lossy schemes

• Discard pixel information
  (Very high compression rates)
  
  
• Reconstruction by approximation
  
  
• Range of quality / compression trade offs
  (The better the compression, the worse the quality. Compression usually specified within JPEG images as a percentage from 0% (low quality) to 100% (high quality))
  
  
• Often suitable for images captured from conventional camera / video
  (Compresses well, artefacts invisible)
  
  
• Often unsuitable for digitally synthesized images
  (Artefacts / degradation visible)
  
  

Lossless schemes

• Do not discard pixel information
  
  
• Reconstruction by calculation (exact)
  
  
• Often unsuitable for images captured from conventional camera / video
  (compresses poorly)
  
  
• Often suitable for digitally synthesized images
  (compresses well)
  
  

Skull image - captured using a camera.
GIF 38 kBytes (lossless*)	50% JPEG 4 kBytes (lossy)	25% JPEG 2.5 kBytes (lossy)
Spider image - synthesized digitally.
GIF 15 kBytes (lossless*)	50% JPEG 3 kBytes (lossy)	25% JPEG 2 kBytes (lossy)
Text image - synthesized digitally.
GIF (lossless)	JPEG (lossy) Under very high compression to accentuate the edge artefacts

• GIF - Graphics Interchange Format
• JPEG - Joint Photographic Experts Group
  
• PNG - Portable Network Graphics
  

Image Format Attributes

Transparent Image Backgrounds

User-selected colour rendered transparently Browser background shows through Hides rectangular image border

Image Interlacing

• Browser downloads & displays image progressively in bands. This can reduce wait time for image preview.

GIF Animation

Sequence of image frames stored within GIF89a file Frames displayed in sequence by browser

Thumbnail Images

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

Image maps

• May be used to fill an entire screen - beware of download time!
  
  
• May be used as a button bar
  
  
• Easy way to develop a custom interface
  
  
• Consist of (i) image, (ii) map regions, (iii) software returning appropriate URL
  
  
• Example: see lecture on basic HTML

Backgrounds

Uniform background colours and appropriate text / link colours may be specified as attributes of the XHTML BODY tag:

bgcolor="#RRGGBB" link="#RRGGBB" vlink="#RRGGBB" alink="#RRGGBB"

Or a background image specified: BACKGROUND="imageName.GIForJPEG"

Use background images with uniform and subdued colours
	and contrasting text!

Use small, seemlessly tiled images to save background download time. (Instead of single huge background images)

• Reduce image file sizes with an appropriate compression scheme.
  
  
• Use tricks like interlacing, thumbnails, ALT, WIDTH and HEIGHT attributes to improve the user experience of your image content.

Courseware | Lecture notes

©Copyright Alan Dorin 2009