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
Pr2 Perfect Promotion Site Award

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.

Pr2 Perfect Promotion Site Award

Pr2 Perfect Promotion Site Award

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.

 Lots of Free Email
Domain Name Info
Search Engines
Affiliate Programs
Enter your email address below:-

This site's design and content are copyright Edwin Hayward 1998, and will be defended by legal action if necessary. All rights reserved.