Definition and Usage

HTML images embed pictures into a webpage with the <img> element. The web started as text; images make pages informative and visual. <img> is a void (self-closing) element and a replaced element—its content comes from an external file, not from child HTML text.

How is this page different from the <img> tag reference?

This tutorial teaches how to use images in real HTML pages: choosing src paths, writing alt, reserving space with width/height, captions with <figure>, formats, responsive <picture>, and when CSS backgrounds are better. For attribute lists and technical rules, open the <img> tag reference.

What do you need for a useful image?

At minimum: src (where the file is) and alt (what the image means when it cannot be seen). Add width and height so the layout does not jump when the file arrives.

When should an image be in HTML vs CSS?

Put content images in HTML (<img>) so they have alt text and print with the article. Put decorative surfaces in CSS (background-image) when they are not part of the meaning.

HTML Syntax for Images

The basic pattern every content image needs:

<!-- Same folder as the HTML file -->
<img src="dinosaur.jpg" alt="Dinosaur skeleton">

<!-- Inside an images/ subfolder -->
<img src="images/dinosaur.jpg" alt="Dinosaur skeleton">

<!-- Absolute URL (host yourself; avoid hotlinking) -->
<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur skeleton">

Optional but recommended: width and height in pixels (integers, no units) to reserve layout space.

Core HTML Concepts

Ideas that make image markup work well on real pages:

Choose an image format

What to put in alt

How to Add Images to an HTML Page

A practical order from first photo to responsive setups.

1. Host the file (or use a CDN you control) and pick a descriptive filename.
2. Add <img src="…" alt="…"> where the image belongs in the content flow.
3. Set width and height to the intrinsic pixel size (scale with CSS if needed).
4. Wrap with <figure> + <figcaption> when a visible caption helps.
5. Use loading="lazy" for below-the-fold images; keep hero/LCP images eager.
6. Add <picture> when you need different crops or formats per screen.

Live Preview

Switch how an image is marked up and see the role of alt, size, caption, and lazy loading.

pattern

Basic img + altWidth & heightFigure + captionLazy loadingDecorative (alt="") Apply

Basic Sized Figure Lazy

Preview updates the sample markup note and a simple rendered result.

Sample result

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

HTML Examples

Six patterns: basic img, dimensions, figure caption, lazy loading, responsive picture, and a full page.

Example 1 — Basic Content Image

Embed a photo with src and meaningful alt:

HTML

Theme Copy

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

View Output Try It Yourself

Output

How It Works

1. src tells the browser which file to fetch.
2. alt describes the image if it fails or cannot be seen.
3. Void element — no closing </img> tag.
4. Test alt by temporarily misspelling the filename and checking what appears.

Example 2 — Width, Height, and Title

Reserve space before the file loads to avoid layout jump:

HTML

Theme Copy

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

View Output Try It Yourself

Output

How It Works

1. HTML and the image load as separate requests; size hints keep text from jumping.
2. Integers — width/height are pixels without units.
3. CSS can still scale the image; attributes define the aspect-ratio box.
4. title is optional hover text—not a substitute for alt.

Example 3 — Figure with Caption

Group a content image with a visible caption everyone can read:

HTML

Theme 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

Output

How It Works

1. figure marks a self-contained illustration in the article.
2. figcaption is visible to all users; alt still describes the graphic for assistive tech.
3. Do not duplicate the same long sentence in both alt and caption unnecessarily.
4. Charts need alt that conveys the key takeaway, not just “chart.png”.

Example 4 — Lazy Loading Below the Fold

Defer downloading images that are not needed for the first screen:

HTML

Theme Copy

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

View Output Try It Yourself

Output

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

How It Works

1. lazy waits until the image is near the viewport.
2. Saves bandwidth on long pages with many photos.
3. Keep heroes eager — do not lazy-load the main above-the-fold image.
4. Still set width/height so reserved space is correct.

Example 5 — Responsive <picture>

Offer different files by viewport; keep img as the required fallback:

HTML

Theme 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

Output

How It Works

1. source candidates are tried in order against media (or type).
2. img is mandatory inside picture as the fallback and for alt text.
3. Art direction — crop differently for phone vs desktop when needed.
4. Formats — you can also offer WebP with a JPEG img fallback.

Example 6 — Complete Images Page

Combine basic embedding, a captioned figure, and lazy loading on one HTML page:

HTML

Theme Copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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" height="260">

  <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" width="400" height="260">
</body>
</html>

View Output Try It Yourself

Output

HTML Images Example

Basic Image

Figure with Caption

Lazy Loading

How It Works

1. Structure — headings organize image sections like any other HTML content.
2. Accessibility — every content image keeps an alt.
3. Performance — dimensions + lazy loading for offscreen assets.
4. Semantics — figure when a caption is part of the story.

Key Takeaways