Web Design IV: Painting By The Numbers

[freetrav]

The numbers, in this case, refer to the size of the image. The two browsers with the lion's share of the browser market, Netscape Navigator/Communicator and Microsoft Internet Explorer, All of the major players in the browser market are both 'intelligent' browsers. That means that, given appropriate information, display of a web page can be optimized. One of the possible optimizations is to place the text on the canvas and leave space for the slower-loading pictures. However, in order to do this, the browser needs to know the size of the picture. This, as with the alternative text, is done by adding attributes to the IMG tag - specifically, the 'height' and 'width' attributes. These may be specified in any valid measurement, but the most common by far are pixels or percentage of display size.

The attributes in question follow the expected format:

<IMG src="foo.gif" width="635" height="480">

or

<IMG src="foo.gif" width="60%" height="60%">

The order in which they are specified doesn't matter, although it is conventional to specify width first.

If you are displaying a picture at other than its actual size, be aware that if the aspect ratio (the relationship between width and height) is not preserved, the picture will appear distorted. If you make a picture larger than its actual size, you will see the effect called pixellation (it will become apparent that the picture is built up out of lots of little single-color squares); if your make it smaller, detail will be lost. Both effects can detract from the appearance of the page; the loss of detail is less noticeable, however, unless the details of the picture are of high importance (as in a reproduction of text). In general, it is best if the picture's actual size and display size are identical.

Note that, regardless of display size, the larger the actual size of the picture, the slower it will load.

Some wWebsite management software (most notably Microsoft FrontPage) generally allows for the generation of 'thumbnails'. These are much-reduced copies of the pictures in question that 'stand in' for the actual picture where only a very small image (up to 100x100 pixels, generally) is needed. Normally, the thumbnails are linked to the full-sized image. The benefit of using thumbnails is that they load faster than displaying the full-sized picture in the same area.

The advantage of specifying the display size, as indicated, is that it becomes possible for the browser to display the text without needing to wait for the images to load first. This allows a faster apparent response time to the user, which reduces the chance that your visitor will lose patience waiting for your page to load, and go elsewhere. And keeping your visitors' interest is what web design is all about.