HTML Images

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

Example of Image Usage

HTML Code:


<img src="http://www.quackit.com/pix/smile.gif"
	width="100" height="100" alt="Smile" />

This results in:

The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:

src	Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
width	Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
height	Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
alt	Alternate text. This specifies text to be used in case the browser/user agent can't render the image.

Image Alignment

You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.

HTML Code:


<p>
<img src="http://www.quackit.com/pix/smile.gif"
	width="100" height="100" alt="Smile" align="right"/>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p> </p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look funny.</p>

This results in:

Smile Here is a paragraph of text to demonstrate HTML images and how they can be aligned to the right of a paragraph (or paragraphs) if you so desire.

This can be used to produce some nice layout effects, especially if you have a lot of text, and it runs right past the image.

Otherwise, the image will just hang below the text and may look funny.

Image Links

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.

HTML Code:


<a href="http://www.quackit.com/html/tutorial">
<img src="http://www.quackit.com/pix/smile.gif"
	width="100" height="100" alt="Smile" />
</a>

This results in:

Removing the Border

You might notice that this has created a border around the image. This is default behaviour for most browsers. If you don't want the border, specify border="0".

HTML Code:


<a href="http://www.quackit.com/html/tutorial">
<img src="http://www.quackit.com/pix/smile.gif"
	width="100" height="100" alt="Smile" border="0" />
</a>

This results in:

Creating Images

The above examples assumed that you already had an image to embed into your web page. To learn about creating images for the web, check out the Web Graphics Tutorial.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites