But professional HTML isn't just about:

<img src="photo.jpg">

You also need to understand:

• src
• alt
• image paths
• dimensions
• accessibility
• responsive images
• srcset
• sizes
• <picture>
• <figure>
• <figcaption>
• lazy loading
• performance
• decorative images
• SEO
• image security and best practices

4.1 The <img> Element#

The basic syntax is:

<img src="photo.jpg" alt="Description of the photo">

Example:

<img
    src="profile.jpg"
    alt="Anubhav smiling"
>

The browser loads the image from:

src="profile.jpg"

and uses:

alt="Anubhav smiling"

as its alternative text.

4.2 <img> is a Void Element#

Unlike:

<p>Hello</p>

you don't write:

<img>
    ...
</img>

This is invalid HTML.

Correct:

<img src="photo.jpg" alt="Photo">

img is a void element.

4.3 The src Attribute#

src specifies the image resource.

<img src="photo.jpg" alt="Profile photo">

The browser tries to retrieve:

photo.jpg

from the specified location.

4.4 Relative Image Paths#

Suppose your project is:

website/
│
├── index.html
│
└── images/
    ├── profile.jpg
    └── logo.png

From index.html:

<img
    src="images/profile.jpg"
    alt="Profile photo"
>

The browser looks for:

website/images/profile.jpg

4.5 Images in a Subdirectory#

Suppose:

website/
│
├── pages/
│   └── about.html
│
└── images/
    └── profile.jpg

From:

pages/about.html

you need to go up one directory:

<img
    src="../images/profile.jpg"
    alt="Profile photo"
>

Remember:

.   → current directory
..  → parent directory

4.6 Absolute Image URLs#

You can also reference an image using a complete URL:

<img
    src="https://example.com/images/photo.jpg"
    alt="Example photo"
>

This is an external resource.

In production, you generally want to use image sources you control or trust.

4.7 The alt Attribute#

alt stands for alternative text.

Example:

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

The alternative text can be used when the image:

• can't be loaded
• is unavailable
• is accessed by assistive technology such as a screen reader

4.8 Why alt Matters#

Consider:

<img
    src="product.jpg"
    alt="Black wireless headphones"
>

A screen reader can communicate the purpose/content of the image.

Without useful alternative text:

<img src="product.jpg">

the user may not know what the image represents.

4.9 Don't Write "Image of..."#

You generally don't need:

<img
    src="cat.jpg"
    alt="Image of a cat"
>

Prefer:

<img
    src="cat.jpg"
    alt="Orange cat sitting on a sofa"
>

The screen reader already knows this is an image in the appropriate context.

4.10 Decorative Images#

Not every image needs descriptive alternative text.

Suppose you have:

A decorative gradient

that provides no information.

Use:

<img
    src="decorative-line.svg"
    alt=""
>

The empty alt tells assistive technology:

This image is intentionally decorative; don't announce it as meaningful content.

This is different from omitting alt.

Decorative#

alt=""

Missing#

<!-- alt missing -->

These are not the same thing.

4.11 Meaningful vs Decorative Images#

Meaningful#

<img
    src="product.jpg"
    alt="Black mechanical keyboard"
>

Decorative#

<img
    src="background-pattern.svg"
    alt=""
>

Ask yourself:

If the user couldn't see the image, would they lose meaningful information?

If yes, provide useful alternative text.

If no, it may be decorative.

4.12 Image Dimensions#

You can specify dimensions:

<img
    src="profile.jpg"
    alt="Profile photo"
    width="400"
    height="400"
>

These values are generally specified in CSS pixels for HTML image dimensions.

4.13 Why Width and Height Matter#

Supplying dimensions helps the browser reserve space before the image finishes loading.

Without dimensions:

Page loads
   ↓
Image loads later
   ↓
Image takes space
   ↓
Content moves

This can cause layout shifts.

With known dimensions:

Page loads
   ↓
Browser knows image dimensions
   ↓
Space is reserved
   ↓
Image loads

This can improve visual stability.

4.14 CSS vs HTML Dimensions#

You can write:

<img
    src="photo.jpg"
    alt="Photo"
    width="800"
    height="600"
>

And CSS can control the displayed size:

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

HTML dimensions communicate intrinsic sizing information.

CSS controls presentation.

4.15 Aspect Ratio#

Suppose the original image is:

800 × 600

Its aspect ratio is:

4 : 3

If you distort it to:

800 × 300

the image may appear stretched.

Keeping the appropriate aspect ratio is important.

4.16 Image Formats#

Common image formats include:

The correct format depends on the image and browser/application requirements.

4.17 JPEG#

