Website Building 101: Putting in Pictures


Adding pictures and other graphics can lift your pages, add colour and life as well as make them easier to read. They can give novices to building webpages a real headache, though. Here is a simple guide.

The very first step to adding pictures is to make them the correct size for the space on your webpage. This means don't just click on the picture in your html editor and push it to the right size because doing that doesn't reduce the file size. If you do that and have a jpg that is 2mb, for example, even though the picture looks smaller, the file size will still be 2mb.

Use a picture editor to reduce the size of the picture which will reduce the file size too. The free Google graphics management program Picasa has a really easy way of reducing the size of pictures and other graphics. Large files take a long time to download when a page opens and people won't usually hang around and wait for it to happen so it's really important.

If you want text to flow alongside the picture, this is the code to align right for example:

<img src="../graphics/blackpool_tower.jpg" width="250" height="314" alt="Blackpool Tower and beach, Blackpool, Lancashire" hspace="10" vspace="10" align="right">.

I'll unpack this tag:

img src="../graphics/blackpool_tower.jpg" - this says where the picture can be found on the server, it's in a folder called graphics and the name of the picture file is blackpool_tower.jpg.

width="250" height="314" - this shows the size and, most important, the picture has been changed to this size before uploading on to the server. While on the subject of picture file sizes, you usually don't need more than 72 resolution for pictures online and this helps to keep the file size down.

alt="Blackpool Tower and beach, Blackpool, Lancashire" - this is what people will read if they browse with graphics turned off so they don't see the picture. They will know what the picture showed. It is a useful way getting more keywords on to your pages naturally for search engines.

hspace="10" vspace="10" - this put a 10 pixel space horizontally (hspace) and vertically (vspace) around the picture so text doesn't go right up to the edge.

align="right" - unsurprisingly this aligns the picture right. You can have align="left" instead, if that suits your page better. When you do either of these, the text will display alongside the picture.

Don't forget that even if you are using an html editor, you can always change the code yourself. For example, you could copy and paste the tag above and substitute your own folder and picture file name. You could change the hspace and vspace to another number and align left. You would, of course, change the alt to your own picture title.

Trying this kind of thing in your code will help you understand more about using html and what happens when you make changes. Even making mistakes can be helpful as long as you eventually understand what the mistake was and what effect it had.


Copyright © Carol Fisher 2006. All Rights Reserved.