How to use graphics for websites

Using graphics for websites can be tricky, especially for the beginner. Even more difficult is making your webpage look good. How many times have you tried to insert a picture only to find it is in completely the wrong place when you preview it in your browser? This page guides you through the process.

Briefly, the process is:

Understanding the basics - to help you understand what a graphic is.
Finding Images - either using your own pictures or using commercially available pictures.
Editing Pictures - At the very least, you will probably need to re-size the image to the size you would like it to be on your website.
Displaying Graphics - how to include a picture in your web page
Better Layout - Using tables to lay out images

When I first started using graphics for websites I found it difficult because I did not understand the whole process. I hope this guide helps you.

Understanding the Basics

The suffix for a picture is normally .gif or .jpg. There are others, such as .png, but stick to the basics. Whenever a web browser, such as Internet Explorer, sees picture.jpg, it knows you want to display an image and goes and finds it based on the file name you gave it.

The picture you use could be a picture you have made up using a graphics package, such as Adobe Fireworks (expensive) or GIMP (free). It could be a photograph you have taken. Or it could be a photograph or picture someone else has made.

When you have found the picture you want to use, you have to make sure it is in the size you need. As small as possible to take up less memory and speed up the time taken to show the image on the page. Also, save it in a low resolution such as 72dpi. Resolution is the quality of the picture - on the internet, this is low. If this resolution was used in a printed brochure, it would look blurred. But 72dpi (Pixels per Square Inch) is fine for graphics for websites.

Finding Images

Professional looking pictures can enhance your website - only use your own pictures if they look professional. If you do not have professional looking images, you can use other people's graphics for websites. Always obtain permission first.

To obtain permission to use a photograph you need to buy a licence. This can be very easy and cheap to do. There are now a number of specialised websites which offer collections of photos and other images. When you find the image you want, you buy the permission to use it on your website. This often costs only a few cents.

This is all set up for you on the website. Usually, you register with one of these companies and give them some "credit". For example, you put $10 in your account by credit card - this buys you Credits for your graphics for websites. When you find an image you want to use, it will cost a set number of Credits. If you buy the image, your account is reduced by the number of credits. Once you buy it, you will download it on to your computer.

Always check the terms and conditions of the picture you buy - most Royalty Free pictures can be used as often as you want on your websites. Some pictures have restrictions, but they normally apply to advertising and the printed media.

Graphics for websites are available at www.dreamstime.com (my favourite) or www.istockphoto.com. But if you Search for Stock Photography you will find many more.

When you have your image, save it as a .gif or .jpg in a folder for images. I have a special folder I only keep images I have paid for in their 'raw' form. If I work on these images, I save them to another folder.

Editing Images

You can use your graphics for websites as they are or as part of another image. For example, the header block across all pages on this websites is a picture which is 750 pixels wide by 150 tall. It has a blue background with some text on it. There are some images which have been supplied by Dreamstime that have been edited to include some washes, fading etc.

This image was created in a free, graphics programme called Gimp. I have also used a more expensive package called Adobe Fireworks. Both are specifically developed for making graphics for websites. Both require you to go through a learning curve. I have found this excellent Gimp Tutorial. Fireworks comes with its own Tutorial. You only need this package it you intend to make your own pictures.

Alternatively, you could out source the design of your pictures to a graphic designer who will make a professional job.

If you are just wanting to add an image to your website 'as is', such as the photos on the right of this website, you do not need to use a graphics package. You will probably wish to re-size your image - it should be the exact size it has to appear on your website. You may also wish to crop or enhance the picture.

I would recommend using a free, internet based package called Picnik. You simply go to the website, upload your picture, play about with it and then save the new version back on to your computer. There is no need to register with the website. I suggest you visit the website and play about with the features - it is quick and easy to use.

Once you have your pictures as they are to be used on the website, save them in a folder just for those files.

Displaying Images

If you are using template based software there could be a special way to use images. For example, in SBI, you use Blockbuilder. One of the Blocks you add is a graphic Block. This allows you to upload your image to the special Graphics Library (ie, Save a copy of the image in your website area). You can also enter information about the image and make it a link to another page.

If you are not using templates, the html code for an image is:

<img src="url" />

For example, <img src="picture.jpg" /> or <img src="images/picture.jpg" /> In the second example, the picture is stored in a folder called 'images'. You need to include the path name.

This will display a picture but you may want or need more information.

A Description

<img src="picture.jpg" alt="description" /> When someone puts their cursor over the image, the 'alt' text will appear. This is helpful for the visually impaired.

Align

You can display your image to the left or right of text or to the top or bottom. For example:

<img src="picture.jpg" align="left" align="top" alt="description" />

Size

Although it is better to save the image as the exact size, if it is being used several times in different sizes you can use the sizing attribute.

<img src="picture.jpg" alt="description" width="20" height="20"/> - this makes the picture 20 pixels high by 20 pixels wide.

Make sure you check the quality of the resulting pictures.

Creating a Link

<a href="http://www.anotherdomain.com/page.htm"> <img src="picture.jpg" alt="link to xyz" width="32" height="32" /> </a>

When a visitor clicks on the image they are re-directed to the other page.

To delete the border:

<a href="http://www.anotherdomain.com/page.htm"> <img border="0" src="picture.jpg" alt="link to xyz" width="32" height="32" /> </a>

To re-direct to a page in a new window:

<a href="http://www.anotherdomain.com/page.htm" target="_blank"> <img src="picture.jpg" alt="link to xyz" width="32" height="32" /> </a>

For more information on images, a good source is www.w3schools.com.

Displaying graphics using tables

Often, the above code does not work very well. Sometimes, the image does not display the way you want it to or you need some caption text. A good technique is to use tables.

To do this, you need to understand tables. The simple code for tables is:

<table border="1"> (This means start a table. You could make this "0" for no border.)

<tr> (This means start a new row)

<td>row 1, cell 1</td> (This is the data in the first 'cell')

<td>row 1, cell 2</td> (This is the data in the next 'cell')

</tr>(This means the end of the row)

<tr> (This means, start a new row)

<td>row 2, cell 1</td> (This is the data in the first 'cell')

<td>row 2, cell 2</td> (This is the data in the next 'cell')

</tr> (This means the end of the row)

</table> (This means the table is finished)

This is a table with 2 rows and 2 columns. For more columns, add more <td> between the start and end of the rows.

To insert a picture into a cell, the data will be <img src="picture.jpg" /> followed by any of the above code. You could also have text in some or all of the cells.

<td width="120" align="center" valign="top"> - adding this extra information to the <td> is helpful. It will mean that all the cells are the same size regardless of the size of the image.

Please see www.w3schools.com for more information on using tables.