Web Development Zero to Advanced — Class 11 of 120

HTML Images & Image Paths

Images are an essential part of modern websites.

They are used for:

• Product photos
• Company logos
• Blog images
• Banners
• Profile pictures
• Portfolio projects
• Icons and illustrations
• Educational diagrams

In HTML, images are primarily displayed using the <img> element.

Basic example:

<img src="images/laptop.jpg" alt="Black gaming laptop">

In this class, you will learn:

• The <img> element
• The src attribute
• The alt attribute
• Relative image paths
• Absolute image URLs
• Parent-directory paths
• Image width and height
• Image formats
• Images as links
• Figure and figcaption
• Accessibility basics
• Responsive image basics
• Common image mistakes

What Is the `<img>` Element?

The HTML <img> element embeds an image into a web page.

Example:

<img src="laptop.jpg" alt="Gaming laptop">

Unlike many HTML elements, <img> does not contain text content and does not require a closing tag.

For example, you do not write:

<img>Image</img>

Instead, write:

<img src="laptop.jpg" alt="Gaming laptop">

Basic Image Syntax

The basic syntax is:

<img src="image-path" alt="image description">

Example:

<img src="images/computer.jpg" alt="Desktop computer">

Here:

img = Image element

src = Image source

images/computer.jpg = Image path

alt = Alternative text

Desktop computer = Text alternative describing the image

What Is the `src` Attribute?

src stands for:

Source

It tells the browser where the image resource is located.

Example:

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

Here:

logo.png

is the image source.

What Is the `alt` Attribute?

alt means:

Alternative Text

Example:

<img src="laptop.jpg" alt="Black gaming laptop on a desk">

Alternative text provides a text alternative for an image.

It is particularly important when:

• The image cannot be loaded
• A screen reader is being used
• The image communicates meaningful information

Why Is Alt Text Important?

Consider:

<img src="gaming-pc.jpg" alt="Gaming PC with RGB lighting">

The alt text communicates the image’s meaning when the visual itself is unavailable or cannot be perceived.

Good alternative text should usually describe the image according to its purpose and context.

Poor Alt Text

Avoid meaningless text such as:

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

or:

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

If the image is meaningful, provide useful context.

Better:

<img src="laptop.jpg" alt="Silver laptop open on an office desk">

Decorative Images

Not every image needs a descriptive alternative.

If an image is purely decorative and communicates no meaningful information, an empty alt attribute may be appropriate:

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

This tells assistive technologies that the image does not need to be announced as meaningful content.

Do not simply remove the alt attribute without understanding why.

Understanding Image Paths

One of the most common beginner problems is:

The image does not appear.

Very often, the problem is not the <img> element itself.

The problem is the image path.

You must understand where your HTML file is located relative to the image file.

Image in the Same Folder

Suppose your project is:

website/
│
├── index.html
└── laptop.jpg

Since index.html and laptop.jpg are in the same folder, you can write:

<img src="laptop.jpg" alt="Laptop computer">

Image Inside an Images Folder

A better project structure might be:

website/
│
├── index.html
│
└── images/
    └── laptop.jpg

From index.html, write:

<img src="images/laptop.jpg" alt="Laptop computer">

The path means:

Go to images

↓

Find laptop.jpg

Multiple Image Folders

A larger project might look like:

website/
│
├── index.html
│
├── css/
├── js/
│
└── images/
    ├── logo.png
    ├── banner.jpg
    └── products/
        └── laptop.jpg

To display the laptop from index.html:

<img src="images/products/laptop.jpg" alt="Laptop computer">

Parent Directory — `../`

Suppose your structure is:

website/
│
├── images/
│   └── logo.png
│
└── pages/
    └── about.html

You are writing code inside:

pages/about.html

But the image is inside:

images/logo.png

You first need to move up from the pages folder.

Use:

../

Example:

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

.. refers to the parent directory.

Understanding `./`

You may also see:

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

./ refers to the current directory.

In many simple situations:

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

and:

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

resolve to the same resource.

Relative Image Paths

A relative path is resolved relative to the current document or base URL.

Examples:

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

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

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

These are relative paths.

What Is an Absolute Image URL?

An image can also be loaded using a complete URL.

Example:

