How To Add
Images To Your Web Page
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.
Graphics and images for the web are saved as
.jpeg or .gif
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.
is used for simple images like clip art and logos. It's limited to 256
colors, so it's no good for photos.
Images In Their Own Folder
If you put all your web page
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”.
first thing to do is to make yourself a folder and put your images in
What To Do To Add A Web Page Image
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
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
Go 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.
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
the alternate text are exactly the same.
notice at the top of the dialog box there are tabs for Dimensions, Appearance and Link.
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
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.
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.
Text With Your Images
I often want to put some text with my
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.
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:
align="right" width="260" cellpadding="5">
IMAGE GOES HERE<BR>TEXT GOES
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.
example of a picture and text in a table. Image width is 250 pixels.
Table width is 260 pixels.
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.
puts 5 pixels
clearance between the table border and any text or image. Change the
number for more or less clearance.
<BR> is for a line break.
code into the HTML code where you want the web page image to
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.
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.
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
to line up a row of photos you can also use tables to get them looking
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.
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.
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.
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
to have people looking for pictures.
sure you're optimizing
the web images
for quick loading and happy visitors before you add them to your
from Web Page Images
to Building A Web Page
to How To Build A Website