How do I include graphical images on a web page?

To include graphical images on a web page, use the HTML <img> tag. The basic syntax is:

Replace filename with the name of a graphical image file in a .gif or .jpg format. You will see the image when you view the page with a graphical browser such as Firefox, Safari, or Internet Explorer. You can also include text that will replace the image in text-only browsers by using the alt attribute, for example:

Always include alt text for an image. Screen readers for people with visual disabilities use alt text to make your content accessible. Other people (especially those accessing the Internet over a slow connection) will sometimes disable images in their browsers; moreover, many individuals view web pages over devices which do not have fully functional browsers (e.g., PDAs or mobile phones). Without alt text, your web page might not be comprehensible in such cases; it is generally considered good web design to include the text. For more detailed accessibility guidelines, see Indiana University's Web Standards.

By default, images are aligned to the left with subsequent text continuing at the lower right of the image. You can specify where text should be aligned with the align attribute. For example, to have text start at the upper right of your image, you could use:

Other alignment options include bottom, middle, left, and right. Using left and right alignment creates floating images, allowing you to wrap text around an image. However, be careful with floating images since they may overlap text or other images.

If you use a floating image, you can add the vspace and hspace attributes with the <img> tag to add space between the image and the surrounding text. The attribute vspace controls the vertical space around the image, and hspace controls the horizontal. Add a value in pixels to determine the space added, for example:

You can make graphical selection buttons by including images inside the scope of <a href> tags, for example:

Including the attribute border=0 will prevent the image from being outlined in the hotlink color. If the image is a command button (e.g., clicking it returns to the home page), you should provide explanatory text with the alt attribute, as described above. Otherwise, users of text browsers might not know what the link does.

To increase the speed at which browsers display a document, or to change the size of an image, you can add the height and width attributes. You can set the value in pixels (e.g., height=72) or in percentages (e.g., width=150%).

Note: Images can be included in the scope of other HTML tags such as table elements to give you more control over their position. You can also control image positions using style sheets; for more about style sheets, see What is CSS?

Also see:

• How do I turn off inline images in my web browser?
• How do I make nonrectangular images for my web page?