Images in HTML:

Images, unlike hyperlinks, use the URL source to retrieve additional data for the page, as opposed to sending the user to another page.

As I am sure you can imagine, you will need use images a lot in web design and development.

The Image Tag

As with the break (<br />) and horizontal ruler (<hr />) elements, the image element is an empty element that only requires a single tag. This tag is <img />.

As with hyperlinks, this element is reliant on attributes within the tag to allow it to be useful.

source

The first attribute that we will need to consider is src="". Within the double quotes you will need to include an URL to the location of the desired image. This will typically be a relative URL to a file stored on the same server as the web page, but can also be an absolute URL to an image anywhere on the Internet.

alt text

Proper style and accessibility standards dictate that you should always include the alternative text attribute. The key for this is simply alt="". The value in the double quotes should describe the image. This description is used by screen readers for those who are visually impaired. Therefore it is critical that you provide a detailed description, especially in the case where the image is necessary to understand the content of the page.

Poor: alt="Image of me getting help."
Better: alt="Image of Justine receiving help from an instructor while at a computer."

title

As with the alt text attribute, you should also get in the habit of always including a title attribute, which is title="". Most browsers will display this text as a tooltip when a user hovers their mouse over am image with the included attribute.

The alt and/or title attributes will also be used by some browsers in the case where the image itself cannot load.

width & height

Another set of attributes you should add every time is width="" & height="". The values passed to these attributes are a string with an integer, representing the width and height that the image is to be displayed at.

In most situations, the width and height of the image file should be the same width and height that you enter as attributes and want used in your web page. In the case that these differ, these attributes will scale the image file to the specified size passed to the attributes.

Another reason for including these attributes is that the web browser uses these to reserve the correct amount of space for the image on the page when rendering, even in the case where the page is rendered before the image file is delivered to the browser. This means that the page will not have to ‘re-render’ to accommodate an image that loads after the rest of the page.

Altogether Now

HTML

<img src="./images/dogs-in-field.jpeg" alt="An image of dogs laying in a field while the sun sets" title="Dogs in a Sunlit Field" width="1000" height="500" />

An image dogs laying in a field while the sun sets Hover your cursor over the image to see the title="" value!

{ TODO: }

Read pages 94-119 of Chapter 05 in Duckett.

Previous section:

Internal Hyperlinks

Next section:

Image Management