HTML Images Graphics HTML Images
HTML Images Tutorial and Information

HTML Tutorial - HTML Images

Web sites consist of HTML documents and image files (.gif or .jpg). With HTML images can be added to HTML documents to add graphics, photos, and pictures. These images can act as graphic enhancements, background, links, and more.

How To Add An Image To A Web Page

With HTML an image file can be added with the <img> tag. The image tag has no closing tag and needs the src attribute in order to specify the source of the image. The value of the src (source) attribute is the location or URL of the image you want to display on the web page.
Here is what the HTML code for an image looks like:
<img src="url">

The image tag should always be accompanied by the alt attribute, as well as the height and width attributes in order to validate with an HTML or XHTML validator.

What Is The Alt Attribute or Alt Tag

The alt attribute is used to display alternate text for an image in case the web browser is not able to load the image file. In this case the alt attribute (alt tag) displays "alternate" text describing the image for the user. The alt tag also displays this text in most web browsers when the image is hovered with the mouse pointer.

Note: We strongly reccommend the use of alt tags or alt attributes for all images in your web site. The alt tag and it's text is a very important factor in search engine optimization!

Here is what a complete image source code should look like:
<img src="images/image.gif" height="50" width="100" alt="This is a test image">
This is a test image
If you now move your mouse pointer over the image file the alt text will be displayed in most web browsers.

Optimize An Image File For The Web

Before you use an image file (photos, pictures, graphics) on a web page make sure the image is optimized for use on the world wide web. Optimizing and image file means that the file size of the image is optimized to the smalles possible file size without compromizing the quality of the image. Most graphic applications let you optimize images for the web. Also make sure your optimized image file has the same height and width as specified in the image source code (img src).

If the image file is not optimized for the web it might take a long time before the image loads. This results in long waiting periods for people with slow internet connections.

How To Align An Image

Images can be aligned in several different ways. The align attribute and it's values are being added to the img src code:

Vertical Image Alignment:


Horizontal Alignment


For more information about how to align an image go to HTML alignment.

How To Add A Hyperlink To An Image

Please visit HTML Links for more information about linked images.

More HTML Image Resources

HTML Related Links

© This Article is Copyrighted by

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to - Thank You!


Copy the code below and paste into your web page
<a href="">
Webmaster Seminar</a><br />
HTML Images - Free Information, Tutorials and HTML Resources