 | | 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 FormatsGraphics 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. 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 FolderIf 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 ImageIn
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.
 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.
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 ImagesI 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>
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.
Photo
GalleriesIf 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 TrafficImages 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
|
|