JPEG is commonly used for photographs.

Example:

<img
    src="mountain.jpg"
    alt="Mountain landscape"
>

Good for:

• photographs
• complex images
• gradients

JPEG doesn't provide the same lossless transparency model as PNG.

4.18 PNG#

PNG is useful when you need:

• transparency
• lossless image quality
• UI graphics
• screenshots

Example:

<img
    src="logo.png"
    alt="Company logo"
>

For many web images, however, WebP or AVIF may provide smaller files.

4.19 SVG#

SVG stands for:

Scalable Vector Graphics

Example:

<img
    src="logo.svg"
    alt="Company logo"
>

SVG is excellent for:

• logos
• icons
• diagrams
• vector illustrations

Because SVG is vector-based, it can scale to different sizes without the same pixelation behavior as raster images.

4.20 WebP#

WebP is a modern image format designed for efficient web delivery.

Example:

<img
    src="product.webp"
    alt="Product"
>

It supports features such as:

• lossy compression
• lossless compression
• transparency
• animation

4.21 AVIF#

AVIF is another modern image format that can offer very efficient compression.

Example:

<img
    src="photo.avif"
    alt="Mountain"
>

Browser support is now broad, but you should still consider compatibility requirements for your application.

4.22 <figure>#

Use <figure> when an image or other content forms a self-contained piece of content that may be referenced as a unit.

Example:

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

4.23 <figcaption>#

<figcaption> provides a caption for the figure.

<figure>
 
    <img
        src="mountain.jpg"
        alt="Snow-covered mountain"
    >
 
    <figcaption>
        A mountain landscape photographed in winter.
    </figcaption>
 
</figure>

This is useful when the image needs a visible caption.

4.24 alt vs <figcaption>#

These serve different purposes.

alt#

Alternative text for the image.

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

<figcaption>#

Visible caption associated with the figure.

<figcaption>
    Winter landscape.
</figcaption>

You can use both:

<figure>
 
    <img
        src="mountain.jpg"
        alt="Snow-covered mountain"
    >
 
    <figcaption>
        Winter landscape in the Himalayas.
    </figcaption>
 
</figure>

4.25 Responsive Images#

Now we reach an important professional topic.

Imagine your image is:

4000 × 3000

But the user's mobile screen only needs:

400 × 300

Downloading the huge image wastes bandwidth.

Responsive images allow the browser to choose an appropriate resource.

4.26 srcset#

Example:

<img
    src="image-800.jpg"
    srcset="
        image-400.jpg 400w,
        image-800.jpg 800w,
        image-1200.jpg 1200w
    "
    alt="Mountain landscape"
>

The browser can choose an appropriate candidate.

The syntax:

image-400.jpg 400w

means:

Image file → image-400.jpg
Width descriptor → 400w

4.27 Why srcset Exists#

Imagine:

Mobile
   ↓
400px image
 
Tablet
   ↓
800px image
 
Desktop
   ↓
1200px image

Instead of sending the same huge image to everyone, the browser can select a suitable candidate.

This can reduce:

• bandwidth
• loading time
• data usage

4.28 sizes#

srcset becomes especially powerful with sizes.

Example:

<img
    src="image-800.jpg"
    srcset="
        image-400.jpg 400w,
        image-800.jpg 800w,
        image-1200.jpg 1200w
    "
    sizes="
        (max-width: 600px) 100vw,
        (max-width: 1000px) 50vw,
        33vw
    "
    alt="Mountain landscape"
>

sizes tells the browser approximately how much layout width the image will occupy under different conditions.

4.29 Understanding vw#

vw means viewport width.

100vw = 100% of viewport width
50vw  = 50% of viewport width
33vw  = roughly one-third of viewport width

So:

sizes="50vw"

means approximately:

The image will occupy half the viewport width.

4.30 <picture>#

Use <picture> when you need art direction or format/source selection with explicit conditions.

Example:

<picture>
 
    <source
        media="(max-width: 600px)"
        srcset="mobile.jpg"
    >
 
    <source
        media="(min-width: 601px)"
        srcset="desktop.jpg"
    >
 
    <img
        src="desktop.jpg"
        alt="Mountain landscape"
    >
 
</picture>

The browser selects an appropriate source.

4.31 Art Direction#

Imagine your desktop image:

┌───────────────────────────────┐
│        Person + Mountain      │
│                               │
└───────────────────────────────┘

On mobile, you may want:

┌─────────────┐
│   Person    │
│             │
└─────────────┘

This isn't simply a different resolution.

It's a different crop/composition.

That's where <picture> can be useful.

4.32 Modern Image Format Fallback#

