Web Multimedia
These are notes on website design for The Australian National University course "Networked Information Systems" (COMP2410 / COMP6340) in 2009. This section of the course is prepared and presented by Tom Worthington FACS HLM.
Three commonly supported image formats for the web are:
- GIF (Graphic Interchange Format)
- PNG (Portable Network Graphics)
- JPEG (Joint Photographic Experts Group)
Unlike audio and video, there is a specific HTML tag for images. Note the use of the ALT attribute providing a text alternative if the image can't be seen:
<img src="http://styles.anu.edu.au/_images/ANULogo.gif" width="150" height="70" border="0" alt="The Australian National University">
From: ANU College of Engineering and Computer Science, ANU, 2009
GIF and PNG are lossless compression, indexed color formats. Gif has an 8-bit palette with a maximum of 256 colors, PNG has an 8 to 24-bit palette for "true" colour images. These suit graphics with areas of flat colour, such as logos, icons and line art.
The number of colours used can be reduced to reduce the file size. GIF and PNG are less suited for photographs. The formats allow for part of the image to be transparent, with the background colour to showing through. PNG also has a 16-bit gray-scale palette suited to images such as medical x-rays.
JPEG is a lossy 24-bit format, suited to photographic images and drawings with gradations of colour. The level of compression used for JPEG can be set to reduce the file size.
As not all devices can display images and not all users can see them, any important information conveyed by an image should also be described in an alternative format, such as text, in the web document.
Bit Mapped Images
GIF, PNG and JPEG are all bitmapped (raster) image formats. The images are made of a grid of square single colour pixels. Some techncial applications, such as architectural blueprints, require vector graphics, made of lines and geometrical shapes. Scalable Vector Graphics (SVG) was created as a W3C standard to support such applicators, but is not widely implemented.
Image resolution of bit-mapped images are measured in pixels per inch (ppi). Computer monitors typically have a resolution of 72 ppi (the px lenght measure of CSS), or less. Smart phones have an effective resolution much lower than this. Low cost printers have a resolution of 300 to 1,000 ppi.
To reduce the size of files downloaded, images should be provided at the minimum resolution usable. A common mistake is to provide images to suit very high resolution printing at many thousands of pixels per inch, when few users of the web site will have such a printer.
Colour Images
Computer monitors combine red, green, and blue light (RGB) in to create a range of colours. The range of colours available differs between monitors, operating systems and versions of HTML.
The colour depth is the number of colours which can be displayed simultaneously. Most desktop monitors can display: Truecolor (millions of colours), Highcolor (thousands of colours), or Indexed colour (256 colours or fewer). Smart phone displays may be able to display 256 or fewer colours and some devices can only display two colours (black and white).
Truecolor uses 24 bits of information per pixel, 8 bits per colour channel (red, green, and blue), allowing for 16,777,216 colours.
Colour can be expressed as a numerical value or a name. name and by numerical value. All the following are blue:
p {color : blue;} p {color: rgb(0,0,255);} p {color : #0000FF;}
Indexed colour systems have a limited pallet of colours (256 for an 8 bit system) which can be displayed at one time. The pallet may be selectable by the user, or set by the operating system, screen hardware or version of HTML used.
A palette of "Web-Safe Colorsweb safe colours" common to the Apple Macintosh and Microsoft Windows systems was developed. Most modern desktop systems can display true-colour, but the web pallet may be useful for smart phones. Early versions of HTML had names for hundreds of colours, which could be used in place of the numerical values. Later versions have only 16 names for commonly used colours.
| Colour | Name | Value |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| Blue | #0000FF | |
| Green | #008000 | |
| Teal | #008080 | |
| Lime | #00FF00 | |
| Aqua | #00FFFF | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| Silver | #C0C0C0 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Yellow | #FFFF00 | |
| White | #FFFFFF |
Pictograms
Images can be used as pictorial representations of an objects: pictograms. Some disabilities, such as Aphasia, involve problems reading text and graphics can improve access. Pictograms also are useful for international communication.
Pictograms are commonly used for transport (United States Department of Transportation DOT pictograms) and for the Olympic Games.
Pictograms with hypertext links can be used in web pages as computer icons. For touch screen devices, such as smartphones, the icons can be made large enough to act as press buttons.
Audio
As with graphics, different audio file formats allow different levels of fidelity and compression techniques.
As not all devices can play audio and not all users can hear, any important information conveyed by audio should also be described in an alternative format, such as text, in the web document.
Audio files, such as MP3 format, can be linked in the same way as other file types:
<a href="http://rait.anu.edu.au/FOO/AUDIO/00-KevinRudd.mp3">00-KevinRudd.mp3</a>
From: Video and Audio of the Open 2020 Summit Presentations, address from Kevin Rudd, Prime Minister of Australia (audio), 2008
The <object> tag can be used to provide more control over the video in the browser, with controls for starting, stopping and fast forwarding included.
Common terms used for audio:
- Sampling rate: number of samples of the audio, usually measures in thousands per second (kilohertz or kHz). Standard sampling rates range from 8 kHz for low telephone quality speech recordings to 44.1 kHz used for CDs.
- Bit depth: resolution of the amplitude of the sound file. 8-bit is used for telephone quality speech, 16-bit for CD quality music up to 48- bit for very high quality.
- Channels: Mono (one channel) is commonly used for speech recording, and stereo (two channel) for music. More channels may be used for surround sound.
- Bit rate: Usually in kilobits per second (Kbps) may be fixed or variable depending on the use of compression. To allow the files to play in real time ("stream") the speed of the Internet connection used must, on average, be equal or greater than the bit rate.
Audio File Formats
Commonly used formats:
- MP3
- Apple QuickTime
- Microsoft Windows Media
- Macromedia Flash
- RealMedia
MP3 is the most common format used. Not all formats will be available on all systems and some require additional software to be installed.
Video
As with audio, video can be linked to web pages. However, video requires much larger files than audio. Some file formats allow for audio or video and audio and it may be useful to provide both options for users with limited bandwidth.
As with audio, video files, such as MP4 format, can be linked in the same way as other file types:
<a href="http://rait.anu.edu.au/FOO/SMALL/00-KevinRudd.mp4">Kevin Rudd</a>
From: Video and Audio of the Open 2020 Summit Presentations, address from Kevin Rudd, Prime Minister of Australia (video), 2008
As with audio, the <object> tag can be used to provide more control over the video in the browser, with controls for starting, stopping and fast forarding included.
As not all devices can play video and not all users can see, any important information conveyed by video should also be described in an alternative format, such as text, in the web document. Some video formats include provision for "closed captions", with synchronised text overlaid on the images.
Some video terms:
- Movie length: Usually measures in second of playing time.
- Frame size: Web videos are typically 320x240 pixels. Standard definition analogue television has a frame size of approximately 640 x 480 pixels. A typical high definition video is 1280x720 pixels.
- Frame rate: Web videos are typically at 15 frames (Images) per second (FPS). Standard definition TV is 25 to 30 fps. Frame rates of 0.5 fps (one frame per two seconds) may be used to reduce the file size where the image is not changing rapidly, such as during a slide show.
- Quality: A quality setting (low, medium high or a numeric value) may be used when compressing video to set the algorithms used.
- Colour bit depth: The number of colours used may be reduced, as with still images, to reduce the file size. This may be set to a small value where computer animation is used.
- Data rate: As with audio, the maximum rate at which data can be specified in Kbps. The data rate must be less than the average bandwidth of the data connection for the video to play in real time.
Animation
Low resolution limited colour moving images (animation) with audio can be used to good effect for communication on the web. This reduces the resource requirements and can make for an easier to understand message. An example of animation is Airport by Iain Anderson (2005), made using the DOT pictograms.
Now read:
Web Design in a Nutshell, Jennifer Niederst Robbins, O'Reilly Media, Inc., 2006:
Web Graphics and Media
- Chapter 28. Web Graphics Overview
- Chapter 29. GIF Format
- Chapter 30. JPEG Format
- Chapter 31. PNG Format
- Chapter 33. Audio on the Web
- Chapter 34. Video on the Web
