Kaye and Geoff's web page documentation 

Introduction

Here is another of those pages where we digress from HTML to consider an important aspect of building complete web pages: how to create or otherwise obtain and process graphics images. We have already seen that images are stored in separate files from those containing the HTML, so we largely manipulate the pictures for a web site as a separate process from writing the HTML. And manipulating pictures usually takes a lot more time and effort.

Why do you need to know about graphics?

It is important to have a basic knowledge of digital graphics if you want to make effective web pages:
  • Web browsers can display several different graphics formats. The format that you should use depends on the characteristics of your image.

  • Digital images are usually displayed on a web page at a low resolution. Processing the image to remove faults as well as to enhance its appearance on a computer screen helps to compensate for its limited resolution.

  • Pictures take a very long time to download compared to text. A picture around 85 pixels square (about 25 millimetres on a typical screen) takes as long to download as a screenful (say 1000 words) of text. Geometry being what it is, of course, a picture double 25 millimetres in height and width will take four times as long to retrieve. Therefore pictures need to be as small (in file size) as possible to avoid unacceptable download times. Many graphics formats include the ability to compress the file which contains the image, but there are a range of ways in which this is done.

Types of Images

There are many different ways to store graphical information on a computer, but when creating web pages your choices are generally limited to the following:

  • GIF (Graphic Interchange Format)
  • JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • SVG (Scalable Vector Graphics)
  • Flash and other proprietary formats

The only formats which all versions of all browsers can be relied on to handle directly are GIF and JPEG, so these are always safe to use. Most modern browsers now support PNG but generally SVG and Flash require extra software (plug-ins). The formats are described in more detail below.

GIF

The GIF format has the following characteristics:
  • the image is stored as a bit-map - a two dimensional array of numbers which represent the colour of an equivalent pixel when the image is displayed on the screen
  • the picture is limited to 256 different colours (although they could all be different shades of one colour)
  • it uses a palette to define the available colours
  • it uses lossless compression (ie. it compresses without any change in picture quality)
  • it allows multiple frames within one file - so it can be an animated picture (see our animation page)
  • one colour (the "background") can be rendered as transparent
So, your picture should be a GIF:
  • if the picture comes as GIF
  • for line drawings, cartoons, maps, animations, etc.
  • when fine detail should be displayed
  • for small pictures with few colours in large areas
An example of a photo saved as a GIF when it should be a JPEG. As a JPEG the file would have been smaller. The limitation imposed by having only 256 different colours is clear, although it would not have been quite so bad if the colour table had been optimised.
GIF format compresses large areas of uniform colour very well, but does not degrade the quality of the picture in doing so. As a result it is the best format for line drawings, diagrams, cartoons and maps: pictures that are made up of comparatively few colours with large areas of uniform colour (which improves the efficiency of its compression process). Also, being able to make the background transparent on a map or diagram avoids that "pasted on" scrapbook appearance, but would be undesirable with a photographic image.

Many graphics programs which save images as GIF files offer the capability to save them "interlaced". This means that as the browser downloads the picture, it appears on the screen as if the image is being revealed through venitian blinds; the picture appears gradually, only being complete when the entire file has arrived. The idea is to give the viewer something to look at while the download is proceding, but the effect can be a bit distracting.

To define a transparent background in a GIF image a single colour must be identified and then wherever a pixel of this colour exists, the web page background "shows through" when the image is displayed. Common graphics programs can make defining the background colour straightforward, but there is one obvious difficulty which can arise. You need to make sure that no parts of the actual picture are the same colour as the background. This problem can be fixed either by slightly changing the picture colour, or by changing the background colour to one (it can be something quite vivid if required) which does not exist in the picture.

Scanned diagrams and line drawings typically present a problem where you want the background to be transparent. Study the results of a scan of a sheet of white paper and you will see that it produces an amazing range of coloured pixels, so scanned line drawings will almost always require backgrounds to be turned into a uniform colour. You can sometimes fix the problem very quickly and easily by minimising the number of colours in the palette (either during the scan or afterwards), but the effectiveness of this approach depends on the nature of the picture. Otherwise, making backgrounds uniform can be a tedious job, but sophisticated graphics programs have tools which can make it easier. Check out the list below for some possibilities.

JPEG

An example of a drawing saved as a JPEG when it should be a GIF. The "spotty" appearance of much of the magician, and the particularly obvious cloudy halo around the text, are artefacts introduced by the compression process - they were not on the original. It would not have been quite so bad if a better quality had been chosen at the expense of larger file size - on a scale of 0 to 10 the quality chosen here to emphasise the effects was about 4.
The JPEG format has the following characteristics:
  • it is bit mapped
  • it allows millions of colours
  • it uses lossy compression (ie. it irreversably changes the picture)
  • it allows a trade-off between picture quality and file size
