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.

Figure 7.1. Defining a Bitmap Graphic

A bitmap graphic is made up from discrete shaded pixels, which together display the image.

[Image from http://www.twardoch.com/download/wirtschaftsinformatik_multimedia.html]

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.

Figure 7.2. Defining a Vector Graphic

A vector graphic is composed of points, lines and shapes defined by co-ordinates on a graph.

[Image from http://www.twardoch.com/download/wirtschaftsinformatik_multimedia.html]

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.

Figure 7.3. Vector and Bitmap Formats Compared (1)

These are enlarged views of the same graphic presented as a vector image and a bitmap image. Notice the jagged edges on the bitmap image as the smooth angled lines are recreated using pixel blocks.

[Image from http://www.virtualaddiction.com/pages/mod1/illustrator/vector_vs_bitmap.html]

Figure 7.4. Vector and Bitmap Formats Compared (2)

Here, the circle graphic has noticably lost quality in its bitmap form, and appears as stepped blocks which fade from one colour to another. This anti-aliasing makes the circle appear smooth when seen at normal size.

[Image from http://www.virtualaddiction.com/pages/mod1/illustrator/vector_vs_bitmap.html]

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.

Figure 7.5. Eight-Bit Colour

Eight-bit colour stores the colour of each pixel in eight binary digits (bits) which gives 256 colours in total.

[Image from http://www.webstyleguide.com/graphics/displays.html]

Figure 7.6. Twenty-Four-Bit Colour (True-Color)

Twenty-four bits (three bytes) per pixel gives us a possible 16 million (approx.) colours, which is more than the human eye can accurately distinguish.

[Image from http://www.webstyleguide.com/graphics/displays.html]

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.

Figure 7.7. Lossy Compression - High Quality

Image saved as JPEG at 90% quality (10% compression, 15kB filesize). The image appears sharp and clear, and does not seem to have lost any quality due to the compression, even though the filesize has reduced from 75kB uncompressed to 15kB.

[Image from http://www.twardoch.com/download/wirtschaftsinformatik_multimedia.html]

Figure 7.8. Lossy Compression - Low Quality

Image saved as JPEG at 10% quality (90% compression, 1.5kB filesize). The image is much fuzzier, with artifacts or distortion created by the extreme compression.

[Image from http://www.twardoch.com/download/wirtschaftsinformatik_multimedia.html]

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 .jpg. 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 .psd for Adobe PhotoShop, .cpt for Corel's PhotoPaint, etc.

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.

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”

Figure 7.9. Analogue vs. Digital Sounds

Source: Soft Lookup Web Tutorial.

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 .wav files (Microsoft's proprietary audio format) and .au (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.

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.

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.

We'll have a look at this in the lecture on 'the future of the Internet' in a couple of weeks time.