HTML Images

Understanding HTML Images

Images can add photographs, illustrations, diagrams, icons, screenshots, and other visual information to a webpage. HTML displays an image using the <img> element.

The image file itself is not stored inside the HTML document. Instead, the browser uses the image source specified in the src attribute to locate and display the file.

HTML Image Syntax

The <img> element uses the src attribute to identify the image file and the alt attribute to provide a text alternative.

<img src="images/mountain.jpg" alt="Snow-covered mountain beneath a blue sky">

The browser retrieves the file specified by src and displays it at the position where the <img> element appears in the document.

The src Attribute

The src attribute specifies the URL or file path of the image that should be displayed.

<img src="images/mountain.jpg" alt="Snow-covered mountain">

The path can point to an image elsewhere on the same website or, when appropriate, to an image available through an absolute URL.

<img src="/img/photos/mountain.jpg" alt="Snow-covered mountain">

If the browser cannot locate or load the resource specified by src, the image itself will not be displayed.

The alt Attribute

The alt attribute provides a text alternative for an image. This text can help users understand the image when it cannot be seen or loaded and is especially important for people using screen readers.

<img src="images/mountain.jpg" alt="Snow-covered mountain beneath a blue sky">

Alternative text should communicate the purpose or meaningful information of the image rather than simply repeating that it is an image.

Images that are purely decorative may use an empty alt value so assistive technologies can ignore them.

<img src="images/decorative-border.png" alt="">

Alternative text is important enough that it has its own tutorial later in this section.

Image File Paths

Image sources use the same URL concepts as links. Depending on the website structure, an image can be referenced with a relative, root-relative, or absolute URL.

<!-- Relative -->
<img src="images/photo.jpg" alt="Example photograph">

<!-- Root-relative -->
<img src="/img/photo.jpg" alt="Example photograph">

<!-- Absolute -->
<img src="https://www.example-web.site/img/photo.jpg" alt="Example photograph">

For images stored on the same website, relative and root-relative paths are generally easier to maintain than complete absolute URLs.

Image Width and Height

The width and height attributes can specify the intrinsic display dimensions of an image in CSS pixels.

<img src="images/mountain.jpg" alt="Snow-covered mountain" width="800" height="533">

Providing both dimensions allows the browser to reserve the correct amount of space before the image finishes loading, which can reduce unexpected movement of surrounding page content.

The displayed image can still be resized responsively with CSS when necessary while preserving its proportions.

The <img> Element Is an Empty Element

The <img> element does not contain text or child elements and does not use a closing tag.

<img src="images/photo.jpg" alt="Example photograph">

Information about the image is supplied through attributes such as src, alt, width, and height.

HTML Image Example

The following example adds an image to a webpage along with a heading and descriptive text.

<h1>HTML Image Example</h1>

<img src="/img/images/image-600x400.jpg"
     alt="HTML image example"
     width="600"
     height="400">

<p>This image is displayed using the HTML img element.</p>

The alt attribute provides a text alternative that describes the purpose or meaningful content of an image. It is especially important for visitors who use screen readers and can also provide useful information when an image cannot be displayed. The alt attribute is required on the <img> element, although decorative images may use an empty value (alt="").

Try changing the image source, alternative text, width, and height in the editor to see how each value affects the example.

How Browsers Load Images

When a browser encounters an <img> element, it reads the src value and requests the image resource separately from the HTML document. After the file is received, the browser decodes and displays the image within the page.

Because images can require significantly more data than HTML text, image dimensions, file formats, compression, responsive image techniques, and loading strategies can all affect webpage performance. These topics are covered in later tutorials in this section.

Image Best Practices

• Use meaningful images that support the content or purpose of the page.
• Always provide an appropriate alt attribute, including an empty value for images that are purely decorative.
• Use clear and descriptive image filenames.
• Provide width and height attributes when the image dimensions are known.
• Choose an image format appropriate for the type of visual content.
• Resize and optimize image files rather than relying on the browser to shrink unnecessarily large images.
• Use responsive image techniques when different image sizes or crops are needed for different devices.
• Make sure image paths and filenames are correct before publishing the page.

Summary

The HTML <img> element displays an image by referencing an external image resource with the src attribute. The alt attribute provides a text alternative, while attributes such as width and height help define the image's dimensions and improve page layout stability.