Why Image source and alt attribute in HTML? - Purpose & Use Cases

The Big Idea

What if your beautiful image disappears--will your message vanish too?

The Scenario

Imagine you want to show a picture on your webpage. You type the image's file path directly into your code without any description.

The Problem

If the image file is missing or slow to load, visitors see a broken icon or nothing at all. Also, people using screen readers or with slow internet miss out because there is no text to explain the image.

The Solution

Using the src attribute tells the browser where to find the image, and the alt attribute provides a text description. This helps everyone understand what the image is, even if it doesn't load or if they use assistive tools.

Before vs After

✗ Before

<img src="photo.jpg">

✓ After

<img src="photo.jpg" alt="A smiling child playing in the park">

What It Enables

This makes your website more reliable, accessible, and friendly to all users, no matter how they browse.

Real Life Example

Think about a news site showing a photo of a protest. If the image doesn't load, the alt text can say "People holding signs at a peaceful protest," so readers still get the message.

Key Takeaways

Always use src to link your image file.

Use alt to describe the image for accessibility and fallback.

This helps everyone understand your content better.