You can use the <img> tag to include images in HTML. Specifying width and height attributes can improve page download time; specifying an alt attribute is necessary so that text-only browsers can understand the page.
Setting up
To include an image in your HTML page, you need to upload the image onto the server along with the pages. You can then refer to the image in a similar way to linking to other pages (e.g. "pic.gif" refers to a file in the same folder as the page; "images/pic.gif" refers to a file in the images subfolder of the page's folder).
Example
This example includes an image called "chess.gif" in a page. The image is 200 pixels wide and 150 pixels high, and shows two people playing chess.
<img src="chess.gif" width="200" height="150" alt="Two people playing chess" >
Note that the tag does not have a closing </img> because it doesn't contain any content: the entire content of the tag is the image itself.
width= and height=
Including the width and height of the image (in pixels) is optional, but speeds up displaying of the page, because the browser knows how much space to allow for the image; this means that the rest of the page can be displayed before the image has loaded.
alt=
The value of the alt attribute should describe the image. This text will be used in place of the image in text-only browsers, speech browsers, and in ordinary browsers when image-loading is turned off.
It is important to have correct alt attributes that provide useful descriptions of the image (i.e. not "this is a picture" or "turn image loading on") so that your page is accessible to those not viewing images for any of those reasons.
If your image does not have a text equivalent (for example it is purely for decoration) then use an empty alt attribute:
alt=""
If your image contains text (for example, it is a graphical heading) then that same text should be available within the alt attribute.
