left-pointing arrow for navigating to previous page

HTML Tutorial: Images

right-pointing arrow for navigating to next page

spectacular oranges and purples in the sky over Monksville Reservoir at dawn Dawn Sky courtesy of www.MonksvillePhotographs.org. (<img align=left ... >)

This is the last basic topic. With some images you'll be able to build just about any site you want. (Did I mention sound and movies? Sounds are simple. Ask your friend Mr. Google. But remember, the computer I'm on right now has no speakers. No Flash player, either.)

Images are dead simple. You just drop in:

<img src="my-picture.jpg">

With that, my-picture.jpg will be part of your page. There is no "end image" tag.

Sort of. But there is one "gotcha." We'll go there first.

The  border=  Attribute

Breakfast in Frost Valley courtesy of www.MonksvillePhotographs.org. (<img align=right ... >)

two horses grazing in pasture with dawn mist I don't remember the last time I saw a border around an image. Webmasters never use them. So why do the MSIE browsers default to a 1 pixel border? I don't know. Every other browser defaults to zero (no border). The point is that if you want a border, you must specify border=1 (or a larger number) and if you don't want a border you must specify border=0 or your MSIE browsing audience will get a border. You must use the border attribute.

The  alt=  Atrribute

The alt attribute is not a "must" but you should use it anyway. There are browsers made for the visually impaired that speak the text of websites. It's not a big audience, but your sites should be considerate.

Don't dismiss that as being PC. One class of visually impaired that is vital to your site is the search engines' web crawlers. They read the alt attribute to see what is in your site. So if you want your site to appear in the first 10 results in a search category, make sure the web crawlers can "see" your images. Include the alt attribute.

MSIE uses the alt attribute as a tooltip if the mouse hovers over the image. If you want tooltips on hover, use the title attribute that is required in most browsers. (An empty title does not supress MSIE's tooltips.)

The  align=  Attribute

align=center doesn't work! We'll get to that momentarily.

There are two levels of things rendered by the browser: inline and block. Individual characters and words are inline. One follows another and the browser will insert breaks as needed. Images and tables are inline, too. Here's an example:

Images Southern Wall of Manitou, Catskill mountains rising above Hudson Valley, photographed from Olana and words Central Wall of Manitou, Catskill mountains rising above Hudson Valley, photographed from Olana are inline Northern Wall of Manitou, Catskill mountains rising above Hudson Valley, photographed from Olana elements.

Photographs courtesy of www.MonksvillePhotographs.org.

These images do not include the align attribute. This is seldom what you want. As you've seen above, you can align to either left or right and the text will flow around the image. But suppose you want the graphic centered?

align=center is documented as accepted HTML but it doesn't work in any browser I've tried. What to do?

You can create a block with the <div> tag (short for "division"). Fortunately for us, <div align=center> will center the entire division of the document. That's mostly useless, except that it may be exactly what you want for photographs:

Pine trees over 100 feet tall on Peekamoose Mountain

Pines on Peekamoose courtesy of www.MonksvillePhotographs.org .

This is the HTML for the above: 

<div align=center>

    <img
        alt='Pine trees over 100 feet tall on Peekamoose Mountain'
        border=0
        src='graphics/catskills-25.jpg'
        title='Photographed on Peekamoose Mountain, near Sundown, NY'>
    <p>
    Pines on Peekamoose courtesy of
        <a href='http://www.monksvillephotographs.org' target=_new>
         www.MonksvillePhotographs.org </a>.

</div>

The  style='height:  and  width='  Attributes

Ideal: make your image the size you want and you won't need height and width attributes. Displaying in another size tests browsers' image manipulation capabilities. Display a 300 x 200 image at 640 x 480 and you're just about guaranteed to get a bad result. Display a 300 x 200 image at 150 x 100—that may work decently.

How do you size an image you have? I use Adobe Photoshop Elements, the baby version of Photoshop. In Elements, choose "File/Export...". The dialog that follows lets you choose a size. (The product plus a book on how to use it can be purchased online for less than $100. If that's too much, the Gimp can be downloaded for free, but you'll have to figure out how to use it on your own.)

The  title=  Attribute

Would a tooltip be helpful when the user's mouse hovers over an image? Any text assigned to the title attribute will do the trick. Use your mouse to hover over any of the images on this page to see the effect. Remember that the alt text is for visually impaired people and things. It should describe the image. The title text is for sighted people. It should add additional information regarding the image.

Unlike the alt attribute, which I highly recommend, the title is optional. Use it only if you want tooltips. In MSIE, which uses alt text when there is no title text for a tooltip, use the title attribute if you don't want to show the alt text.

The  graphics  Subdirectory

Relatively simple sites go with a main directory and then a subdirectory named "graphics" for the images. To get the images, use this form: 

<img
    ...
    src='graphics/whatever.jpg'
    ...
    >
Note that it's a Unix-style forward slash, not a Windows style backward slash.

Allowed File Types

The ".jpg" format is a good one, featuring good compression and correct operation on all browsers. The ".gif" format has a history of legal issues but is now an excellent choice. You could use ".bmp" but don't use it for anything other than icons—you'll have no compression and monster file sizes. Lots of other types are supported, too. The excellent ".png" (created as the true freeware alternative to the patent-encumbered ".gif") is trashed by MSIE 6, sorry to say.

Experiments

Add some nice images to your site's pages. (See below if you don't have your own picture files.) I use this format for my images: 

    <img
        alt="sleeping tabby kitten, eyes shut tight but ears still alert"
        border=0
        src="snoozy-kitten.jpg"
        title='Photographed by the author, 12/31/2007, Pentax K100D.'>
I've added a picture of me to my revised index.html and put the "next page" link into a table (border=5).

What If You Don't Have Images?

Two solutions: get a digital camera and take some pictures is one solution. Even the cheapest (under $50) will take good snapshots. For $500 you can get a DSLR that will take better pictures than the best film SLR camera ever could.

Or if you want free pictures (or it's the middle of the night and you want pictures Right Now) here's an alternative. Go to my hobby site, www.MonksvillePhotographs.org and copy any of my pictures or their thumbnails. Right click over any graphic and you'll have a "save as" option in any major browser. (Don't use the Fast Ladies, or any other humans, unless you can get them to sign releases.) Please include:

Photograph courtesy of <a href='http://www.MonksvillePhotographs.org'> www.MonksvillePhotographs.org </a>.

Congratulations!

Congratulations! You've come to the end of the basic topics. You're ready to build your site. As a quick reminder of everything you've seen, you can use the HTML Poster.

I love posters!