Tutorials - HTML - Images

Images can be displayed in webpages using the <img /> tag. <img /> is another example of a singular tag which does not have a closing tag. All the information which the tag requires in order to display an image is included within the attributes of the tag itself. We'll look at how to get images on your webpages, and the attributes which you can use to change the way they display.

Image Source (src)

Using the source=".." attribute, we tell the browser where to locate the image file which should be loaded as the image.

<img src="/images/bridge-in-london.jpg" />

There are a number of ways we can specify where the image source resides. In the example, we have chosen to use the relative path for the image. The means that, relative to the directory we are currently located in on the webserver (in this case, the directory this tutorial lives in) we follow the path specified in the src attribute. If our tutorial is located in "http://www.openzu.com/" (the path you see in the address bar is rewritten using the webserver, you'll learn how to do this later if you follow our tutorials all the way to our tips and tricks) we add "images/bridge-in-london.jpg" to the path, and get "http://www.openzu.com/images/bridge-in-london.jpg". Alternatively, we can specify the image source as:

The full path - "http://www.openzu.com/images/bridge-in-london.jpg"
A path relative to the web root - "/images/bridge-in-london.jpg" - No matter which web directory the current file is located in, by adding a slash to the beginning of the source we are indicating that we want to add our folder path to the web root.
A path relative to the previous directory - "../images/bridge-in-london.jpg" - By adding "../" to the start of the path we indicate we want to move to the previous directory, and follow the folder path from there.

An image source cannot contain drive letters, because the source is always relative to a web directory.

Image Alternative (alt)

If the browser cannot load the image specified in the source attribute for any reason (for example, the file is missing), the alt=".." attribute can be used to specify alternative text which should be displayed.

<img src="thisimagedoesntexist.jpg" alt="Alternative Text" />

You should always include the alt attribute on images, even for blank or spacer images. This is because screen readers will read the full filename of the image if the alt attribute is not included. Use alt=" " for images which should not have alternative text. Alt text should be descriptive of the image, and should only be used when the image is adding content to page, rather than when the image is being used for purely aesthetic purposes. In Microsoft Internet Explorer, the alt text is shown when you however over an image. Google primarily use the alt attribute when attempting to decide what an image is about for image search, but will also use the title attribute and surrounding content to some extent.

Image Title

The image title attribute (title=" ") is similar to the alt attribute, however it should be used to provide additional information about the image. It should follow the same rules as any other title, in that it should be short and descriptive. Standard-compliant browsers like Firefox, Chrome and Safari show the title text when you hover over an image. You should use both the alt and title attributes with images which are part of your content, and a blank alt attribute with images which are part of your layour

Image Height and Width

You can specify the height and width of your image in the image tag. This is useful as the browser will automatically allocate the required space for the image before the image is loaded, so even if the image fails to load your content will still be laid out the way you expected it to be. The height and width tags can also be used to resize images, however this is not recommended in most cases for two reasons:

Unless your height to width ratio is the same the image will be stretched
The browser still downloads the full size image before resizing it, so this cannot be used for thumbnails

Here is an example of an image being stretched by incorrect height and width tags:

<img src="/images/bridge-in-london.jpg" height="100" width="400" />

As you can see, by specifying incorrect heights and widths in the <img /> tag we have stretched the image

Image Alignment (align)

We can use the align attribute to align an image within the body, a table cell or a paragraph. There are two alignments (align for horizontal alignment and valign for vertical alignment). Horizontal alignment can be left, right or center and vertical align can be top, bottom or center. Here is an example of using align="right" to wrap text around an image within a paragraph.

<p>
<img src="/images/bridge-in-london.jpg" align="right" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis rutrum ante, vel mattis purus ornare a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam hendrerit ante et convallis. Sed accumsan justo eu orci vehicula at placerat dolor tempus. Sed a dignissim libero. Sed in leo a mi viverra pretium eget at nisi. Vivamus adipiscing viverra odio, eu porttitor elit tincidunt et. Curabitur justo lacus, hendrerit vel rutrum eu, laoreet nec quam. Sed accumsan ipsum eget mi laoreet egestas non a tellus. Praesent placerat, risus vitae scelerisque accumsan, turpis metus lobortis nisi, ut rhoncus massa eros eget mi. Aliquam erat volutpat. Etiam tincidunt ipsum id elit mollis id dictum sem viverra. Vivamus in lacus a sem lobortis sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer fermentum orci id metus tempor condimentum. Vestibulum facilisis, nisi ut faucibus aliquet, nunc nisl viverra erat, egestas scelerisque diam risus vitae massa. Pellentesque consectetur euismod ligula, ac sodales augue pretium quis. Nunc a feugiat massa. Sed tincidunt sodales risus sed egestas. Aliquam erat volutpat. Nullam varius felis in ligula fermentum vestibulum. Cras fermentum sodales erat, sit amet laoreet dolor iaculis quis. Pellentesque sollicitudin mauris varius magna consectetur feugiat. Morbi sagittis lacus a tortor faucibus tempor. Quisque vitae nisl ipsum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis rutrum ante, vel mattis purus ornare a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam hendrerit ante et convallis. Sed accumsan justo eu orci vehicula at placerat dolor tempus. Sed a dignissim libero. Sed in leo a mi viverra pretium eget at nisi. Vivamus adipiscing viverra odio, eu porttitor elit tincidunt et. Curabitur justo lacus, hendrerit vel rutrum eu, laoreet nec quam. Sed accumsan ipsum eget mi laoreet egestas non a tellus. Praesent placerat, risus vitae scelerisque accumsan, turpis metus lobortis nisi, ut rhoncus massa eros eget mi. Aliquam erat volutpat. Etiam tincidunt ipsum id elit mollis id dictum sem viverra. Vivamus in lacus a sem lobortis sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer fermentum orci id metus tempor condimentum. Vestibulum facilisis, nisi ut faucibus aliquet, nunc nisl viverra erat, egestas scelerisque diam risus vitae massa. Pellentesque consectetur euismod ligula, ac sodales augue pretium quis. Nunc a feugiat massa. Sed tincidunt sodales risus sed egestas. Aliquam erat volutpat. Nullam varius felis in ligula fermentum vestibulum. Cras fermentum sodales erat, sit amet laoreet dolor iaculis quis. Pellentesque sollicitudin mauris varius magna consectetur feugiat. Morbi sagittis lacus a tortor faucibus tempor. Quisque vitae nisl ipsum.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.