Introduction

Images are an integral part of web design. They enhance visual appeal and help convey information quickly. HTML provides simple, flexible methods to embed images on any page.

Understanding how to add images correctly—with proper attributes, formats, and optimization—is key to building visually rich and performance-friendly websites. This tutorial covers everything from basic <img> tags to responsive <picture> elements.

What You’ll Learn

The <img> Element

The <img> element embeds an image on a web page. It is a void element (no closing tag) and requires src and alt attributes:

<img src="photo.jpg" alt="A descriptive text about the image">

• src — the URL or path to the image file.
• alt — a brief description for accessibility; shown if the image fails to load.

See the img tag reference for every attribute.

Image Formats

Choosing the right format depends on the image type and how it will be used:

• JPEG (.jpg / .jpeg) — best for photos and images with many colors.
• PNG (.png) — ideal for transparency or lossless quality (logos, screenshots).
• GIF (.gif) — simple animations and low-color graphics.
• SVG (.svg) — scalable vector graphics for logos and icons; sharp at any size.
• WebP (.webp) — modern format with superior compression and smaller file sizes.

For photos on modern sites, WebP (with JPEG fallback via picture) is a common pattern.

Setting Image Attributes

Beyond src and alt, these attributes control appearance and behavior:

width and height

Set dimensions in pixels. Including both helps prevent layout shift while the image loads:

<img src="photo.jpg" alt="A descriptive text" width="300" height="200">

For responsive layouts, combine HTML dimensions with CSS: max-width: 100%; height: auto;

title

Provides extra information on hover (tooltip). Do not rely on title instead of alt—screen readers use alt, not title.

<img src="photo.jpg" alt="Mountain view" title="View from Mount Rainier">

loading

Use loading="lazy" to defer loading off-screen images until the user scrolls near them:

<img src="large-photo.jpg" alt="A descriptive text" loading="lazy">

Responsive Images

Images should look good on phones, tablets, and desktops. HTML offers two main approaches:

<picture> Element

Specify different sources for different conditions such as screen width or image format. Place source and fallback img inside the element:

<picture>
  <source srcset="photo-small.jpg" media="(max-width: 600px)">
  <source srcset="photo-large.jpg" media="(min-width: 601px)">
  <img src="photo-default.jpg" alt="A descriptive text">
</picture>

srcset and sizes Attributes

Define multiple resolutions so the browser picks the best file for the user’s screen:

<img src="photo-default.jpg"
  srcset="photo-600w.jpg 600w, photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A descriptive text">

Learn more in the picture tag reference.

Optimizing Images for Performance

Images often account for most of a page’s download size. Optimize them to keep pages fast:

• Compress images — use tools like Squoosh, TinyPNG, or ImageOptim to reduce file size.
• Use WebP — convert photos to WebP for smaller files; provide JPEG fallbacks when needed.
• Lazy loading — add loading="lazy" to below-the-fold images.
• Right-size assets — do not serve 4000px-wide images when 800px displays on screen.
• Set dimensions — width and height (or aspect-ratio in CSS) prevent layout jumps.

Accessibility and Images

Make images usable for everyone, including people who use screen readers:

• Always provide meaningful alt text. Use alt="" only for purely decorative images.
• Use <figure> and <figcaption> for complex images that need a visible caption.
• Avoid putting important text inside images—use real HTML text when possible.
• Ensure sufficient color contrast if text overlays an image.

<figure>
  <img src="chart.jpg" alt="Sales chart for Q1 showing 25% growth">
  <figcaption>Figure 1: A sales chart showing growth in Q1.</figcaption>
</figure>

Common Pitfalls

• Missing alt text — hurts accessibility and SEO. Every img needs an alt attribute.
• Overusing large images — oversized files slow page load; resize and compress before upload.
• Improper aspect ratio — mismatched width/height distorts the image. Keep proportions correct.
• Closing tags in wrong place — source and img must be inside picture, not after it.
• Placeholder as alt — do not copy filename or “image” as alt text; describe the content.

Examples Gallery

Six examples from a basic image to a full page with responsive and lazy-loaded photos. Each includes View Output and Try It Yourself.

Example 1 — Basic Image

html

Copy

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

View Output Try It Yourself

📤 Renders as:

How It Works

src points to the file; alt describes it for users who cannot see the image.

Example 2 — Width, Height, and Title

html

Copy

<img src="photo.jpg" alt="Green landscape photo"
  width="300" height="195" title="Hover tooltip text">

View Output Try It Yourself

📤 Renders as:

How It Works

Dimensions reserve space before the image loads. title adds an optional hover tooltip.

Example 3 — Figure and Caption

html

Copy

<figure>
  <img src="chart.jpg" alt="Bar chart showing 25% sales growth in Q1">
  <figcaption>Figure 1: Sales growth in Q1.</figcaption>
</figure>

View Output Try It Yourself

📤 Renders as:

How It Works

figure groups the image and visible caption. alt still describes the image for screen readers.

Example 4 — Lazy Loading

html

Copy

<img src="large-photo.jpg" alt="High-resolution photo"
  loading="lazy" width="500" height="320">

View Output Try It Yourself

📤 Renders as:

Below-the-fold image with loading="lazy":

How It Works

The browser downloads the image only when it is about to scroll into view, saving bandwidth on long pages.

Example 5 — Responsive Picture

html

Copy

<picture>
  <source srcset="photo-small.jpg" media="(max-width: 600px)">
  <source srcset="photo-large.jpg" media="(min-width: 601px)">
  <img src="photo-default.jpg" alt="Responsive landscape photo">
</picture>

View Output Try It Yourself

📤 Renders as:

How It Works

The browser picks the first matching source. The final img is the fallback.

Example 6 — Complete Images Page

Full page combining basic img, picture, figure, and lazy loading:

html

Copy

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML Images Example</title>
</head>
<body>
  <h1>HTML Images Example</h1>
  <h2>Basic Image</h2>
  <img src="photo.jpg" alt="A beautiful landscape" width="400">
  <h2>Figure with Caption</h2>
  <figure>
    <img src="chart.png" alt="Sales chart for Q1">
    <figcaption>Figure 1: Sales growth in Q1.</figcaption>
  </figure>
  <h2>Lazy Loading</h2>
  <img src="large.jpg" alt="High-resolution image" loading="lazy">
</body>
</html>

View Output Try It Yourself

📤 Renders as:

HTML Images Example

Basic Image

Figure with Caption

Lazy Loading

How It Works

Demonstrates every technique from this tutorial on one page with semantic markup and proper alt text.

Best Practices