<img
    src="https://example.com/images/product.jpg"
    alt="Product"
>

This is an absolute URL because it contains the complete address.

Relative Path vs Absolute URL

Relative:

<img src="images/product.jpg" alt="Product">

Absolute:

<img
    src="https://example.com/images/product.jpg"
    alt="Product"
>

For images that belong to your own project, relative URLs are commonly used.

Image Width and Height

You can provide image dimensions using the width and height attributes.

Example:

<img
    src="images/laptop.jpg"
    alt="Gaming laptop"
    width="600"
    height="400"
>

These values represent dimensions in CSS pixels for the intrinsic rendering dimensions.

Width Example

<img
    src="images/logo.png"
    alt="Company logo"
    width="200"
>

However, modern websites commonly use CSS for responsive presentation.

Responsive Images with Basic CSS

Suppose you have:

<img
    src="images/banner.jpg"
    alt="Company banner"
    class="responsive-image"
>

You can write:

.responsive-image {
    max-width: 100%;
    height: auto;
}

This helps prevent the image from becoming wider than its containing element while preserving its aspect ratio.

Why `height: auto`?

When an image’s width changes, height: auto allows its height to adjust according to the image’s aspect ratio.

This helps prevent visual distortion.

Common Image Formats

Several image formats are commonly used on websites.

JPEG / JPG

Extensions:

.jpg

.jpeg

Commonly useful for photographic images.

PNG

Extension:

.png

Commonly used when lossless raster graphics or transparency is needed.

WebP

Extension:

.webp

A modern image format that supports efficient compression and features such as transparency.

SVG

Extension:

.svg

SVG stands for:

Scalable Vector Graphics

It is commonly useful for:

• Logos
• Icons
• Illustrations
• Vector graphics

SVG graphics can scale without the same pixelation behavior as raster images.

GIF

Extension:

.gif

GIF supports simple animation.

For many modern use cases, other formats may offer better compression or capabilities, but GIF is still encountered on the Web.

Raster vs Vector Images

JPG, PNG, WebP, and GIF are raster formats.

Raster images are made from pixels.

SVG is a vector format.

Vector graphics are described using geometric information rather than a fixed pixel grid.

Simple way to remember:

Raster → Pixels

Vector → Shapes / Paths

Images as Links

In Class 10, you learned about anchor tags.

An image can be placed inside an <a> element to make the image clickable.

Example:

<a href="index.html">
    <img
        src="images/logo.png"
        alt="ABC IT Company home"
    >
</a>

When the user clicks the image, the browser follows the link.

Product Image Link

Example:

<a href="product.html">
    <img
        src="images/laptop.jpg"
        alt="Gaming laptop"
    >
</a>

This pattern is common on e-commerce websites.

The `<figure>` Element

HTML provides the <figure> element for self-contained content such as an image, illustration, diagram, or code example when it is appropriate to treat it as a figure.

Example:

<figure>

    <img
        src="images/gaming-pc.jpg"
        alt="Gaming PC with RGB lighting"
    >

</figure>

The `<figcaption>` Element

<figcaption> provides a caption for a <figure>.

Example:

<figure>

    <img
        src="images/gaming-pc.jpg"
        alt="Gaming PC with RGB lighting"
    >

    <figcaption>
        Gaming PC with RGB lighting
    </figcaption>

</figure>

This creates a semantic relationship between the figure and its caption.

Complete HTML Image Example

Create this project:

class-11/
│
├── index.html
│
└── images/
    ├── logo.png
    ├── laptop.jpg
    └── gaming-pc.jpg

Inside index.html:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Images</title>

</head>

<body>

    <h1>HTML Images</h1>

    <h2>Company Logo</h2>

    <img
        src="images/logo.png"
        alt="ABC IT Company logo"
        width="200"
    >

    <h2>Our Laptop</h2>

    <figure>

        <img
            src="images/laptop.jpg"
            alt="Laptop displayed on an office desk"
            width="600"
        >

        <figcaption>
            Laptop available from our computer shop.
        </figcaption>

    </figure>

</body>

</html>

Save the file and open it in your browser.

Expected Output

The browser should display:

HTML Images

Company Logo

[Company Logo]

Our Laptop

[Laptop Image]

