HTML Images

Use of images make our websites engaging and helps with the esthetics of the design. Images are used for displaying logos, products, team members, store and more.

Unlike word or other documents we do not embed images into our HTML document rather we link to the image in our HTML.

The Image Element <img>

The HTML element to display an image on the webpage is <img> which is a singular tag.

The <img> tag needs two pieces of information one which image to link to and two a short description of the image.

These two pieces of information are supplied to the <img> tag by using attributes. Attributes are additional information that can be added to an HTML element.

With the image we will be using following attributes:

• src source, is to provide the relative or absolute path to the image
• alt alternate text, is to provide description of the image for search engines, screen readers and in case the image does not load.

<img src="images/birds.jpg" alt="image of a bird" />

alt Attribute

We can describe this image of meerkats to assisted technologies which can read this (alt)ernative text increasing the quality of content for everyone.

Additional Attributes

title Attribute

We can also describe the image with a tooltip if the mouse is held over it for a few seconds. The tooltip text is populated from the title attribute.

width and height Attributes

We can also set explicit widths and heights of an image overriding it's size of the image dimensions. We have to note however this does not affect image file size and we will discus alternative image loading strategies later in this semester.

The image dimensions are rendered at 150 x 150, these attributes are rendered in pixels and have overridden the images native 600 x 400 dimensions