logo for building-a-web-site.com






leftimage for building-a-web-site.com

How To Add Images To Your Web Page

This page shows how to add photos, images and graphics when you're building web pages, and how to use them to get more traffic. Before you add them though, make sure to optimize images for the web so they load quickly.

Web Image Formats

Graphics and images for the web are saved as .jpeg or .gif

Jpeg is used for photos and it lets you reduce the file size without reducing the quality of the image. That means the photo loads a lot faster in a web browser, and faster loading means happier visitors.

Gif is used for simple images like clip art and logos. It's limited to 256 colors, so it's no good for photos.

Keep Images In Their Own Folder

If you put all your web page images in their own folder it keeps them together and generally makes things tidier and easier to manage. This folder is put in the same folder that holds all your web pages and it's probably not surprising that most webmasters name it “images”.

 So the first thing to do is to make yourself a folder and put your images in it.

What To Do To Add A Web Page Image

In short, you open your web page editor and click where you want to insert an image. Then you insert the image and specify how it's displayed. That is, you can specify how text wraps around the image, how much clear space there is around it, whether or not it has a border, what the alternate text is, and more.

As an example here's how you do it in Nvu, a free web page editor. Your web page editor will probably do it a bit differently, but you should get all the same options.

Dialog box for inserting images using NvuGo to Insert in the menu bar at the top of the page then click on Image. You'll get a dialog box pop up as shown. Click on Choose File and navigate to the image file you want.

You can tick the box URL is relative to page location. Just make sure that when you upload your pages to your web host that the images folder stays in the same place relative to the web pages, or the web page won't be able to find the photo.  You won't have any problems if the images folder is placed in the same folder as the web pages both on your computer and when you upload them to the host.

The Tooltip is text that shows when a visitor places the cursor over the image, and Alternate text shows when someone is surfing with images turned off. It's also used for vision impaired people. It's quite possible that the text in the tooltip and the alternate text are exactly the same.

You'll notice at the top of the dialog box there are tabs for Dimensions, Appearance and Link.

It's always a good idea to give the dimensions of the pictures because most browsers need the height and width of all the pictures before they display the whole page. If they have to calculate sizes the page takes longer to load.

In the Appearance tab you specify how the text wraps around the image, and how much clear space there is on the sides and top and bottom.  For the picture of the dialog box above I had the text align to the left and had a 10 pixel spacing all around.

The Link tab is to use the picture as a link to another page. I normally use that for linking thumbnails to pages with larger images, and of course you can use it if you're using images in your navbar.

Putting Text With Your Images

I often want to put some text with my web page images as a title or to explain what they're about, but there isn't any caption tag that keeps images and text together. Because of that I put the image and the text in a little table of their own. 

I do that in the source code so that I can get the rest of the text to wrap around the table. The code I use is:

<TABLE align="right" width="260" cellpadding="5">
<TR>
<TD>
IMAGE GOES HERE<BR>TEXT GOES HERE<BR>
</TD></TR>
</TABLE>

Example of a picture and text in a table
This is an example of a picture and text in a table. Image width is 250 pixels. Table width is 260 pixels.

On the top line align=”right” puts the table for the image on the right side of the page. Change it to left if you want.

 Width=”260” makes the table 260 pixels wide. Change that to suit the width of the image. I normally make the table a little wider than the image to get some clear space around it.

Cellpadding="5" puts 5 pixels clearance between the table border and any text or image. Change the number for more or less clearance.

The <BR> is for a line break.

Paste the code  into the HTML code where you want the web page image to go. Then go back to the normal design view and you'll see a  table with IMAGE GOES HERE on the top line and TEXT GOES HERE below it.

Insert your photo or other image as explained above, and put your text where it says. You can format the text however you want, just make sure that it's obvious that it's with the photo and not part of the rest of the text. 

If the table stays centered and you've use CSS to center your web page, then you'll need to look at aligning CSS HTML tables for more info.

Photo Galleries

If you need to put a lot of photos on a page you can make your own gallery by putting the photos in tables. If you just want to line up a row of photos you can also use tables to get them looking tidy.

There are a lot of ways of arranging the tables, so you'll have to work out what suits you best. You can look at competitor sites to get an idea of what others have done. I've used photos in a horizontal rows with text below them and in a vertical row with text alongside.

You can get software to automatically make photo galleries for you but I can't tell you much about it as I've never used it. Do a search if you think it will be useful.

You can use Adobe Photoshop Elements to build galleries for your web pages, so if you already own it to edit your photos, give it a try.

Using Images To Get Traffic

Images are content too, and if you have the right type of site and you work it right they'll bring in extra traffic. Images searches in Google and Yahoo are popular.

The main thing is to have the keyword you want to be found for in the filename of the image and in text near the image. Put them in the alternate text as well. Don't go overboard, because the search engines could consider it to be keyword spam, and actually drop you in their rankings.

Traffic from photos won't be as important as traffic from your written content, but it doesn't take much effort to optimize your images for the search engines, and every little bit helps.

I don't expect to get much traffic at all from the web page images on this site because it's the wrong type of site to have people looking for pictures.


Make sure you're optimizing the web images for quick loading and happy visitors before you add them to your website.




Return from Web Page Images to Building A Web Page

Return to How To Build A Website Home

Have you subscribed to the Insider Secrets To Web Success minicourse yet? You'll learn what you must do to have a website that gets visitors and makes sales. Subscribe Now!



Privacy | Disclaimer | Links