Laptop available from our computer shop.

If an image does not appear, check:

• File name
• File extension
• Folder name
• Relative path
• Capitalization

Practical Example: Computer Shop Product

Suppose you are creating a product page.

Project:

computer-shop/
│
├── product.html
│
└── images/
    └── gaming-laptop.webp

HTML:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Gaming Laptop</title>

</head>

<body>

    <h1>Gaming Laptop</h1>

    <figure>

        <img
            src="images/gaming-laptop.webp"
            alt="Black gaming laptop with illuminated keyboard"
            width="600"
        >

        <figcaption>
            High-performance gaming laptop.
        </figcaption>

    </figure>

    <h2>Product Description</h2>

    <p>
        Powerful laptop designed for gaming and professional work.
    </p>

    <p>
        <strong>Price: $999</strong>
    </p>

</body>

</html>

This is a practical example of using images on an e-commerce product page.

Practical Example: Company Team Page

Suppose your project contains:

website/
│
├── team.html
│
└── images/
    └── team/
        ├── developer.jpg
        └── designer.jpg

You can write:

<h1>Our Team</h1>

<h2>Web Developer</h2>

<img
    src="images/team/developer.jpg"
    alt="Web developer working at a desk"
>

<h2>UI Designer</h2>

<img
    src="images/team/designer.jpg"
    alt="UI designer working on an interface"
>

Image File Names

Use simple, descriptive file names.

Good:

gaming-laptop.jpg

company-logo.svg

web-development-team.webp

Avoid confusing names such as:

IMG0099837FINALNEW.jpg

or:

My Product Photo Final 2.jpg

A clean naming convention makes projects easier to maintain.

Lowercase File Names

Using lowercase file and folder names is often a good convention.

Prefer:

images/product-photo.jpg

instead of inconsistent naming such as:

Images/Product-Photo.JPG

Some hosting environments use case-sensitive file systems.

That means:

logo.png

and:

Logo.png

may be treated as different file names.

Why Does an Image Work on My PC but Not on Hosting?

This is a common beginner problem.

Possible causes include:

• Incorrect capitalization
• Wrong path
• Image was not uploaded
• Wrong extension
• Broken directory structure
• Local file path was used

For example, avoid using a Windows-specific local path such as:

<img
    src="C:\Users\User\Desktop\photo.jpg"
    alt="Product"
>

That file exists on your own computer, not necessarily on your web server.

Instead, place the image inside your website project.

Example:

website/
│
├── index.html
└── images/
    └── photo.jpg

Then use:

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

Broken Image Example

Suppose you write:

<img src="images/laptop.jpg" alt="Laptop">

but the actual file is:

images/laptop.png

The browser cannot find:

laptop.jpg

because the actual extension is:

.png

The path must point to the correct resource.

Image Accessibility

Images that communicate meaningful information should normally have useful alternative text.

Example:

<img
    src="chart.png"
    alt="Sales increased from January through March"
>

Alternative text should communicate the image’s relevant purpose or information rather than simply listing visual details that do not matter.

Avoid Keyword Stuffing in Alt Text

Do not write unnatural alt text such as:

<img
    src="laptop.jpg"
    alt="best laptop gaming laptop cheap laptop buy laptop computer laptop"
>

Instead, describe the image naturally and appropriately.

Example:

<img
    src="laptop.jpg"
    alt="Black gaming laptop with RGB keyboard"
>

Image Performance Basics

Large images can make pages slower.

For production websites:

• Use appropriate image dimensions
• Compress images appropriately
• Choose suitable formats
• Avoid unnecessarily large files
• Consider responsive-image techniques
• Use lazy loading where appropriate

Native Lazy Loading

HTML supports a loading attribute for images.

Example:

<img
    src="images/product.jpg"
    alt="Gaming laptop"
    loading="lazy"
>

loading="lazy" tells the browser that the image can generally be deferred until it is closer to the viewport.

This can improve initial page loading in suitable situations.

Should Every Image Use Lazy Loading?

No.

Images that are immediately important when the page first loads may not be good candidates for lazy loading.

For example, a prominent image at the top of the page may need to load immediately.

Performance decisions should be based on the role of the image.

Width and Height for Layout Stability

