Kaye and Geoff's web page documentation
IntroductionHere 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:
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:
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 support PNG and also SVG and Flash, although the latter two may require extra software (plug-ins). The formats are described in more detail below.
GIFThe GIF format has the following characteristics:
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 venetian 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.
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 formatsPNG is GIF-like, in that it is bit-mapped and supports loss-less compression, but it has some significant enhancements. It is a W3C standard and may replace GIF in the future, but is not supported by very old browsers and by all graphics programs, and it does not include animation abilities.
Some of the advantages of PNG are:
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). Plug-ins are often available for older browsers to display SVG; most modern browsers 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 sizeOne 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, say, 100 kilobytes. With images greater than 300K you should question whether they are necessary to the presentation or whether they need to be that large or if you can find a way to make them smaller. 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 is not 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 qualityWe 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 programsMost 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 ImagesThe 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. Pay attention to the license governing your use of these pictures - some are reasonable but others can be so restrictive that they make the pictures almost useless.
The following list is just a small selection of the web sites offering free or low-cost clip art: