Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Answers to Exercises, Chapter 5

Test Questions

  1. No. It is possible to contrive vector images made up of so many small vectors that rendering them as bitmaps would actually reduce their size. (Vector images of this sort usually result from auto-tracing bitmaps.) Remember that usually a pixel only occupies three bytes, but a vector object will require more. It's only because there are normally relatively few objects in a vector image that the rendered bitmapped version usually turns out larger.
  2. The statement as given is false. There are colours that lie outside the RGB gamut. It is true that any colour can be represented using three numbers, but the numbers represent more complicated values than the simple proportions of red, green and blue.
  3. Dithering always introduces some noise into an image, but the extent to which this is noticeable varies with several factors: the nature of the original image, the number of indexed colours it is being reduced to, and the settings chosen for the dither. Generally, it is not a good idea to dither an image with large areas of flat colour and a high number of colours in the palette (say 256), or a continuous-tone image like a photo that is being reduced to a very small number of colours (say 16 or 8). In both cases a very speckled result will usually be obtained which is less acceptable than the result without dithering. In the case of an image that starts with large areas of flat colour, dithering introduces noise unnecessarily. As a large area of a single colour can be indexed with one colour only, the best result will be obtained by turning dither off if you are using the full 256 colours, or even 128 in many cases. In the case of a photograph being reduced to a very small number of colours, the result is inevitably going to be radically different from the original. Without dithering it will be highly posterized, but this can be attractive and may even be deliberate. With dithering it will look randomly speckled (because reducing the number of colours creates large areas of flat colour), and there are few cases in which this could be considered desirable. In practice, when using the full 256 colours of an indexed colour palette, dithering is often unnecessary as good results can be obtained without, but this can only be discovered in any particular case by trial and error.
  4. If a colour is to be represented using values for its R, G and B components, it is necessary to specify exactly what the colours red, green and blue are, what the range of values for the three components may be and various values concerned with the way stored values are mapped to colours when they are displayed. The sRGB colour space is a W3C standard that specifies values for the parameters, making possible a standard interpretation of colour values. Any colour specification used in CSS should be interpreted according to this standard, which means in theory that it will always be displayed as the same colour.
  5. Lossy compression is more often used than lossless compression in Web graphics because it is more effective on the type of images most commonly used on the Web. Lossless compression only achieves worthwhile compression ratios on simple images with areas of flat colour. Photographic images with continuous tones can only be compressed effectively if some information is discarded. In practice, very good results can be obtained despite the loss.
  6. Information is discarded during the quantization step of JPEG compression, but this does not reduce the size of the data. The space saving occurs when the quantized coefficients are encoded.
  7. For a printed document it is normally most important that the text be legible. JPEG compression has a tendency to blur edges, which can make text hard to read. It is likely that such a document would not include many different colours, so using a format that combines lossless compression (to preserve sharp edges) with indexed colour (to minimize the space used for each pixel) would be best. For most documents, just two colours would suffice. GIF is the most widely supported format that satisfies these conditions, although PNG would be a sensible alternative.
  8. Bezier curves are used in vector graphics primarily because curve segments can be joined up smoothly to make longer paths. This cannot be done with elliptical curves.
  9. A rectangle is usually represented by the coordinates of its top left corner, and its height and width. These are the attributes of the SVG rect element, for example. Thus, it is implicitly assumed that any rectangle is oriented parallel to the axes. The effect of any transformation that turns such a rectangle into another rectangle with the same orientation can therefore be achieved just by altering the values of the parameters. Therefore, the translation, scaling and reflection operations are redundant when applied to rectangles. (You should be able to see quite easily how their effect can be achieved as a change in parameters.) Rotation, however, changes the shape's orientation, and skewing distorts it so that it is no longer rectangular. These two transformations are therefore not redundant.
  10. If you want to be pedantic, you will observe that the answer depends on which DTD is being used. Assuming XHTML 1.0 Strict is in force, every img element must have a src attribute, to identify the location of the image file, and an alt attribute to provide alternative text, for the benefit of users of screen readers and other non-visual user agents. See Chapter 9 for more about the necessity of providing textual alternatives for images.

Discussion Topics: Hints and Tips

  1. The W3Schools browser statistics provide the only readily available indication of the colour depth of monitors used by people on the Web. For whom is the Web-safe palette necessary, and do the statistics justify neglecting those users?
  2. Consider what will happen if you apply such an algorithm to its own output.
  3. The use of image slicing is declining, because claims that it improves download speed are dubious at best, and most of the purposes to which it has been put can be achieved in other ways. Look at a Web graphics application, such as ImageReady or Fireworks, to see how slices are used. Read the programs' manuals to see how slices are justified.

Practical Tasks: Hints and Tips

  1. The process of repeated saving prescribed in the exercise is needed if you are to see much visible degradation of your images. JPEG is very good at preserving quality, even on the lower settings, but the quality deteriorates as the compression is applied repeatedly.
  2. As well as comparing the resizing algorithms of different browsers, you should also compare them with the results achieved by Photoshop and other graphics programs. Opera and IE7 both provide a page zooming function, which enlarges an entire page. Do these browsers do a good job of resizing images when pages are zoomed? What do you conclude about setting the dimensions of an image to anything other than its original size?