So, your picture should be a JPEG:
  • if the picture comes as JPEG
  • if it is a photograph (or more generally, a "continuous tone" image)
  • when detail is not critical
  • if the picture is large with many colours in small areas
The JPEG format has the ability to very aggressively compress the information in images (typically 20 or 30 times), based on how our brains "see" pictures. In doing so, it throws some of the information away - this is called "lossy" compression. We tend not to notice this in a photograph, but with a line drawing or text it creates fuzzy edges and obvious spurious pixels which can result in a perceptible decrease in picture quality. So JPEGs are used for photos or very large pictures where we are prepared to sacrifice some quality for small file size. Graphics programs that produce JPG files typically allow you to specify the degree of compression to use, so you can view the resultant file and opt for a balance of file size and quality that suits your needs.

Note that, because of the loss of detail which results from JPEG compression, non-JPEG format graphics should not be arbitarily turned into JPEGs, for example to make them smaller in file size, because the picture quality, once lost, can never be regained. Converting a JPEG into a GIF or TIFF image does not rebuild its original quality, although it is likely to increase its file size - it just becomes a GIF or TIFF with JPEG artefacts in it. So changing to JPEG format, or to a more compressed JPEG, should be the last step in processing a picture for the web, and the original should be kept in case you want to use it again, in a different way, in the future.

Other formats

PNG is GIF-like, with some enhancements but without any proprietary concepts in its design. It is a W3C standard and may replace GIF in the future, but is not supported by very old browsers, and is not supported by all graphics programs.

Unlike the previous formats, SVG uses text-based "object" graphics, which means that the image is made up of a series of objects (for example shapes and text) and their characteristics, which are described in the file. So the file is generally fast to download, the image scales without distortion and can be indexed by search engines. SVG images can be animated. SVG is an official W3C standard but is not supported by all browsers, and is not available from most graphics programs (but can be written as text). A plug-in is available for some browsers to display SVG, but at some stage in the future all browsers should support it directly. Our "graphics on-the-fly" page has more information on using SVG graphics.

Flash is a proprietary format requiring special programs to create the graphics and plug-ins to display them. Typically the whole page is created this way rather than just an embedded picture. Flash pictures can be fast to download because they are object-based and they support advanced features like animation, but they do have disadvantages - they rely on the user having the plug-in installed, the programs to create them are expensive, the format is proprietary and the pages may not be indexed by search engines.

Image size

One of the questions new web designers wonder about is exactly what size image is suitable for the web? Size can be looked at in two different ways - actual presentation on the page, and file size.

On a web page, images should not require the viewer to have to scroll - they should fit into a single screen display. In particular, you should not have to scroll left or right on the screen to see the image. If you want to be conservative, unless you have a very good reason to do otherwise, keep the size of your largest pictures to less that 500 pixels wide.

The download (file) size of images should be kept to as small as possible. As a general rule of thumb, it is good to keep individual pictures to below 10 Kilobytes. With images greater than 50K you should seriously question whether they are necessary to the presentation. If you use more than two or three images on a page, the effect of the combined download and layout time can be quite annoying to your viewers. If you must have very large image files, consider creating thumbnail previews as links on the main web page, with a warning as to the file size, and allow your viewers to choose whether or not they download the full-size picture.

One other major consideration when using images is to make sure you save them at the size at which you want them to be displayed. Since the browser can set the width and height of pictures, you might be tempted to produce a large picture then use the HTML code to tell the browser to scale it for display. This is not a good idea. Firstly, you will be making your viewers download much bigger files than necessary. Secondly, there are different ways to tell HTML to scale images, and at least one way supported by Microsoft isn't supported by other browsers, resulting in pages being displayed with huge, inappropriate pictures, which looks very unprofessional. Finally, if you change the actual picture size but forget to adjust the HTML, the image will be distorted when it is displayed by the browser.

Image quality

We are not qualified to give advice about processing images for display on the web, except to say that when working with photographic images we often modify the brightness and contrast, sometimes change the "level" values, and almost always apply sharpening and also crop and scale the image. Check out the excellent web-based tutorials by Wendy Peck in the references below for authoritative information.

Graphics programs

Most sophisticated (paint-style) graphics programs can read in and output both GIFs and JPEGs, and many drawing packages will also output both formats. Free or trial versions of many of these can be downloaded from Tucows and other on-line sources of software. Many digital cameras and scanners come with image processing software which not only reads the images from the device, but also offers varying capabilities to process the pictures, including scaling, transparency, adding text and saving in different formats.

Sources of Images

The net itself is a good source of images; you can find GIF files on a wide range of archived clipart sites. The Lycos search engine has a simple method of searching the web for pictures (as opposed to text), and Altavista will allow you to specify that you want an image rather than text when you use it to search the net. Some other general search engines have similar features. You can also purchase CDs with extensive clipart libraries, and some graphics packages include picture libraries as well.

The following list is just a small selection of the web sites offering free or low-cost clip art:

References
Top
Previous
Next
Index
Home