HTML Images

Adding Images to Your Pages

The image tag (<img />) is used to embed images into your web page. You must include the "src" attribute, which stands for source. This is a relative path to the image if stored in your site, or the URL of the image if stored elsewhere. The <img /> tag is another tag that doesn't require a closing tag as the tag's attributes have all the information to complete the element.

You will normally have a folder in you root directory for your images. I normally call this folder "images" for some reason. To link to an image named "sunset.jpg" in this folder you would use a tag like:

<img src="images/sunset.jpg" alt="Beautiful Sunset"/>
	

Browser Display:

Other Image Attributes

Alternative Attribute

The alternative attribute (alt) is used to display information about the image if the browser can't find it or if the users browser is set to text only.

<img src="images/sunset.jpg" alt="Sunset From Ingleside Texas" />
	

Width and Height Attributes

You can set the width and height of your pictures in your html. Note that this is not the same as resizing the image, it will just display the image in the dimensions specified by these attributes. It always best to make sure your images and thumbnails are the size you want for the page rather than try to adjust them with these attributes.

When you use a full size image and set these attributes to make the image smaller it will result in the full size image still being downloaded, therefore making your page load times longer. Also setting these attributes to a width/height value that doesn't match the original aspect ratio of the image will distort the image, like so:

<img src="images/sunset.jpg" alt="Sunset From Ingleside Texas" 
   width="400" height="150"/>
	

The align attribute also works for images to align them left, right or centered in their container. However the preferred method for aligning images is to use CSS. Review our CSS tutorials to learn how to align images the right way.

Using Images as Links

A thumbnail is a smaller version of an image used to link to a larger high quality image. You can use an image as a link by using an image element in place of the link text. Your thumbnails should resize your images with a program such as photoshop, not with the html "height" and "width" attributes.

Here is an example of how you would use a thumbnail to link to an image.

<a href="images/sunset.jpg">
  <img src="images/sunset_thumb.jpg" alt="Link To Sunset Image"/>
</a>
	

Browser Display: