HTML: The Image Tag

The Image Tag

In this tutorial on the HTML <img> tag, you will learn the basics of showing an image on your web page. For the tutorial, you will need the index.html file from Lesson 1. If you don't have the basic index.html template from Lesson 1, you can download it here.

You will also need a sample image; you can use the one below. Just mouse over the image, right-click and choose "Save picture as" and save it with the file name 'xoaxdotnet.png' to your hard drive in the same place as the index.html file from Lesson 1.

XoaX.net Sample Image

Right-click on the index.html file and choose 'Edit.' Add this code after your paragraph tags (<p> . . . </p>) and before the end body tag (</body>):

<img alt="Test Image" width="359" height="359" src="xoaxdotnet.png" />

Save the index.html file and then double-click it so that it opens up in a web browser. You should see the example image displayed in your web page.

An image is an inline element, which means that it can be placed anywhere, even inside <h1/> tags or <p/> tags even. To illustrate this, move the image tag code so that it in within the paragraph tags in your index.html file, like this:

<p>This is
     <img alt="Test Image" width="359" height="359" src="xoaxdotnet.png" />
body text.</p>

Save the index.html file and double-click it again. Now you'll see the example image appear in the middle of the paragraph (see below). For instance, you can use images inside paragraphs to show mathetmatical symbols that don't render easily in web browsers, or fancy capital letters to start a section of text.

You may notice in the image tag code that there are four attributes, two of which are required but all are good practice to make a better web page.

alt="Test Image" The alt tag describes what is in your image and is required by the DTD we chose. The alt text is shown by the web browser when or if the browser cannot render your image due to a setting in the browser or the image not being found. If the image is for decoration, like a shadow on a box or a frame around something, use an empty alt="" attribute instead of omitting it entirely.

width="359" height="359" The width and height attributes help a web browser render a page faster because it knows exactly how much space to allow for each image. See the video tutorial for an example of a page loading when width and height are specified. The page loads with the text in its final place and leaves correct dimensional layout space for the images to download into. The video tutorial also has an example of a page that doesn't specify width and height. The text starts in one place, but then jumps around to accomodate the images after they are downloaded and their dimensions are understood.

The image tag sets the width and height to 359 pixels in dimension. You only need to put the pixel number in the value of the attribute (no 'px' is required or even needed). Percentages (width="100%") are acceptable per the DTD but won't help the web browser render your image correctly, so avoid using them.

Also, it's advisable not to use Cascading Style Sheets (CSS) to set the width and height for images because the text will still jump around on the page, and the web browser will not know the correct dimensions of the images until after the images are downloaded. This is because the web browser renders the HTML in the web page first, and then reads the CSS rules to apply to the page. So, setting the width and height attributes on the image tag is the best way to achieve a well-rendered web page.

src="xoaxdotnet.png" The src attribute is required so that the web browser knows where to retrieve the image from when rendering the page. The value specified here and discussed in the video tutorial works when your image is in the same folder as your web page file.

But, if your image is one directory up from where your file is, like this:

  • C: est\index.html
  • C:\xoaxdotnet.png

Then you will need to specify your file name differently by using './../' to tell the web browser to move back up out of the directory from where the web page is to find your image file:

<img alt="Test Image" width="359" height="359" src="./../xoaxdotnet.png" />

And, if your image is two folders down from where your web page is, like this:

  • C: est\index.html
  • C: est\img\more\xoaxdotnet.png

Then we will need to specify our src value this way:

<img alt="Test Image" width="359" height="359" src="./img/more/xoaxdotnet.png" />

Since we are using what is called relative paths, we always use the './' at the front which states that we are starting in the current directory, which in this case is C: est. When you upload your web page file to a web server to show on the internet, you will not have file system file paths like C:\ but you can use either relative paths or the absolute URL of your domain.

To specify a full URL to the image on your web server (or on XoaX.net's for this example), like this:

<img alt="Test Image" width="359" height="359"
                                  src="http://xoax.net/xoaxdotnet.png" />

And finally, just a note on how to make images for the web. It is good practice to keep images on your web page small, about 500 pixels in height or width or less. If you have a larger image, the file size will be larger as well, and it will take longer for the browser to download it and render it on your web page.

You can resize your image down in photo editor software freely or commercially available on the internet.