Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]



WWW pages

Tip of the week
(Graphic file formats)
Where bandwidth is limited it is sometimes a good idea to make images as small as possible, and still be able to portray the required information. Two of the main techniques are:
To reduce the number of pixels in the graphic, as this wastes bandwidth to display a graphic which is scaled down. For example never use a width and height tag in an image insert which is not equal to the graphics' size.
Reduce the number of colors in the image.
For example the following shows four pictures taken with 16.7 million colors, 32 colors, 8 colors and 4 colors, respectively:

16.7 colors (JPEG format) - 3.62KB

16.7 million colors

32 colors (GIF format) - 2.42KB

32 colors

8 colors (GIF format) - 1.10KB

8 colors

4 colors (GIF format) - 564B

4 colors
Even when the colors have been reduced, you can still see that the image is of a cat. The sizes of the files produced are 3.62KB, 2.42KB, 1.10KB and 562B. It can be seen that reducing the number of colors in the image has a considerable effect on the file size (and the bandwidth used, of course, if the image is being sent over a communications channel). The reason that the file sizes reduce is that the file are compressed using an algorithm which detects long sequences of the same color, and replaces it with a special code. Thus the fewer the colors, the more likely these sequences will occur, thus the smaller the file size will be.






WWW pages of the past (May 2001)

May 2001
I've decided that CSS files can now properly deal with font layout. In my original WWW page I used transparent GIF files to represent text. For example My Books has been replaced with a text representation, such as books. This is because I can now define the format of the hypertext link in the CSS file. In the new page I've defined three styles (A:link, A:visited and A:hover), which defines the style for a non-visited link, a visited link, and a hover event over the link. These style are initially:

A:link {color: #003333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; font-weight: bold}
A:visited {color: #003333; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold}
A:hover { color: #CC3333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold}

Thus all the hypertext links will have the same colour (#003333 - which is GREEN), and the colour will change when the user hovers over the link (#CC3333 - which is RED). I've also define the standard font of a paragraph as:

P { font: 10pt Verdana, Arial, Helvetica, sans-serif;
color: #000000; margin-right: 6px; margin-left: 6px; left: auto}

which defines the standard text colour as BLACK, with a Verdana font. It also have a six point margin on either side of the text.

There is also a trend in WWW page design to add a distinctive banner to the top of the page, so I've added a very basic banner, to give my pages a better feel. Please refer to the following banners.

BEFORE [May 2001]

AFTER [May 2001]

Or perhaps to illustrate the changes, move your mouse cursor over the graphic below:

New Home Page Banner

New Books Page Banner

New CNDS Page Banner

New NOS Page Banner

New Research Page Banner