Images

To display an image in an HTML page, we use the <img> HTML element. We also say that the <img> element is used to embed an image in a web page.

The syntax

To display an image, we use the <img> element, together with src and alt attributes. The general syntax is:

<img src="the-path-to-the-image-file" alt="A short description of the image content.">

To display an image, called, for example, my-image.jpg, we write:

<img src="my-image.jpg" alt="A short description of the image content.">

Explanation

The <img> element is a self-closing element that needs to have src and alt attributes. The src attribute specifies the image URL - the path to the image file. In our example, the my-image.jpg file is located in the same folder as our HTML document. If the image file is located in some images/ folder, we specify a different relative path using the src attribute:

<img src="images/my-image.jpg" alt="A short image description text.">

On a live server, if we want to include the site root folder (the / symbol) in the path, we write:

<img src="/images/my-image.jpg" alt="A short image description text goes here.">

The alt attribute represents an alternative text for the image - a short description of the image content. The alt text is:

Displayed in a browser if the image path is broken or the image type is not supported.
Used by screen readers.
Used by search engines.

The alt text should be a short description of the image content. It should be a short text explaining what the image represents/shows.

Important: Always include the src and alt attributes in the <img> element and do not leave them out. They are required attributes for an image.

Note: An <img> element is a self-closing element (has no closing tag) and can not have child elements.

Image dimensions

The width attribute specifies the width of the image in pixels as an integral number. The height attribute specifies the height of the image in pixels as an integral number. Example:

<img src="my-image.jpg" alt="A short image description text." width="200" height="100">

The above code displays an image whose width is equal to 200 pixels, and the height is 100 pixels.

The use of the dimensions attributes is not strictly required but it is highly recommended to avoid the so-called layout shifts.

Why should we include the image dimensions in the `<img>` tag?

Let us assume we have two paragraphs and an image in between that has no dimensions:

<p>This is the text for the first paragraph.</p>
<img src="my-image.jpg" alt="A short image description.">
<p>This is the text for the second paragraph.</p>

The browser downloads the text (paragraphs) and images in separate HTTP requests. Once downloaded, these elements are then shown on the page. It can happen that all paragraphs were downloaded prior to an image. If we leave out the width and height attributes, a noticeable element layout shift can occur when the page finishes loading different HTML elements. It can push down the bottom paragraph once it downloads/shows an image. To avoid this, we include the width and height image attributes:

<p>This is the text for the first paragraph.</p>
<img src="my-image.jpg" alt="A short image description." width="200" height="100">
<p>This is the text for the second paragraph.</p>

Now, the browser knows how large the placeholder for an image will be upfront, reserves that space and no layout shift will occur.

A complete web page with an image example

The following source code shows an HTML page that displays a single image:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <img src="my-image.jpg" alt="A short image description." width="200" height="100">
</body>
</html>

Replace my-image.jpg with your actual image file name/path, and replace the width and height attribute values with your actual image dimensions.

Image as a link

To turn the image into a clickable link, place the <img> element inside an <a> element:

<a href="https://www.example.com">
    <img src="my-image.jpg" alt="A short image description." width="200" height="100">
</a>

Now, our entire image serves as a link, and when we click on the image, we will be taken to the specified URL.

Common image formats

Common image formats used inside the <img> element are .jpg, .jpeg, .png, .gif, .webp, .svg, and .avif.

Summary

An <img> HTML element is used to load and display an image in our web page. The <img> element must always have the required src and alt attributes, specifying the image path and alternate text respectively. The <img> element should also have width and height attributes where we explicitly set the image dimensions in pixels.