Taming Your Site's Graphics
Graphics can make or break a web site, popularity-wise at least. You may be surprised,
but I am not referring to the quality of the graphics on your site (even though, of
course, it's nice to have attractive graphics). Rather, I am referring to the dreaded
C-R-A-W-L that should be avoided at all costs: pages loaded with enormous graphics
trickling slowly into a browser.
Here are some tricks and tips you can use to minimise the pain.
Making Your Graphics Palettable
Netscape "understands" a palette
of 216 "safe" colours. If you stick to these 216 colours in designing your
site, you can be sure that your pages will look their best for every visitor, no matter
what screen resolution their PC is using. On the other hand, if you use thousands of
colours on your site, you will create big problems for people who are browsing in 256
colour mode. When they view your great graphics, they are likely to be less than impressed
as they are going to see strange speckles and bizarre colours everywhere as their browser
gamely tries to go where no other browser has gone before and show more than 256 colours
on a 256 colour screen. Quick hint: This doesn't work!
Now you may be thinking: "216 colours... who is he trying to fool?" Well, go
ahead, unleash the full power of that expensive graphics package; go wild in over 16
million colours. But trust me, what looks good for you won't look good to many of your
visitors!
Small is Beautiful
Do you really need big graphics on your site? Of course, if you are selling products,
for example, it's great to give people a chance to view before they buy... but you
shouldn't plaster the photos on your main page. Try to minimise your graphics while
keeping your site layout attractive. For instance, do you need to use graphical buttons to
show the different parts of your site, or can you make do with text? Do you need fancy
introductory graphics, or a well scripted welcome message? In every situation, ask
yourself "Do I need to use a graphic here, or will text do the job just fine?"
Make sure you choose the correct graphic format,
and compress your graphics until they scream.
There are two main graphic formats in use on the Internet: gif
and jpeg. gif graphics can, under
normal circumstances, contain upto 256 colours. jpeg graphics,
on the other hand, can contain millions of colours. gif is a loss-less encoding scheme; in other words, your
picture is not reduced in quality when you save it in gif
format. jpeg is a lossy encoding
scheme: your graphics are compressed and may not look as good as the
original. You should generally use gif graphics for line
drawings, banners and graphics with large areas of a single colour. Use jpegs
for photographs and other complex graphics.
Did you know? You may find you can save a
lot of space by changing your graphics from gif to jpeg
format, or vice-versa.
You'll find that a graphic compression utility
will serve you well here. There are lots of tools to
choose from, both on-line and off-line.
Attributing Attributes
Many attributes affect the way your graphics are displayed. For instance, you can
control where the graphics are positioned on your page, and what magnification (if any)
they are displayed at. The most important attributes you should concentrate on, however,
are the WIDTH and HEIGHT of the image and any ALTernative text to go along with the image
for text only browsers and people waiting for images to load.
You should always specify the size of your images explicitly using the WIDTH and HEIGHT
tags. It's much easier to explain if I show you an example, below...
Example Image
Example Code
<IMG SRC="perfect.gif" ALT="Pr2
Perfect Promotion Site Award"
WIDTH="155" HEIGHT="69">
The code above will display the image as you can see. The first part of the image tag (this piece of code is called an image
tag) tells your browser where to get your image. In this case, the image to be displayed
is a file called "perfect.gif". The second part of the image tag specifies
alternative text that you will see if you choose not to load the image, or if you are
browsing with a text-only browser. It is always a good idea to put some meaningful text in
the ALT tag. The last part of the image tag specifies how big your image is. If you tell
your browser the size of all the images on your page, the text on your page can be
displayed while the images are still loading since the browser "reserves" the
appropriate amount of space in which to display the images after they have loaded.
On Being The Right Size
Always use your graphics at the size you created them. For instance, if you want to
have a small button and a large banner for your site, each of which with the same
information, draw both! Don't be tempted to use the scaling possibilities built into your
browser to make a small button out of your large banner, or a large banner out of your
small button. Apart from a marked loss in clarity, this will also slow down the displaying
of your page.
Good
Bad
Bury Them Deeply
Even if you want to turn your site into a graphical extravaganza, make sure that the
TOP page of your site is relatively free from graphics, and loads quickly. First
impressions are everything on the Web, since it only takes one click to leave a site for
more interesting pastures. Get your visitors' attention with your top page, and make them
want to view more of your site before forcing them to sit through a lengthy download.
At the Risk of Repeating Myself
A great way to speed up download times is to re-use as many graphical elements as you
can across the whole site. That way, visitors only have to download a particular graphic
once, and after that the graphic will load "instantly" as it is loaded from your
browser's cache. (a cache is a small area of
memory or hard disk space where the latest pages you visited are stored so that they can
be loaded more quickly).
For instance, if you are using graphics to make a button bar (a navigation bar pointing
to different parts of your site) it might be better to break the bar into small pieces and
re-use most of those pieces on each page of the site. That way, only the element that has
changed (in this case, it is usually the current page's button which is highlighted) needs
to be loaded, and the other information is already ready.
Don't Get Too Animated!
Animated graphics, when used sparingly, can add an elegant touch to any site. Used to
excess, or inappropriately, and they create a jarring page that makes for relatively
unpleasant viewing. Remember also that animations will tend to be larger than static
graphics. Another disadvantage to animated graphics is that the speed they first animate
at depends on the speed of your connection. If someone visiting your page has a very slow
modem, they are likely to view your painstakingly created animation one frame... at...
a... time... whereas if they have a superfast connection they will view
alltheframestogether!
Some animations to avoid: Animated
"divider" bars (those horizontal bars that are used to break a page into
sections) such as rainbow-coloured or rippling bars. Animated icons such as an
"email" or "bookmark" icon. Animated titles.
Cool Tip : The Hidden Graphics
Boost!
This technique can give the impression that your pages load
faster than they really do. What you need to do is to "hide" graphics at the
bottom of a page if you know they'll be needed later on in your site. To hide
graphics, just make them 0 pixels wide by 0 pixels high. You can do this by
setting their HEIGHT and WIDTH attributes to 0, either directly in the code for your site
or else via the HTML editor you are using.
This technique is most useful if you have an page with a large amount of text
introducing a more graphically complex section of your site. Remember: always put the
"hidden" graphics at the bottom of the page, otherwise your visitors will be
left staring at a blank screen while the "invisible" graphics load. |
Filling Your Visitors in on the Background to Your Page
If you are using a background graphic behind your text (and you ignored my suggestion
that you might do better to eliminate background graphics) then you'll want to make sure
that your page is legible even if your visitors do not load the background graphic! For
example, if you are using a dark background graphic to make light text stand out, your
visitors may very well see nothing at all if they do not load the background graphic!
To solve this problem, specify a dark background for the whole page by editing the
global properties of the page. There is an attribute called the BODY attribute near the
beginning of every HTML page. You can add information to the BODY attribute to tell
browsers the default background colour of your site's page.
For instance, this page has the following body tag:- <BODY BGCOLOR="#FFFFFF">. BGCOLOR
is the code that refers to the BackGround Colour of your site, and #FFFFFF
is the code for the colour you want, in this case white. You can look up the codes for each colour here.
In Closing : Minimalism
Just a final word before closing this topic: minimalism really is the key to having
attractive pages that load quickly. Please read that statement again! It is possible to
design a very graphically intense site that is extremely attractive, but you will do so at
the expense of download speed. Since, unless your site is all about graphics, your
visitors are visiting for information, less graphics and more compelling content should be
the operating watchwords.
Squeeze those graphics! Create ALT tags and SIZE attributes! Do away with excess
animation and your site will be better as a result. |