You can use <picture> to offer modern formats and fall back to another format.

<picture>
 
    <source
        srcset="photo.avif"
        type="image/avif"
    >
 
    <source
        srcset="photo.webp"
        type="image/webp"
    >
 
    <img
        src="photo.jpg"
        alt="Mountain landscape"
    >
 
</picture>

Conceptually:

AVIF available?
     ↓
   Yes → AVIF
 
   No
     ↓
WebP available?
     ↓
   Yes → WebP
 
   No
     ↓
JPEG

The <img> remains the fallback.

4.33 Lazy Loading#

Images below the initial viewport often don't need to load immediately.

You can use:

<img
    src="large-image.jpg"
    alt="Mountain"
    loading="lazy"
>

This asks the browser to defer loading until the image is closer to being needed.

4.34 Don't Blindly Lazy-Load Everything#

For an image that is immediately visible when the page loads, especially a key hero/LCP image, lazy loading may delay an important resource.

For example:

<img
    src="hero.jpg"
    alt="Mountain landscape"
>

may be preferable to:

<img
    src="hero.jpg"
    alt="Mountain landscape"
    loading="lazy"
>

for an above-the-fold hero image.

Use lazy loading primarily for images that are not immediately needed.

4.35 decoding#

You may see:

<img
    src="photo.jpg"
    alt="Photo"
    decoding="async"
>

The attribute gives the browser a hint about image decoding behavior.

Possible values include:

sync
async
auto

This is an optimization hint, not a guarantee.

4.36 Image Fetch Priority#

Modern HTML can also provide loading priority hints.

For an important image:

<img
    src="hero.jpg"
    alt="Hero image"
    fetchpriority="high"
>

For less important images, the browser's default prioritization is often appropriate.

Don't mark every image as high priority.

4.37 Complete Responsive Image#

A professional example:

<img
    src="product-800.jpg"
    srcset="
        product-400.jpg 400w,
        product-800.jpg 800w,
        product-1200.jpg 1200w,
        product-1600.jpg 1600w
    "
    sizes="
        (max-width: 600px) 100vw,
        (max-width: 1000px) 50vw,
        33vw
    "
    width="1600"
    height="1200"
    alt="Black wireless headphones"
    loading="lazy"
    decoding="async"
>

This provides:

• responsive source selection
• intrinsic dimensions
• accessibility
• lazy loading
• decoding hint

4.38 Image Accessibility#

Let's compare.

Bad#

<img src="img123.jpg">

Problems:

• no alternative text
• unclear purpose

Better#

<img
    src="img123.jpg"
    alt="Black wireless headphones"
>

Decorative#

<img
    src="pattern.svg"
    alt=""
>

4.39 Complex Images#

Some images contain information that can't be adequately described with a short alt.

Examples:

• charts
• diagrams
• maps
• architecture diagrams
• infographics

Don't put an entire essay into alt.

Instead:

<figure>
 
    <img
        src="sales-chart.png"
        alt="Monthly sales chart"
    >
 
    <figcaption>
        Sales increased from January through June,
        with the highest value in June.
    </figcaption>
 
</figure>

For especially complex graphics, provide a nearby detailed textual explanation or an appropriate accessible data representation.

4.40 Image as a Link#

You learned links in the previous chapter.

You can combine the concepts:

<a href="/products/macbook">
 
    <img
        src="macbook.jpg"
        alt="MacBook Pro"
    >
 
</a>

The image is now a link.

The alternative text should communicate the image's relevant purpose.

4.41 Product Card Example#

<article>
 
    <a href="/products/headphones">
 
        <img
            src="headphones.jpg"
            alt="Black wireless headphones"
            width="600"
            height="600"
            loading="lazy"
        >
 
        <h2>
            Wireless Headphones
        </h2>
 
    </a>
 
    <p>
        ₹4,999
    </p>
 
</article>

Notice the structure:

article
│
├── link
│   ├── image
│   └── heading
│
└── price

This is a common pattern in real websites.

4.42 Images and SEO#

Search engines can use information surrounding images and the image's alternative text to understand them.

Good:

<img
    src="html-course.jpg"
    alt="HTML course beginner to advanced"
>

Bad:

<img
    src="IMG_938473.jpg"
    alt="image"
>

Don't stuff keywords unnaturally.

Bad:

alt="HTML HTML course HTML tutorial HTML developer HTML"

Write natural descriptions.

4.43 Image File Names#

Prefer descriptive filenames.

Instead of:

IMG_928374.jpg

prefer:

html-course-dashboard.jpg

Instead of:

image1.png

prefer:

developer-portfolio.png

