HTML Images

The HTML <img> tag embeds an image within the HTML web page. For example,

<img src="logo.png">

Browser Output

Here, the <img> tag inserts the image logo.png on the webpage.

The HTML image tag has 2 important attributes:

• The src attribute
• The alt attribute

Note: The <img> tag is an empty tag, i.e. It doesn't require a closing tag.

HTML Image src Attribute

The src attribute is a required attribute for the <img> tag. It specifies the path (URL) to the image. It tells the browser where to look for the image. For example,

<img src="tictactoe.png" >

Browser Output

In the above example, the src attribute tells the browser to load the image from the same directory where the webpage is located.

Similarly, if the image is stored in a subdirectory, the path in the src attribute would be written as

<img src="images/tictactoe.png" >

If the image is located on another server entirely or if we want to use an image from the web, we can provide an absolute URL for the image. For example,

<img src="https://www.example.com/images/tictactoe.png">

Note: Although we can provide an absolute path for images located in our own web server, better to provide a relative path as it leads to faster loading times. Hence always use relative paths for images in your own server.

HTML Image alt Attribute

The alt attribute is the text description of an image. The value of the alt attribute should describe the image such that the content is meaningful even if the image fails to load.

<img src="computer.png" alt=" A standard Computer" >

Browser Output

The alt attribute's contents are shown if the user cannot view the image (slow internet, wrong src attribute, or using a screen reader).

It also helps in SEO as it helps the search engine understand what images are about.

HTML Image title Attribute

The title attribute displays the information about the image when the user hovers over the image. For example,

<img src="tictactoe.png" alt="A game of tic-tac-toe" title="Tic-Tac-Toe" />

Browser Output

Note: Although alt and title attributes appear similar, the title attribute cannot be used as an alternative to the alt attribute. The title is not read by screen readers and does not display when the image fails to load.

Lazy loading HTML images

By default, all the images on the web page are loaded during the initial load. If there are many images on the page, this causes the page to load slowly.

We can change this behavior of HTML images by using the loading attribute.

<img src="dinosaur.png" alt="A T-rex" loading="lazy"> 

Now the image will not load until the user scrolls near the image location. If the image is at the bottom of the page and the user never scrolls down on the website, the image will never load.

This decreases the website's initial load time and prevents unnecessary data fetching.

HTML Image Size - Width and Height

We can use the style attribute to specify the height and width of an Image. For example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" style="width: 200px; height: 200px;">

Alternatively, we can also use the height and width attributes to set the height and width. For example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" width="200" height="200">

Browser Output

We should always set the height or width of images. Otherwise when the image loads, the content on the webpage will be shifted.

Note: The above two code samples give the same output, however, it is best practice to use the style attribute rather than height and width.

Common Image Formats