Image source and alt attribute in HTML - Deep Dive

Overview - Image source and alt attribute

What is it?

The image source and alt attribute are parts of the HTML tag. The source (src) tells the browser where to find the image file to show. The alt attribute provides a text description of the image for people who cannot see it or when the image fails to load. Together, they help display images properly and make websites accessible.

Why it matters

Without the image source, the browser wouldn't know which picture to show, so the page would look broken or empty. Without the alt text, people using screen readers or with slow connections would miss important information. This makes websites less friendly and harder to use for many people. Good use of these attributes improves user experience and accessibility.

Where it fits

Before learning this, you should understand basic HTML tags and attributes. After this, you can learn about responsive images, image optimization, and accessibility best practices in web development.

Mental Model

Core Idea

The image source points to the picture file, and the alt attribute describes it in words for when the image can't be seen.

Think of it like...

It's like a photo album where each photo has a label underneath. The photo is the image source, and the label is the alt text that tells you what the photo shows if you can't see it.

┌───────────────┐
│ <img> tag    │
│ ┌─────────┐  │
│ │ src="" │  │  ← Image file location
│ └─────────┘  │
│ ┌─────────┐  │
│ │ alt="" │  │  ← Text description
│ └─────────┘  │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding the <img> Tag Basics

Concept: Learn what the tag does and how it shows pictures on a webpage.

The tag is used to add pictures to a webpage. It needs a source (src) attribute that tells the browser where the image file is. For example: will show the picture named cat.jpg.

Result

The browser displays the image from the given source on the page.

Knowing that is the tag for images helps you add pictures to your website easily.

2

Foundation

What the src Attribute Does

Concept: The src attribute tells the browser the exact location of the image file to display.

The src attribute can be a file name, a path, or a full URL. For example, src="images/dog.png" looks for the dog.png file inside the images folder. The browser fetches this file and shows it where the tag is placed.

Result

The correct image appears on the webpage where the tag is used.

Understanding src is key because without it, the browser has no idea what image to show.

3

Intermediate

Why the alt Attribute Matters

🤔Before reading on: do you think alt text is only for SEO or does it have other important uses? Commit to your answer.

Concept: The alt attribute provides a text description of the image for accessibility and fallback.

Alt text helps screen readers describe images to people who cannot see them. It also shows up if the image fails to load. For example: . This text explains the image's content.

Result

Users who can't see the image still understand what it represents through the alt text.

Knowing alt text improves accessibility and user experience for all, not just search engines.

4

Intermediate

How src and alt Work Together

🤔Before reading on: if an image fails to load, what do you think the browser shows? The broken image icon only, or something else?

Concept: The src and alt attributes combine to ensure images display correctly or provide meaningful fallback text.

If the image file at src can't be found or loaded, the browser shows the alt text instead of a blank space or broken icon. This keeps the page informative. For example, if src="missing.jpg" doesn't exist, alt="Missing image description" will appear as text.

Result

The page remains understandable even when images fail to load.

Understanding this fallback mechanism helps you build more robust and user-friendly websites.

5

Advanced

Best Practices for Writing alt Text

🤔Before reading on: do you think alt text should describe every detail of an image or just the important parts? Commit to your answer.

Concept: Good alt text is concise, descriptive, and meaningful to the page context.

Avoid vague alt text like "image" or "photo." Instead, describe what the image shows and its purpose. For decorative images that add no information, use alt="" (empty) to tell screen readers to skip them. This improves accessibility and user experience.

Result

Screen reader users get useful information, and decorative images don't cause confusion.

Knowing how to write alt text well makes your site inclusive and professional.

6

Expert

Handling Complex Images and Accessibility

🤔Before reading on: do you think a complex chart image should have a short alt text or a longer detailed description? Commit to your answer.

Concept: For complex images like charts, alt text alone may not suffice; use additional descriptions or ARIA techniques.

When images contain complex data, provide a brief alt text and link to a longer description elsewhere on the page. Use ARIA attributes or captions to enhance accessibility. This ensures all users understand the image content fully.

Result

Users with disabilities can access detailed information that images convey visually.

