Introduction

In the previous lesson, you learned about HTML Links and how hyperlinks connect webpages, websites, files, and other resources.

Text is essential for providing information, but webpages containing only text can feel plain and difficult to scan.

Images make webpages more attractive, improve visual communication, help explain concepts, display products, support branding, and increase user engagement.

HTML provides the <img> element to display images such as photographs, logos, icons, illustrations, diagrams, and graphics on webpages.

<img src="nature.jpg" alt="Beautiful Nature">

What is an Image?

An HTML image is a graphical resource displayed on a webpage using the <img> element.

The image itself is usually stored as a separate file. The HTML document contains a reference that tells the browser where that file is located.

Images can include photographs, company logos, product pictures, icons, illustrations, diagrams, charts, screenshots, banners, and many other types of visual content.

<img
    src="photo.jpg"
    alt="Mountain Landscape"
>

Why Do We Need Images?

Images are an important part of modern web design because many types of information are easier to understand visually.

A product description becomes more useful when users can see the product. A tutorial becomes easier to follow when it contains screenshots or diagrams. A company becomes easier to recognize when its logo is displayed consistently.

Real-World Analogy

Imagine reading a school textbook containing only long paragraphs.

Now imagine the same textbook containing diagrams, photographs, maps, charts, and illustrations alongside the written explanations.

The visual version is usually easier to understand because images help readers connect written information with visual examples.

Textbook Structure       Webpage Structure
──────────────────       ─────────────────

Chapter                  Heading
    │                         │
    ▼                         ▼
Paragraph                Paragraph
    │                         │
    ▼                         ▼
Picture                  Image
    │                         │
    ▼                         ▼
Explanation              Description

HTML Image Element & Parts

Images are displayed using the <img> element.

Unlike elements such as paragraphs and headings, the <img> element does not wrap content between an opening and closing tag.

The image element is an empty element. Its information is provided through attributes such as src, alt, width, and height.

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

<img src="nature.jpg" alt="Beautiful Nature">
──── ──────────────────── ──────────────────────
 │            │                       │
 │            │                       └── Alternative Text
 │            │
 │            └── Image Source
 │
 └── Image Element

<img
    src="nature.jpg"
    alt="Beautiful Nature"
    width="600"
    height="400"
>

Example 1: Displaying an Image

The simplest image requires a source that identifies the image file and alternative text that describes the image when appropriate.

<img
    src="nature.jpg"
    alt="Beautiful Nature"
>

Example 2: Setting Width and Height

The width and height attributes can specify the intended display dimensions of an image.

<img
    src="flower.jpg"
    alt="Flower"
    width="300"
    height="200"
>

Image File Formats

Images are available in different file formats. Each format has different characteristics and is suitable for different types of visual content.

Relative vs Absolute Paths

The src attribute must tell the browser where the image resource is located.

Images inside the same project commonly use relative paths, while externally hosted images can use absolute URLs.

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

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

<img
    src="https://example.com/images/logo.png"
    alt="Company Logo"
>

website
│
├── index.html
│
└── images
    ├── logo.png
    ├── banner.jpg
    └── product.webp


From index.html:

images/logo.png
images/banner.jpg
images/product.webp

Example 3: Complete Image Example

Images are commonly combined with headings, paragraphs, links, and other HTML elements to create complete webpage content.

<h1>Welcome to Bytecrest</h1>

<img
    src="logo.png"
    alt="Bytecrest Logo"
    width="250"
    height="150"
>

<p>Learn Programming Easily.</p>

Image as a Link

An image can become clickable by placing the <img> element inside an <a> anchor element.

The anchor element controls the destination, while the image becomes the clickable content.

<a href="https://www.bytecrest.com">
    <img
        src="logo.png"
        alt="Bytecrest"
    >
</a>

<a href="Destination">
        │
        ▼
    <img src="Image">
        │
        ▼
Clickable Image
        │
        ▼
Open Destination

Browser Rendering Flow

When the browser encounters an <img> element, it reads the source, requests the image resource, decodes the received file, and displays the visual content.

HTML Source
    │
    ▼
Find <img> Element
    │
    ▼
Read src Attribute
    │
    ▼
Resolve Image Path
    │
    ▼
Request Image File
    │
    ▼
Receive Resource
    │
    ▼
Decode Image Data
    │
    ▼
Display Image

<img
    src="nature.jpg"
    alt="Beautiful Nature"
>

Missing Image Example

An image may fail to load when the file does not exist, the path is incorrect, the filename is wrong, the network request fails, or the resource is unavailable.

<img
    src="car.png"
    alt="Sports Car"
>

If car.png cannot be loaded, the browser cannot display the intended visual resource.

Real-World Applications

Images are used throughout almost every type of modern website and web application.

Advantages of Images

Common Beginner Mistakes

<!-- ❌ Missing alt attribute -->

<img src="logo.png">


<!-- ✅ Alternative text provided -->

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

<!-- Project Structure

website/
├── index.html
└── images/
    └── logo.png

-->


<!-- ❌ Wrong -->

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


<!-- ✅ Correct -->

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

<!-- Actual file: logo.png -->


<!-- ❌ Wrong extension -->

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


<!-- ✅ Correct extension -->

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

Best Practices

<!-- Project image -->

<img
    src="images/company-logo.svg"
    alt="Bytecrest"
    width="240"
    height="80"
>


<!-- Product image -->

<img
    src="images/products/laptop.webp"
    alt="Silver laptop open on a desk"
    width="800"
    height="600"
>


<!-- Clickable image -->

<a href="/products/laptop">
    <img
        src="images/products/laptop-thumbnail.webp"
        alt="View Silver Laptop"
        width="300"
        height="225"
    >
</a>


<!-- Decorative image -->

<img
    src="images/decorative-pattern.svg"
    alt=""
>

Frequently Asked Questions

Key Takeaways

Summary

Images are an important part of modern webpages because they improve visual communication, support written content, strengthen branding, display products, and make information more engaging.

HTML displays images using the <img> element. The src attribute identifies the image resource, while the alt attribute provides a text alternative.

The width and height attributes can specify intended display dimensions, but image proportions should be preserved to avoid distortion.

Different image formats serve different purposes. JPEG is commonly used for photographs, PNG is useful for transparency, GIF supports simple animation, SVG is suitable for scalable vector graphics, and WebP provides efficient modern image compression.

Project images commonly use relative paths, while externally hosted resources can use absolute URLs. Correct folder paths, filenames, extensions, and relevant letter case are essential for successful image loading.

An image can become clickable by placing the <img> element inside an <a> anchor element.

When the browser encounters an image element, it reads the src value, resolves the resource location, requests the image file, decodes the received data, and displays the visual content.

If an image fails to load, useful alternative text helps preserve the meaning or purpose of the missing visual resource.

Professional websites use appropriately sized, optimized, accessible, and well-organized images to improve both user experience and performance.

In the next lesson, you will learn about HTML Lists and how to organize related information using ordered and unordered list structures.