How to Use Graphics for a More Attractive Website

Tutorial 7

Author: Ian McAllister

Too many pictures can drive away visitors, especially if they take too long to load. You should use split testing to see which pictures attract visitors most. I'll try to describe split-testing in my section on traffic.

Case matters in filenames

The first important point about using graphics files (or any other files such as HTML) on the web, is that upper case and lower case (capital or small letters) matter when you link to them.

If you use a reference to a cloud picture called cloud.gif and the file is really called Cloud.gif or cloud.GIF or CLOUD.GIF the browser will never find it. Each letter of the file name must be in the same case as in the reference to the file. That is because links use UNIX instead of HTML.

Preparing your pictures

I can't tell you how to use your graphics software. I use Photoshop, but there are lots of other programs out there, and you will have to learn how to use the one you have.

You can download GIMP for free for Windows or Linux operating systems. GIMP is as good as Photoshop, but you will have to use lots of tutorials from the web because there is no instruction manual with it.

Most of them have facilities to save the graphic as a .GIF file or as a .JPG file. You can use the GIF files for sharp lines (like the cartoon on this page) and JPG files are better for the smooth changes in colour that you get in photographs.

Speed is important to keep your visitors

Avoid using large photographs if you can, because they take a long time to download.

If you do use one, make sure to use the height and width part of the graphics tag. If a browser has been told the size of a graphic, it places all the text first, leaving space to load the graphics later, so your visitor will have something to read while she waits for the pictures to download. Height and width are in Pixels and you can read them from your graphics program, or using Arachnophilia for a new graphic.

Use interlaced files if your graphics software can make them. This means that every sixth line will be drawn, starting with the first, then every six starting from the second and so on. Your visitor can see the picture being built up gradually, and is less likely to go away.

Keep files as small as possible to save loading time.

I used to have a page using the technique of offering a thumbnail picture, with the instructions to click on the small picture to see a larger one. Here is the code, but the picture is no longer there.
<a HREF="bhcc_l.gif"> <IMG SRC = "bhcc_s.gif" ALT = "Picture an enthusiastic chorus" width=144 height=86 align = "top"></A> The Canberra Chordsmen Click small picture to see full size picture.

That way only people who choose to wait will download the big picture.

To end this introduction, remember that graphics on line are all copyright. You can copy and modify my graphic buttons if you feel like it, I don't mind, but not the cartoon on this page. Some people will object if you use their graphics, and you'll get a letter from their lawyers.

Just right-click on a graphic, and from the menu that drops down, select Save to file. If you want a button with no writing, here is one.
You can, of course, use my templates: that is what they are there for, so there is no copyright protection on them.

HTML Image Tag

The image command is a disguised link so requires the same details as for the URL as for links. It looks like this:
<IMG SRC="http://beginnersmakeownwebsite.com/img/button.gif" align=left
ALT="this is a pushbutton"
BORDER=0 width=137 height=20
HSPACE=0 VSPACE=0 >

What that means is

IMG is the tag for images

SRC tells the browser where to find the graphic. As it is in the same directory, I would use "button.gif" without the rest of the URL

align=left means that the graphic is to the left of any text. (align=right means that the graphic is right of text.)

ALT shows the text to be displayed when a browser has graphics turned off. Always include ALT text.

BORDER = 2 means put a 2-pixel border round the graphic.

width is the width in pixels of your graphic. Always specify - to save loading time.

height is the height in pixels of your graphic. Always specify - to save loading time.

"HSPACE=20" means "don't put anything beside the graphic closer than 20 pixels"

"VSPACE=30" means "don't put anything above or below the graphic closer than 30 pixels"

Photoshop will tell me the dimensions of my graphic in pixels to specify height and width. I don't know how you can find out with your software. If you use the free Arachnophilia editor, it will insert the width and height when you click on a graphics file name.

Another way to align your graphic only works if you want it in a line by itself. You will want to use a BR tag before and after the IMG tag, to give it a line by itself. Then use the paragraph align tag that you saw for text, only this time it aligns the graphic.
 <IMG......>.
CSS allows exact positioning, but is beyond the scope of this lesson.

Background graphics

Without taking much longer to load, you can have a varied background. But don't use it behind text - it is too distracting from the message Don't use a large picture that fills the screen. Use a little one (for fast loading) that is repeated over and over (tiled). Here is the code to put my picture covering the whole page by modifying the body tag (note how difficult it is to read).
<body background="http://beginnersmakeownwebsite.com/img/cloud.gif">. If you want a picture background to one cell in a table you would use this code
<td background="http://beginnersmakeownwebsite.com/img/cloud.gif">

For instance, instead of the solid colour that I normally use, this bit has a small picture with a wispy white cloud. It would be better if the cloud was completely surrounded by blue sky.

If you have a cloud cut off by the left edge of the picture for instance, each repeat of the cloud will have the same sharp cut-off, and it will look tiled. If you have blue all round the cloud, you will get a pleasantly cloudy background, with no sharp edges. How do you code it? Here's how.
<BODY BGCOLOR="white" TEXT="black" BACKGROUND="cloud.jpg">
If you put it inside the body tag as well as the COLOR specification, browsers that ignore the background will use the color specification. It should all be on one line, but works just as well with a line-wrap.

(To read the text more easily, select it with your mouse.)

There's a very nice trick used for the background color of this page. A single vertical multi-coloured line is swept across the full width of the page. It's quick loading, because it's just one vertical line that is one pixel wide. View the source code to discover how it's done (though it might be hidden in the CSS stuff).

Graphics as links

You will remember the standard link tag
<A HREF="TARGET-URL"> text or graphic to click on </A>
All you need to do for a graphic link is to put it where it says text or graphic to click on. In other words you put
<A HREF="TARGET-URL"> <IMG SRC=button.gif> </A>

You would use this technique if you showed a thumbnail picture with instructions to click the thumbnail to see the enlarged picture.

That is really all you need to know about graphics. Don't use image maps, because some browsers can't handle them, and newbies don't know where to click in the map to jump where they want.

Recently I visited a site with plenty of interesting promises, but no obvious way to get there. At last I realised that each promise was on a site map, and I just had to click on the words of the promise.

Next lesson I will show you some ways to use an invisible picture

Yes... really! I'm not joking.