Chapter 1.5☕ 10 min read

Images

Charminar ki photo lagao — ek tag mein ho gaya.

01What are Images in HTML?

You are showing your friend a photo of Charminar on your phone. They look at it and instantly know "this is Hyderabad." No explanation needed — the image speaks.

HTML images work the same way. One <img> tag and your page goes from boring text to visual storytelling. Biryani photos, restaurant logos, Charminar shots — images make your page come alive.

📸

Photo Analogy: A Paradise Biryani menu without photos? Nobody orders. A webpage without images? Nobody stays. Images are not optional — they are essential.

02The img Tag — Anatomy

The <img> tag is self-closing — no </img> needed.

<img> — The photo frame. Self-closing tag, no </img> needed.
src — Where the image file lives. Local path or URL.
alt — What the image shows. Critical for accessibility and SEO.
width/height — Display dimensions. Prevents page jumping when image loads.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hyderabad Photo Gallery</title>
  </head>
  <body>
    <h1>Hyderabad Photo Gallery</h1>

    <!-- Basic image with alt and dimensions -->
    <img src="charminar.jpg"
         alt="Charminar illuminated at night"
         width="600" height="400"
         loading="eager">

    <!-- Figure with caption -->
    <figure>
      <img src="golconda.jpg"
           alt="Golconda Fort light show"
           width="600" height="400"
           loading="lazy">
      <figcaption>Golconda Fort — evening light show</figcaption>
    </figure>

    <!-- Image as clickable link -->
    <a href="https://paradisebiryani.com" target="_blank">
      <img src="paradise.jpg"
           alt="Visit Paradise Biryani website"
           width="600" height="200"
           loading="lazy">
    </a>
  </body>
</html>

<img src="..."Opening — self-closing, no end tag

src="photo.jpg"Image file path — local or internet URL

alt="description"Alternative text — for accessibility and SEO

width="600"Display width — prevents layout shift

loading="lazy"Lazy load — only when user scrolls near

03Types of Image Concepts

Just like a photographer chooses different lenses for different shots — wide angle for landscapes, macro for close-ups — HTML has different approaches for different image needs.

Concept What it does

📸 Image Formats JPG vs PNG vs WebP vs SVG — choose wisely Learn → 📱 Responsive Images srcset + sizes + picture element Learn → 🖼️ Figure vs img When to use figure + figcaption vs bare img Learn → ⚡ Image Optimization Lazy loading, compression, CDN, caching Learn →

04How Images Load — Flow

Browser finds img tagReads src attribute to find the file

→

Downloads the imageFetches image from server or cache

→

Renders on pageDisplays at specified width and height

Pro tip: Images are the heaviest part of any webpage. A single unoptimized image can slow your page by 2-3 seconds. Always optimize — use WebP, add width/height, and lazy load below-fold images.

05Exercise — Hyderabad Photo Gallery

Build a simple photo gallery page for Hyderabad landmarks using different image concepts.

Open VS Code. Create a new file — name it hyderabad-gallery.html

Use the starter code below and build your gallery:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hyderabad Photo Gallery</title>
  </head>
  <body>
    <!-- h1: Gallery title -->
    <!-- 3 images with alt, width, height -->
    <!-- 1 figure with figcaption -->
    <!-- 1 image wrapped in <a> link -->
    <!-- loading="lazy" on images 2 and 3 -->

  </body>
</html>

Complete these:

An <h1> — "Hyderabad Photo Gallery" 3 images using <img> with proper alt text Wrap one image in <figure> with <figcaption> Make one image a clickable link using <a> Add loading="lazy" to all images except the first

💡

Don't have real images? Use placeholder images from https://placehold.co/600x400 — free, no signup. Example: src="https://placehold.co/600x400?text=Charminar"

Done — Key Points:

✅ <img> is self-closing — no </img> needed
✅ src = image location, alt = image description
✅ Always add alt text — accessibility + SEO
✅ Always add width/height — prevents layout shift
✅ Use WebP format — 30% smaller than JPG
✅ Use loading="lazy" for below-fold images

Previous1.4 — Links 📋 All Chapters Next Chapter2.1 — Lists →