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 million colors
32 colors
8 colors
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
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:
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:
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.
Design
| SFC | NOS
| Code | Diary
| WWW | Essay |
Cisco | [Home]
Tip
of the week
