🌐 Web Development Roadmap — Part 17

HTML Images — <img> Tag

Images make webpages more visual and engaging. HTML provides the <img> element to display images.

1. Adding an Image

<img src="photo.jpg" alt="A beautiful landscape">

Unlike elements such as <p>, <img> does not need a closing tag.

2. The src Attribute

src stands for source.

It tells the browser where the image is located.

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

The browser follows the path:

HTML
 ↓
src="images/profile.jpg"
 ↓
images folder
 ↓
http://profile.jpg
 ↓
Display image

3. The alt Attribute

alt provides alternative text describing the image.

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

It is important for accessibility and can also be displayed if the image cannot be loaded.

A good alt describes the actual image:

<img src="dog.jpg" alt="Golden retriever sitting in a park">

Avoid unnecessary descriptions such as:

alt="image"

4. Images Inside Folders

Suppose your project looks like:

my-website/
├── http://index.html
├── http://style.css
└── images/
    ├── http://logo.png
    └── http://profile.jpg

You can write:

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

5. Image Dimensions

You can specify dimensions using width and height attributes:

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

However, modern websites commonly use CSS to control presentation and responsive sizing.

6. Absolute vs Relative Image Paths

Relative path:

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

This refers to a file within your project.

An external image can use a full URL:

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

For real projects, images are often hosted as part of your application or through an image/CDN service.

7. Images as Links

You can place an image inside an anchor element:

<a href="https://example.com">
    <img src="logo.png" alt="Example website">
</a>

Now clicking the image follows the link.

8. Decorative Images

Not every image provides meaningful information.

For a purely decorative image, an empty alt is appropriate:

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

This tells assistive technologies that the image can be ignored.

9. Common Image Formats

You will commonly encounter:

JPEG / JPG → Photos
PNG → Transparency and graphics
SVG → Logos and scalable graphics
WebP → Modern web images
AVIF → Modern, highly compressed images
GIF → Simple animations

The appropriate format depends on the type of image and performance requirements.

10. Complete Example

<!DOCTYPE html>

<html>
<head>
    <title>My Portfolio</title>
</head>

<body>

    <h1>My Portfolio</h1>

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

    <h2>My Projects</h2>

    <img
        src="images/project.png"
        alt="Screenshot of my web development project">

</body>
</html>

🧠 Remember

<img>
  ↓
Displays an image

src
  ↓
Where the image comes from

alt
  ↓
Alternative description

width / height
  ↓
Image dimensions

Key Takeaway

The basic image structure is:

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

The two most important attributes to remember are:

src → image location
alt → meaningful alternative text

Double Tap ❤️ For Part-18