Images

Images are one of the most powerful tools for communication on the web. A well-placed image can illustrate a concept better than a paragraph of text. Understanding how to use images correctly — including accessibility — is an essential HTML skill.

Basic Image Syntax

<img src="photo.jpg" alt="A mountain landscape at sunset">

src is the path to the image file. alt is a text description of the image.

The alt Attribute

The alt attribute is not optional — it serves two critical purposes:

• Accessibility — screen readers read the alt text aloud for users who can't see the image
• Fallback — if the image fails to load, the alt text is shown in its place

Write alt text that describes what the image shows, not what it is:

<!-- Too vague -->
<img src="dog.jpg" alt="image">

<!-- Good -->
<img src="dog.jpg" alt="A golden retriever playing fetch on a beach">

For decorative images that add no information, use an empty alt attribute so screen readers skip them:

<img src="divider.png" alt="">

Width and Height

Always specify width and height on images. This reserves space in the layout before the image loads, preventing the page from jumping around:

<img src="hero.jpg" alt="Code editor screenshot" width="800" height="450">

These values are in pixels and should match the image's natural dimensions. CSS can still resize the image visually.

Image Paths

Like links, image paths can be relative or absolute:

<!-- Relative path — image is in the same folder -->
<img src="photo.jpg" alt="...">

<!-- Relative path — image is in an images subfolder -->
<img src="images/photo.jpg" alt="...">

<!-- Absolute URL — image hosted externally -->
<img src="https://example.com/images/photo.jpg" alt="...">

Responsive Images

To make sure images don't overflow their container on small screens, add this CSS:

img {
  max-width: 100%;
  height: auto;
}

This ensures the image scales down to fit its container while maintaining its aspect ratio.

The figure and figcaption Elements

When an image needs a caption, wrap it in <figure> and add a <figcaption>:

<figure>
  <img src="html-diagram.png" alt="Diagram showing the structure of an HTML element" width="600" height="300">
  <figcaption>An HTML element consists of an opening tag, content, and a closing tag.</figcaption>
</figure>

Common Image Formats

• JPEG (.jpg) — best for photographs and complex images with many colors
• PNG (.png) — best for images with transparency or sharp edges like logos and icons
• SVG (.svg) — vector format, scales perfectly at any size, ideal for icons and illustrations
• WebP (.webp) — modern format with better compression than JPEG and PNG, widely supported