This improves organization and can provide useful context.

4.44 Images and Performance#

Large images can significantly increase page load time.

For example:

Original image
      ↓
8 MB
      ↓
Slow loading
      ↓
Poor experience

Optimized:

Optimized image
      ↓
200 KB
      ↓
Much less data
      ↓
Faster loading

Always consider:

• dimensions
• compression
• format
• responsive sources
• lazy loading
• caching
• CDN delivery

4.45 Don't Use HTML to Resize a Huge Image#

Suppose you have:

4000 × 3000

and write:

<img
    src="4000x3000.jpg"
    width="400"
    height="300"
    alt="Photo"
>

The browser may still download the large 4000×3000 resource.

The displayed size is smaller, but the downloaded resource can remain large.

Better:

Generate/serve an appropriately sized image

and use responsive image techniques when appropriate.

4.46 <figure> Beyond Images#

<figure> isn't limited to images.

For example:

<figure>
 
    <pre><code>
const result = await fetch("/api/users");
    </code></pre>
 
    <figcaption>
        Example API request.
    </figcaption>
 
</figure>

It can represent a self-contained piece of content such as:

• image
• diagram
• code example
• chart
• illustration

4.47 Complete Professional Example#

<article>
 
    <h1>Modern Web Development</h1>
 
    <figure>
 
        <picture>
 
            <source
                srcset="web-development.avif"
                type="image/avif"
            >
 
            <source
                srcset="web-development.webp"
                type="image/webp"
            >
 
            <img
                src="web-development.jpg"
                alt="Developer working on a web application"
                width="1600"
                height="900"
                fetchpriority="high"
            >
 
        </picture>
 
        <figcaption>
            Building a modern web application.
        </figcaption>
 
    </figure>
 
    <p>
        Modern web development combines HTML, CSS,
        JavaScript and many other technologies.
    </p>
 
</article>

This demonstrates:

<article>
   ↓
<figure>
   ↓
<picture>
   ↓
<source>
   ↓
<img>
   ↓
<figcaption>

🧠 Image Cheat Sheet#

🧪 Practice Project — Image Gallery#

Create:

image-gallery/
│
├── index.html
│
└── images/
    ├── mountain.jpg
    ├── beach.jpg
    ├── city.jpg
    └── forest.jpg

Build:

My Travel Gallery
 
┌────────────┐ ┌────────────┐
│  Mountain  │ │   Beach    │
│   Image    │ │   Image    │
└────────────┘ └────────────┘
 
┌────────────┐ ┌────────────┐
│    City    │ │   Forest   │
│   Image    │ │   Image    │
└────────────┘ └────────────┘

Requirements:

• Use <figure>
• Use <figcaption>
• Give every meaningful image proper alt
• Give images width and height
• Use loading="lazy" for images below the initial viewport
• Create at least one responsive image using srcset

🎯 Chapter 4 Interview Questions#

1. What is the <img> element?
2. Why doesn't <img> have a closing tag?
3. What is src?
4. What is alt?
5. Why is alt important?
6. What is the difference between alt="" and missing alt?
7. What is a decorative image?
8. What is <figure>?
9. What is <figcaption>?
10. What is the difference between <figure> and <img>?
11. What is srcset?
12. Why do we use sizes?
13. What is <picture>?
14. What is art direction?
15. How can you provide AVIF/WebP with a fallback?
16. What does loading="lazy" do?
17. Should every image use lazy loading?
18. Why should you specify image dimensions?
19. What is layout shift?
20. Why shouldn't you simply resize a huge image with HTML dimensions?
21. What is the difference between JPEG, PNG, SVG, WebP and AVIF?
22. How can images affect website performance?
23. How should complex charts or diagrams be made accessible?

🔥 The Most Important Mental Model#

When adding an image, don't just think:

"How do I display this picture?"

Think:

Image
│
├── What does it mean?
│       ↓
│      alt
│
├── How large is it?
│       ↓
│   width / height
│
├── Which version should load?
│       ↓
│   srcset / sizes
│
├── Different crop needed?
│       ↓
│    picture
│
├── Does it need a caption?
│       ↓
│ figure / figcaption
│
├── Is it immediately needed?
│       ↓
│ loading / priority
│
└── Is it optimized?
        ↓
   format / compression

That's the difference between knowing the <img> tag and understanding professional image handling in HTML.

Next chapter: Chapter 5 — Lists#

We'll learn ordered lists, unordered lists, description lists, nested lists, multi-level navigation structures, menus, list semantics, accessibility, and real-world use cases such as navigation menus, feature lists, instructions, FAQs, and product specifications.