Understanding these advanced techniques helps you create truly accessible and professional websites.

Under the Hood

When the browser reads an tag, it looks at the src attribute to fetch the image file from the server or local folder. It then decodes and renders the image pixels on the page. If the image cannot be loaded, the browser displays the alt text as a fallback. Screen readers read the alt text aloud to users who cannot see images, making the content accessible.

Why designed this way?

The src attribute was designed to separate content (image location) from presentation, allowing flexible image sources. The alt attribute was introduced to improve accessibility and provide fallback content, addressing the needs of users with disabilities and slow connections. This design balances visual richness with inclusivity.

┌───────────────┐       ┌───────────────┐
│ <img> tag    │──────▶│ Browser fetch │
│ src="file"  │       │ image file    │
└───────────────┘       └───────────────┘
         │                      │
         ▼                      ▼
┌───────────────┐       ┌───────────────┐
│ Image renders │       │ If fail: show │
│ on page      │       │ alt text      │
└───────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does leaving out alt text have no impact if the image loads fine? Commit yes or no.

Common Belief: If the image loads correctly, alt text is not important and can be skipped.

Reality: Alt text is crucial for accessibility and SEO even if the image loads fine. Screen readers rely on it to describe images to users who cannot see them.

Why it matters: Skipping alt text excludes users with visual impairments and harms your site's search engine ranking.

Quick: Do you think alt text should always describe the image in full detail? Commit yes or no.

Common Belief: Alt text must describe every detail of the image exactly.

Reality: Alt text should be concise and meaningful, focusing on the image's purpose, not every detail. Overly long descriptions can confuse users.

Why it matters: Too much detail in alt text overwhelms screen reader users and reduces clarity.

Quick: Is it okay to use the same alt text for all images of the same type? Commit yes or no.

Common Belief: Using the same alt text like "image" or "photo" for all images is fine.

Reality: Each image should have unique alt text that describes its specific content or function.

Why it matters: Generic alt text provides no useful information, making accessibility tools ineffective.

Quick: Do you think the alt attribute affects the visual display of images? Commit yes or no.

Common Belief: The alt attribute changes how the image looks on the page.

Reality: Alt text does not affect the image's appearance; it only shows when the image cannot load or is read by assistive technologies.

Why it matters: Misunderstanding this can lead to skipping alt text, thinking it changes design.

Expert Zone

1

Empty alt attributes (alt="") signal decorative images to screen readers, preventing unnecessary noise.

2

Relative vs absolute paths in src affect how images load depending on the page location and server setup.

3

Browsers preload images from src but do not preload alt text; alt text is only used when needed.

When NOT to use

Avoid using images with important information without alt text; instead, use HTML text or SVG with accessible labels. For purely decorative images, use empty alt attributes. For complex visuals, supplement alt text with detailed descriptions or ARIA labels.

Production Patterns

In professional websites, alt text is carefully crafted for SEO and accessibility. Responsive images use srcset with multiple sources, but alt remains mandatory. Automated tools check for missing or poor alt text during quality assurance.

Connections

Accessibility (a11y)

Builds-on

Understanding alt attributes is a foundational step toward making websites usable by people with disabilities.

SEO (Search Engine Optimization)

Builds-on

Alt text helps search engines understand image content, improving website ranking and discoverability.

Human Communication

Analogy

Alt text is like describing a picture to someone over the phone; it teaches how to convey visual information through words.

Common Pitfalls

#1 Leaving out the alt attribute entirely.

Wrong approach:

Correct approach:

Root cause:

Not understanding that alt text is required for accessibility and fallback.

#2 Using vague or generic alt text like 'image' or 'photo'.

Wrong approach:

Correct approach:

Root cause:

Thinking any alt text is enough without considering meaningful description.

#3 Writing too long or detailed alt text that overwhelms users.

Wrong approach:

Correct approach:

Root cause:

Confusing alt text with full image captions or descriptions.

Key Takeaways

The src attribute tells the browser where to find the image file to display on the webpage.

The alt attribute provides a text description of the image for accessibility and when images fail to load.

Good alt text is concise, descriptive, and meaningful to improve user experience for all visitors.