When you know an image’s intrinsic dimensions, providing width and height can help the browser reserve the appropriate space before the image finishes loading.

Example:

<img
    src="images/product.jpg"
    alt="Gaming laptop"
    width="800"
    height="600"
>

This can help reduce unexpected layout movement during loading.

Common Beginner Mistakes

1. Wrong Image Path

Wrong:

<img src="laptop.jpg" alt="Laptop">

when the file is actually inside:

images/laptop.jpg

Correct:

<img src="images/laptop.jpg" alt="Laptop">

2. Wrong File Extension

Actual file:

logo.png

Wrong:

<img src="logo.jpg" alt="Logo">

Correct:

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

3. Wrong Capitalization

Actual:

images/logo.png

Potentially broken:

<img src="Images/Logo.png" alt="Company logo">

Use exact file and folder names.

4. Missing Alt Text

Avoid:

<img src="product.jpg">

For a meaningful image, provide useful alt text:

<img
    src="product.jpg"
    alt="Black gaming laptop"
>

5. Using Local Computer Paths

Avoid:

<img src="C:\Users\User\Desktop\image.jpg" alt="Product">

Use a proper website-relative path.

6. Distorting Images

Be careful when forcing both width and height to values that do not match the original aspect ratio.

CSS can often help:

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

7. Uploading Huge Images

Do not upload unnecessarily large images and then display them at a very small size.

Optimize images according to their actual use.

8. Writing Meaningless Alt Text

Avoid:

alt="image"

Prefer contextually useful descriptions.

New & Difficult Words

HTML = HyperText Markup Language

IMG = Image element

src = Source

alt = Alternative Text

Path = Location of a resource

Relative Path = Resource location relative to the current/base location

Absolute URL = Complete URL of a resource

Parent Directory = Directory one level above the current directory

Raster Image = Pixel-based image

Vector Image = Graphics represented using geometric/vector information

SVG = Scalable Vector Graphics

JPEG = Joint Photographic Experts Group

PNG = Portable Network Graphics

WebP = Modern raster image format

GIF = Graphics Interchange Format

Figure = Self-contained content referenced as a unit

Figcaption = Caption associated with a figure

Responsive Image = Image delivered or displayed appropriately across different layouts/devices

Lazy Loading = Deferring resource loading until it is closer to being needed

Aspect Ratio = Relationship between an image’s width and height

Accessibility = Making content usable by people with different abilities and technologies

Important Notes

Remember:

Basic image:

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

Same folder:

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

Images folder:

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

Parent folder:

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

Clickable image:

<a href="product.html">
    <img src="images/product.jpg" alt="View product details">
</a>

Figure:

<figure>

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

    <figcaption>
        Image Caption
    </figcaption>

</figure>

Responsive CSS:

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

Most importantly:

src = Where the image is

alt = Text alternative for the image

Practice Questions

Which HTML element displays an image?
What does src mean?
What is the purpose of alt?
What is a relative image path?
What is an absolute image URL?
What does ../ mean?
What does ./ mean?
How do you display an image from an images folder?
What is the difference between raster and vector images?
What does SVG stand for?
What does PNG stand for?
What does JPEG refer to?
What is <figure>?
What is <figcaption>?
How can you make an image clickable?
What does loading="lazy" do?
Why are image dimensions useful?
Why should meaningful images have useful alt text?

Assignment

Create a folder named:

class-11

Create this structure:

class-11/
│
├── index.html
│
└── images/
    ├── logo.png
    ├── product-1.jpg
    ├── product-2.jpg
    └── banner.jpg

Create a simple computer shop page.

Your page must contain:

Company logo
Website heading
Banner image
Two product images
Useful alt text for every meaningful image
One <figure>
One <figcaption>
One clickable product image
Width and height attributes on at least one image
loading="lazy" on an appropriate below-the-fold product image

Then create a second folder:

pages/

Move an HTML page into it and practice displaying an image using:

../images/

Finally, open the project in your browser and make sure every image loads correctly.

Quiz

Which element embeds an image?

Answer: <img>.

Which attribute specifies the image source?

Answer: src.

Which attribute provides a text alternative?

Answer: alt.

What does ../ mean?

Answer: It refers to the parent directory.

