Image Elements

Metadata

• Date :: 13-04-2025
• Tags :: web-dev

---

Notes

🖼️ HTML Image Element (<img>) – Complete Notes with Explanation and Examples

📌 Why Images Matter in Web Development

A website with no images would be quite dull and lifeless. Images help:

• Visually communicate ideas and moods.

• Enhance aesthetics and engagement.

• Provide context to content.

• Increase user interest and reduce bounce rates.

• Contribute to branding and storytelling.

Hence, learning how to properly use images is a core part of HTML and web development.

🧱 1. Introducing the <img> Element

The <img> element is used to embed images in a web page.

🔤 Basic Syntax:

<img src="image-url" alt="description" />

✅ Key Characteristics:

• It is a void (self-closing) HTML element.

• Does not require a closing tag like </img> (because it doesn’t contain content inside it).

• Must have at least the src attribute, and should have an alt attribute for accessibility.

🧩 2. Understanding Attributes of <img>

🔹 src (Required)

• Stands for: Source

• Purpose: Tells the browser where to find the image file.

• Can be:

  • A URL to an online image (e.g. https://example.com/image.jpg)

  • A relative path to an image stored locally (e.g. images/photo.jpg)

🔹 alt (Highly Recommended)

• Stands for: Alternative Text

• Purpose:

  • Describes the image content for screen readers.

  • Helps visually impaired users understand the image.

  • Is shown when an image fails to load due to network or file issues.

• Always write meaningful alt text, unless the image is decorative.

✅ Example:

<img src="https://picsum.photos/200" alt="A random placeholder image" />

This will show a random 200x200 px image from the picsum.photos service.

🎯 What is a “Void” Element?

Void (self-closing) elements do not have a closing tag. They exist alone.

Examples of void elements:

• <img /> – for images

• <br /> – line break

• <hr /> – horizontal rule

• <input /> – form input field

<img src="..." alt="..." />

Since an image has no “text content,” there’s no reason for a closing tag.

🎨 Image Display in Browser

Once rendered in the browser:

• The image appears visually using the source defined in the src attribute.

• The alt text is not visible, but acts as fallback content and for accessibility.

• If the image file is missing or broken, the browser shows the alt text instead.

📸 Using Placeholder Images

🧰 Tool: Picsum.photos

• It’s like “Lorem Ipsum” but for photos.

• Provides random placeholder images.

• Great for mockups, drafts, and UI layout without needing real assets.

💡 Example Usage:

<img src="https://picsum.photos/300/300" alt="Placeholder image" />

• Displays a random 300x300 image every time the page reloads.

• Ideal for learning or rapid prototyping.

🐶 Challenge Activity: Are You a Cat or Dog Person?

🎯 Task:

Create a mini web page with:

1. An <h1> that says “I’m a dog person” or “I’m a cat person”

2. An image (<img>) showing a dog or a cat

3. Add proper alt text to the image

💡 Code Example (Dog Person):

<h1>I'm a dog person</h1>
<img src="https://example.com/dog.gif" alt="A happy puppy digging in the sand" />

• src can be a GIF too! GIFs display animated content.

• Image will autoplay in the browser just like regular images.

• Makes your site feel more dynamic and fun.

🐱 Code Example (Cat Person):

<h1>I'm a cat person</h1>
<img src="https://example.com/cat.jpg" alt="A calm cat sitting on a couch" />

• Here, the image is a static JPEG.

• Reflects the laid-back nature of cats 🐾.

🧑‍🦯 3. Accessibility and the alt Attribute

🧠 Why is alt Important?

• Helps screen readers describe images to blind or visually impaired users.

• Makes your website inclusive and user-friendly.

• Required for ADA compliance and WCAG accessibility standards.

🎧 Screen Reader Example:

• Screen reader might read:

  “Image: A dolphin leaping from the sea.”

📌 Tool Mentioned: Silktide Toolbar

• Chrome extension that simulates a screen reader experience

• Helps developers understand how accessible their site is

• Used in this lesson to show alt text in action

🛠️ Best Practices for Using <img>

Tip	Why It’s Important
✅ Always use alt	Accessibility and fallback content
✅ Use meaningful descriptions	Helps screen readers
✅ Optimize image size	Improves load time
✅ Use correct file paths	Avoid broken images
✅ Use responsive sizes (CSS or width/height)	Better mobile experience
✅ Use placeholder services like picsum.photos during development	Saves time

✅ Summary Table

Property	Description	Required
<img>	Embeds an image into a webpage	Yes
src	URL or path of the image	✅ Yes
alt	Alternative description of image	⚠️ Strongly recommended
Self-closing?	Yes (<img />)	–

📘 Example: Full Mini Project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cat or Dog?</title>
</head>
<body>
  <h1>I'm a dog person</h1>
  <img src="https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" alt="Excited puppy digging in the sand" />
</body>
</html>

🧠 Review Questions

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

2. Why is the alt attribute important?

3. What is a void element in HTML?

4. Can the <img> tag contain text between opening and closing tags?

5. Name a tool to test how a screen reader reads your website.

🧪 Practice Task

Try creating:

• A new HTML file

• An <h1> that says your pet preference

• An image using either a random picsum.photos image or a cute animal image

• Add meaningful alt text

• Preview it in the browser

🎁 Bonus: Image File Types

Type	When to Use
.jpg or .jpeg	Great for real-world photos
.png	Supports transparency (logos/icons)
.gif	Simple animations
.webp	Modern format with better compression

---

References

• What is HTML
• HTML Heading Elements
• Self Closing Tags

  index