Leaving out or misusing alt text harms accessibility and SEO, making your website less inclusive and discoverable.

Advanced use of alt text includes empty values for decorative images and longer descriptions for complex visuals.

Practice

1. What does the alt attribute in an <img> tag do?

easy

A. Provides a text description of the image for screen readers and when the image can't load

B. Specifies the URL of the image to display

C. Sets the size of the image on the page

D. Adds a border around the image

Solution

1. Step 1: Understand the purpose of the alt attribute

   The alt attribute provides alternative text describing the image content.

2. Step 2: Recognize its use for accessibility and fallback

   This text helps screen readers and shows if the image fails to load.

3. Final Answer:

   Provides a text description of the image for screen readers and when the image can't load -> Option A

4. Quick Check:

   alt describes image content [OK]

Hint: Alt text describes images for accessibility and fallback [OK]

Common Mistakes:

• Confusing alt with src attribute
• Thinking alt controls image size
• Using alt to add styling

2. Which of the following is the correct syntax to add an image with source "photo.jpg" and alt text "A sunset"?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct tag and attributes

   The correct tag is <img> with attributes src and alt.

2. Step 2: Check attribute names and order

   <img src="photo.jpg" alt="A sunset"> uses correct attribute names and syntax: src="photo.jpg" and alt="A sunset".

3. Final Answer:

   <img src="photo.jpg" alt="A sunset"> -> Option A

4. Quick Check:

   Correct tag and attributes = <img src="photo.jpg" alt="A sunset"> [OK]

Hint: Use <img> with src and alt attributes exactly named [OK]

Common Mistakes:

• Using <image> instead of <img>
• Using 'source' instead of 'src'
• Using 'description' instead of 'alt'

3. What will the browser display if this code is used and the image file "logo.png" is missing?

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

medium

A. Nothing will show, just empty space

B. The browser will crash

C. An error message will pop up

D. The text "Company Logo" will appear instead of the image

Solution

1. Step 1: Understand what happens when image source is missing

   If the image file can't be found, the browser shows the alt text as a fallback.

2. Step 2: Identify the alt text in the code

   The alt text is "Company Logo", so this text will display in place of the missing image.

3. Final Answer:

   The text "Company Logo" will appear instead of the image -> Option D

4. Quick Check:

   Missing image shows alt text [OK]

Hint: Missing images show alt text in browser [OK]

Common Mistakes:

• Expecting no output or blank space
• Thinking browser shows error popups
• Assuming browser crashes

4. Find the error in this image tag:

<img src="picture.jpg" alt>

medium

A. The img tag should be closed with

B. The src attribute is misspelled

C. The alt attribute is missing a value

D. The alt attribute should be written as alt-text

Solution

1. Step 1: Check the alt attribute syntax

   The alt attribute is present but has no value assigned, which is invalid.

2. Step 2: Confirm correct attribute names and tag usage

   The src attribute is correct, and <img> is self-closing, so no closing tag needed.

3. Final Answer:

   The alt attribute is missing a value -> Option C

4. Quick Check:

   Alt attribute must have a value [OK]

Hint: Alt attribute always needs a descriptive value [OK]

Common Mistakes:

• Leaving alt attribute empty
• Adding closing tag
• Changing alt attribute name incorrectly

5. You want to add an image that shows a cat playing with a ball. Which is the best way to write the <img> tag for accessibility and SEO?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand the purpose of alt text for accessibility and SEO

   Alt text should clearly describe the image content to help screen readers and improve search engine understanding.

2. Step 2: Evaluate the options for descriptive quality

   <img src="cat-ball.jpg" alt="Cat playing with a ball"> describes the image specifically as "Cat playing with a ball", which is clear and meaningful.

3. Final Answer:

   <img src="cat-ball.jpg" alt="Cat playing with a ball"> -> Option B

4. Quick Check:

   Descriptive alt text improves accessibility and SEO [OK]

Hint: Use clear, specific alt text describing the image content [OK]

Common Mistakes:

• Using vague alt text like 'image' or 'cute'
• Omitting alt attribute entirely
• Using unrelated or too short alt text