Which format is vector-based?

Answer: SVG.

What does SVG stand for?

Answer: Scalable Vector Graphics.

How do you display logo.png from an images folder?

Answer:

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

Which element provides a caption for a figure?

Answer: <figcaption>.

How can an image become a link?

Answer: Place the <img> element inside an <a> element.

What does loading="lazy" do?

Answer: It allows the browser to defer loading an image until it is closer to being needed.

Interview Questions

Q: What is the HTML <img> element?

Answer: The <img> element embeds an image resource into an HTML document.

Q: What is the src attribute?

Answer: The src attribute specifies the image resource that the browser should load.

Q: What is the purpose of the alt attribute?

Answer: The alt attribute provides a text alternative for an image. It is important for accessibility and is also useful when an image cannot be displayed.

Q: What is the difference between a relative image path and an absolute image URL?

Answer: A relative path is resolved based on the current document or base URL, while an absolute URL provides the complete address of the image resource.

Q: What does ../ mean in a file path?

Answer: It refers to the parent directory, allowing the path to move one directory level upward.

Q: What is the difference between <figure> and <figcaption>?

Answer: <figure> represents self-contained content such as an image or diagram, while <figcaption> provides a caption associated with that figure.

Q: Why should images be optimized?

Answer: Optimized images can reduce transferred file size and improve page-loading performance while maintaining suitable visual quality.

Q: Why should width and height be provided for images?

Answer: When appropriate intrinsic dimensions are known, width and height can help the browser reserve space for the image before it loads, reducing unexpected layout shifts.

Class Summary

In Class 11, you learned how to display and manage images in HTML.

You learned:

<img> → Image Element

src → Image Source

alt → Alternative Text

images/photo.jpg → Relative Path

../images/photo.jpg → Parent Directory Path

Absolute URL → Complete Image Address

width → Image Width

height → Image Height

<figure> → Figure Content

<figcaption> → Figure Caption

loading="lazy" → Deferred Image Loading

You also learned about:

JPG / JPEG

PNG

WebP

SVG

GIF

Raster Images

Vector Images

Image Accessibility

Image Performance

The most important syntax to remember is:

<img
    src="images/photo.jpg"
    alt="Useful description of the image"
>

Understanding image paths is especially important.

When an image does not appear, check:

File Name → Extension → Folder → Path → Capitalization

Next Class:

Class 12 — HTML Lists: Ordered, Unordered & Description Lists

HTML Images & Image Paths

What Is the <img> Element?

Basic Image Syntax

What Is the src Attribute?

What Is the alt Attribute?

Why Is Alt Text Important?

Poor Alt Text

Decorative Images

Understanding Image Paths

Image in the Same Folder

Image Inside an Images Folder

Multiple Image Folders

Parent Directory — ../

Understanding ./

Relative Image Paths

What Is an Absolute Image URL?

Relative Path vs Absolute URL

Image Width and Height

Width Example

Responsive Images with Basic CSS

Why height: auto?

Common Image Formats

JPEG / JPG

PNG

WebP

SVG

GIF

Raster vs Vector Images

Images as Links

Product Image Link

The <figure> Element

The <figcaption> Element

Complete HTML Image Example

Expected Output

Practical Example: Computer Shop Product

Practical Example: Company Team Page

Image File Names

Lowercase File Names

Why Does an Image Work on My PC but Not on Hosting?

Broken Image Example

Image Accessibility

Avoid Keyword Stuffing in Alt Text

Image Performance Basics

Native Lazy Loading

Should Every Image Use Lazy Loading?

Width and Height for Layout Stability

Common Beginner Mistakes

1. Wrong Image Path

2. Wrong File Extension

3. Wrong Capitalization

4. Missing Alt Text

5. Using Local Computer Paths

6. Distorting Images

7. Uploading Huge Images

8. Writing Meaningless Alt Text

New & Difficult Words

Important Notes

Practice Questions

Assignment

Quiz

Interview Questions

Class Summary

Leave a Reply Cancel reply

What Is the `<img>` Element?

What Is the `src` Attribute?

What Is the `alt` Attribute?

Parent Directory — `../`

Understanding `./`

Why `height: auto`?

The `<figure>` Element

The `<figcaption>` Element