If you are not clear about image formats for the Web, or how to optimize
your images, read this article
on crunching graphics.
Once you understand how to create and optimize graphics for the Web,
you are ready to add them to your website.
The <IMG> Tag
Adding an image to your page is relatively easy. First you tell the
browser there will be an image. You then explain where the image is located.
Finally, attributes such as alignment and borders can be assigned.
The basic tag looks like this:
The img explains that this tag will call up an image. SRC
defines the source -- or location -- of the image. The location is placed
between quotes and should include the exact path of the image. For example,
if the file you are working on is located in the main (or root) directory,
and the image you want is in a folder called images, the SRC would equal
Tip: The organization of your website is important. Create separate
folders for each section as well as one for your graphics.
Let's say you have a site devoted to FoxTV. Each show would have its
own folder and you would most likely have an images folder as well.
Picture the letter Y. The bottom of the Y is the root directory and
each arm represents a folder. One arm is the News folder and the
other is the image folder. In order to reference an image from the News
arm, you have to come down to the stem of the Y before you can reach the
other arm. Likewise, you need to come out of the folder you are in to
go into the folder you want.
The html code must reflect this. In order to reference that folder,
you precede the folder and file name you are looking for with a ../.
Each layer of folders can be accessed with an additional ../, so
if you have to go up two directories, your code would look like this:
An alternate method to reference this image would be to include the
The IMG tag can be aligned left, right, center, bottom, top, middle.
This refers to the image in relation to other things on the page. If you
only have an image and you set it to align=right, the image will appear
on the right side of the page. If you place this tag in front of a paragraph,
the image will appear to the right of the paragraph.
You can place the align attribute before or after the file name. Just
be sure to separate it with a space:
<IMG SRC="filename.gif" ALIGN=LEFT>
Other Align Attributes
Use any of these attributes after align=. The envelope graphic demonstrates
the attribute in action.
-- Puts the bottom of the image with the bottom of the current line.
-- Puts the middle of the image next to the current line.
-- Puts the bottom of the image with the baseline of the current line.
-- Puts the bottom of the image with the text baseline. This is the default
-- Should center the image horizontally but most browsers treat it the
same as 'middle.'
-- One of the more popular which puts the image on the left and wraps
the text around it, like in a magazine.
-- Puts the middle of the image with the text baseline.
-- Puts the image on the right side and wraps the text around it.
-- Only works in Navigator. Puts the top of the image with the ascenders
of the text line.
-- Puts the top of the image with the top of the tallest object on that
Alternate Text, Size, and Borders
Use the ALT attribute
Whenever you add a graphic to your site, don't forget to include the
ALT tag to describe your image. Not everyone will be able to see your
Some people browse the Internet with images turned off and some have
text-only browsers. Some disabled people rely on software that can read
the contents of a page to them. This software cannot read an image and
the image titles are often not intuitive enough.
The ALT tag comes to the rescue. ALT="description of image" will not
only display the text in the place where the image loads, but will display
the text when the mouse hovers over the image. This way, even though the
image is not seen, a description is. If you move your mouse over the TechTV
graphic above, you'll see how this works. You might need to wait a few
seconds to see the text.
You can also add a border to your image. Just as you add the align attribute,
you would add BORDER=# (0-99) within the image tag. This places a black
border of that width around your image. When an image is linked, it will
have a border by default. To override this, add BORDER=0 to the IMG tag.
Add size attributes to your image to alert the browser to the layout
of your page. Size is determined by HEIGHT and WIDTH, which are set to
equal the pixel dimensions of your image:
<IMG SRC="filename.gif" WIDTH=50 HEIGHT=100>
Tip: You can tweak an image's size by changing the WIDTH and HEIGHT
values. For example, if you create a red square that is only one pixel
by one pixel, the file size will be small, but you can make the image
as large as you want. Set the square's size to HEIGHT=1 and WIDTH=400.
Voila-- an instant line.
Other <IMG> Attributes
The following attributes aren't used as commonly.
Refines the align attribute by dictating how pixels to leave clear to
the left and the right of an image.
This tells the browser that ime image is being used as an image map. We'll
get intop that later. Suffice to say that the image map is an image the
has different links embedded within it.
A link to a long description of the image. USeful for nonvisual browsers.
Specifies a smaller image that can load first. Useful if you want to speed
the comprehnsion of pages with large images. The lowsrc will load first
giving the viewer an idea of what the full image will look like.
Specifies the map information for an image map. Lets the browser know
which parts of the image link to where.
Further refines the align attribute by determining how much space in pixels
to leave above and below the image.