Table of Contents
Originally, the web was designed to convey primarily textual information. The HTML language was created to provide basic tools that allowed a document to be written without worrying about how it looked on the page; it was the browser's job to take care of the presentation. Where illustrations were concerned, support was basic but functional---pictures could only be inserted almost as if they were just another block of text, and certainly couldn't be placed on screen with any accuracy.
As the web developed, and expanded the range of types of information that it conveyed, the support for images grew, at first with proprietary extensions created within individual browsers, and later through modifications to the HTML standards. The range of image types that can be used has also grown; whereas the early browsers could only interpret one or two image formats, the lastest browsers can display a huge range.
Vector graphics are composed of lines and shapes
Bitmap images have discrete pixels that represent colour
Most web graphics are bitmaps, as screen is made up of pixels
The first choice you'll need to make when creating a new image is whether it should be a vector image or a bitmap. Bitmaps are exactly as their name implies, maps of binary colour information. They store this information in a grid of points, or pixels, which has a fixed width and height, and they can store various ranges of colours according to the image type (see Colour Depth below). Because they are a fixed number of pixels wide and high, they are difficult to resize, and have a limited resolution---zooming in produces a blocky, 'pixellated' image. At normal resolution, the pixels are too small for the eye to distinguish, and we see smooth and subtle colour transitions.
On the other hand, vector images, created by programs such as Adobe Illustrator and CorelDraw, are constructed from lines and curves drawn out in much the same way as a technical drawing. When the image is saved, the information about these lines is stored as coordinates and directions, and when viewed, the image is displayed by rendering these lines back onto the screen. Since they're drawn from these coordinates, they can be resized to almost any level and still retain their sharpness. Their main drawback is that they cannot easily render the subtlety of colour blending needed for photographic images and readily available in bitmap formats, and so are generally useful for drawings, diagrams and cartoons.
The range of vector formats and support for them in browsers is limited; at present there's only really one widely-used format, SVG or Scalable Vector Graphics). SVG is unusual as it is written in a form of XML markup, much the same as HTML, defining the points and shades that make up the image. This makes it very useful for presenting dynamic data such as share price graphs, because the image can easily be written by scripts or programs on the server. You can view this code by loading the SVG file into a text editor such as notepad or wordpad.
Macromedia's Flash is also used for vector graphics applications, though it is much more widely used for animations and presentations, as it has a range of multimedia capabilities, including sound. It's a more proprietary format than most of those discussed here, as you generally need to use Macromedia's own tools to create Flash files.
The web has tended to concentrate on bitmaps as they are easier to create and render on screen. For this reason, we'll take a more detailed look at bitmaps in the next few paragraphs.
When a bitmap image is constructed, the colour of each point or pixel in the image is coded into a numeric value. This value represents the colour of the pixel, its hue and intensity. When the image is displayed on the screen, these values are transformed into intensities of red, green and blue for the electron guns inside the monitor, which then create the picture on the phosphor lining of the picture tube. In fact, the screen itself is mapped out in the computer's memory, stored as a bitmap from which the computer hardware drives the monitor.
These colour values have to be finite numbers, and the range of colours that can be stored is known as the colour depth. The range is described either by the number of colours that can be distinguished, or more commonly by the number of bits used to store the colour value. Thus, a pure black and white image (i.e. no greys) would be described as a 1-bit or 2-colour image, since every pixel is either black (0) or white (1). Common colour depths include 8-bit (256 colours) and 24-bit (16 million colours). It's not usually necessary to use more than 24-bit colour, since the human eye is not able to distinguish that many colours, though broader colour depths may be used for archiving or other high quality work.
High colour photographic images need compression
Lossless compression preserves all picture information
Lossy compression creates much smaller files
Be careful when repeatedly editing lossy-format files
Another aspect to consider when choosing an image format is the compression method used to store the image within a reasonable file size. Some formats store the colour information per pixel without using any compression, but with anything other than the smallest files this is impractical (think of a 800 x 600 x 24-bit image, an average screen-sized bitmap, which would be over 1.4 MB), especially when downloaded from the web. Compression allows us to store the same image in a much smaller file, which can be downloaded in a much more reasonable time.
There are two basic compression types, lossless and lossy. LOSSLESS COMPRESSION stores all the information exactly, without loss of quality or accuracy, a perfect copy. The image recreated on the screen is exactly the same as the image created by the original designer. Lossless compression works particularly well for images with large, solid blocks of colour, which it condenses very effectively. For example, if on a row of pixels there is a line of thirty red pixels, then we can store the colour value for `red' once, and store the fact that it's repeated thirty times, which would save us around twenty to twenty-five colour-value entries. This type of simple compression can make significant savings with certain types of image.
LOSSY COMPRESSION, on the other hand, has more advanced ways of compressing the image data, though this comes at the cost of precise reproduction. In lossy compression, the program creating the image looks for patterns of detail within the image, and compresses areas of low detail much more highly than areas of high detail. The patterns are converted into mathematical formulae describing the pattern's colours, with more complex formulae being used for more highly detailed regions. This can result in images that are significantly smaller than when encoded using other compression methods, especially with photographic images (see Figure 7.7, “Lossy Compression - High Quality”.
The compression is called lossless because these formulae never recreate the image with total precision; there is always some loss of information when the image is decompressed. This is most noticable when a high compression ratio is used, since the image will become blocky and details will become blurred (see Figure 7.8, “Lossy Compression - Low Quality”). The information loss also becomes apparent if the image is repeatedly saved and reopened; like copying a video-cassette, each time a copy is made more of the quality is irretrievably lost.
Only available in some formats
Transparent graphics allow background to show through part of image
Animations allow simple moving images, e.g. cartoons
Certain image formats also support some more advanced features, such as transparency or animation. With transparency, parts of the image can be made transparent, giving the effect of a shaped image, or blending in with a background colour. In the GIF format, for example, a single colour value in the image may be marked as transparent, so that areas having this colour value will not be drawn on screen. More advanced, graduated, transparency effects are possible with the newer PNG format, using an alpha channel, which can create shadows that overlay the background beneath the image.
GIF animations can be a simple way to add cartoon-like movement to an image. Instead of storing a single image, they store a sequence of images along with a time delay; the images are displayed much like a flick-book cartoon. They should be used sparingly on web pages, as they can be distracting to the reader.
|Which bitmap format?|
GIF (Compuserve Graphics Interchange Format): Lossless, medium compression, up to 8-bit colour, supports single-colour transparency and animation; good for simple clip-art style graphics. Proprietary standard; some issues over copyright.
JPEG (Joint Photographic Experts Group): Lossy, very high compression, 24-bit colour only. Excellent
for photographic images. Filename extension usually abbreviated to
PNG (Portable Network Graphic): Lossless, medium compression, up to 36-bit colour, with graduated transparency. Not supported by many older browsers. Designed as an open standard to replace GIF.
TIFF (Tagged Image File Format): Lossless, with medium, low or no compression. Wide range of colour depths available. Used mainly for intermediate saving of images in progress, before final compression into JPEG.
There are also numerous formats that are tied to particular
graphics packages, such as
Used where there is no “native support” for a format
Often used for new formats under development (e.g. X3D)
Sometimes used to view proprietary data
The wide variety of image formats and the lack of support for them in early versions of browsers led to their designers building in a way of adding more formats through extensions, or plug-ins. These added capabilities to the browser without the need for building them into the software itself. Innovative companies soon exploited this, and created their own formats for all kinds of media, not just images. Though plug-ins enabled the browser to view a wider range of material, they allowed an explosion of non-standard, proprietary formats, and they are not always available for all computing platforms (e.g. Macintosh, UNIX or Linux, etc.).
Plug-ins are now most often used for “cutting edge” formats which are still being developed or agreed upon; SVG is in this stage of development at the moment (you can download the SVG viewer from Adobe). This format is now fairly standardised, and will probably be built into the next generation of browsers.
Again, many formats available
Sound can be useful, fun, or just very annoying
MP3s and other audio downloads
Inserting sounds into web pages is not difficult to achieve techincally, despite the maze of audio formats that are available, although using sound to good effect in a website is much trickier. In this section, we'll have a quick look at the basic formats and methods for delivering audio, though anything more is a little beyond the scope of this module - see Niederst (2001) for more details.
Traditional media is analogue -
continuous transitions between sounds
Computer-based media is digital
stepped transitions between sounds
music reduced to a stream of discrete whole numbers
For most of the history of recorded sound, the means of recording has been analogue, reliant on the physical properties of the instruments and surroundings to produce sound waves. With the computer, there is no way to encode this smooth, continuous waveform, so it has to be reduced to a sequence of discrete numbers, which make up an approximation of the wave (see Figure 7.9, “Analogue vs. Digital Sounds”
Uncompressed audio creates large but accurate representations of sound
Compressed audio throws away some information to reduce filesize
MIDI reduces sounds to notes on instruments or samples
There are possibly even more audio formats than graphics formats, arising largely from the lack of standardisation in audio hardware. Though soundcards in PCs are not a particularly new innovation, there are still a great number of compatiblity issues. It's also quite difficult to compress large amounts of audio at sufficiently high quality that will download in a reasonable time (one minute of CD-quality audio uncompressed is around nine megabytes).
The most common raw audio formats are
(Microsoft's proprietary audio format) and
(originally developed by Sun Microsystems, popular on UNIX systems).
Neither of these are compressed, and thus should only be used for
short or low-quality samples.
You may also come across the
.mid MIDI format; this
consists of a stream of MIDI (Musical Instrument Digital Interface)
data which plays on the soundcard's built-in synthesiser. It's much
more compact than other formats, but needs a top-quality soundcard to
sound good. It obviously can't store some types of data, such as voice
or noise samples, but can be downloaded to electronic MIDI instruments
such as keyboards.
Audio is played in real time (no download wait)
Can be difficult to retain copies
Often buffered to cope with unreliable Internet connections
For live audio broadcasts and longer samples, there's a better way of delivering the sound to the browser, called streaming. Here, the audio is stored on a server that can feed the sound data as it is required in real time to connected browsers. So only as much audio as is required is sent out, rather than whole, large files.
The main advantage of this is that you (the listener) hear the start of the audio much sooner, as you don't have to wait for the whole file to finish dowloading before you can play it. It does mean, however, that the quality of playback is limited by the bandwidth available, which is not so good for dialup users.
Being designed for the web, streaming audio is usually highly compressed too, allowing reasonable quality sound over lower bandwidth links. Take a look at the BBC Radio website for examples of streamed audio - many public and commercial radio stations also now broadcast on the web in this manner.
Highly compressed by filtering out some sounds -
frequencies outside normal audible range
details which are too fast or subtle to hear
Small enough to be quick to download
Often the focus of file-sharing
Newer formats often use DRM to limit sharing
Streamed audio provided a means of efficiently delivering audio streams to the desktop. But the files were still huge, and greater compression was needed -- which led to the development of the MP3 format. This format filters out extraneous sounds - anything that the human ear can't detect -- and then compresses the result using pattern matching algorithms, much as the JPEG format does for images. The result is much smaller file sizes for even the very best quality audio (often ten times smaller than the equivalent .wav file.
This significant reduction in file size has caused a great deal of fuss in the audio world, as it's now feasible to transmit and share CD-quality audio files across the web. It's also now possible to buy solid-state audio players that use this format, allowing you to download favourite tracks to their memory. Of course, this has worried the Music Publishing industry, as it's possible for artists to create files themselves and distribute the tracks without the need for the middleman (the music industry). There's also potential for pirate copies of audio to be distributed, which the industry claims damages their and their artist's profits. Because of this, many new formats have been created which use some form of Digital Rights Management (DRM), a technology which only allows you to use copyrighted material within particular license conditions.
Raw video produces huge files - compression is vital
Bandwidths are now high enough to allow compressed streamed video
It's also possible to include video clips that play in the browser window. For some websites, such as the BBC's news site, video is an important part of the information content of the site. Most video on the web is streamed, just as audio often is; usually you'll need a plug-in or viewer to watch. There are several types of streamed video, the most common being RealVideo, and many more video formats for offline viewing.
When viewing video streams, the bandwidth of your connection becomes very important, and you'll need to choose the bandwidth of the video stream to match. Video is not very satisfactory on anything less than a broadband connection, as there's just not enough bandwidth to cope with anything other than the poorest quality.
3D modelling for display and interaction
Often used in gaming applications
It's also possible to use other types of multimedia, mostly through browser plug-ins, for various purposes. For example, VRML (Virtual Reality Modelling Language) and X3D both allow you to create three-dimensional “worlds” which can be navigated through the browser, allowing architectural models to be viewed or even 3D hypertext documents to be created and browsed. Virtual-world games such as Second Life also use these formats to allow players to construct their own objects in the game world.
It's worth taking a look at the browser plug-in download area on the Netscape, Mozilla and Internet Explorer websites; you'll find many ideas for all kinds of multimedia.
We'll have a look at this in the lecture on 'the future of the Internet' in a couple of weeks time.
More detail on most of the multimedia formats and techniques mentioned can be found in Niederst (1999).
On the web, I've found the electronic edition of the Web Style Guide by Lynch & Horton (2002) is still relevant and well-written, and has lots of general information about the web design process.