Hero

HTML Image Tag Discover how to embed images into your web pages using the HTML <img> tag to make your sites visually appealing. Learning Outcomes: Learn to display images, use the src and alt attributes properly, and handle image dimensions. Prerequisites: Understanding of HTML attributes. Reading Time: 5 min read Difficulty: Beginner

Introduction

A website with just text can be quite boring. Visuals bring your content to life. The HTML Image Tag (<img>) allows you to embed pictures, illustrations, and graphics directly into your web pages.

Why This Matters

Imagine building himubey.in without any images. You wouldn't be able to show your profile picture, display screenshots of the amazing projects you've built, or add visual diagrams to your coding tutorials. The <img> tag is essential for creating an engaging user experience.

Core Concepts

The <img> tag is an empty element (it has no closing tag). It relies heavily on two critical attributes:

src (Source): This attribute tells the browser where to find the image file. It can be a relative path (local file) or an absolute URL (hosted elsewhere).
alt (Alternative Text): This attribute provides a text description of the image. If the image fails to load, this text is displayed. More importantly, screen readers read this text aloud for visually impaired users.

Syntax

Here is the standard syntax for embedding an image:

<img src="path/to/image.jpg" alt="Description of the image">

Real World Example

Let's add a hero image and a project screenshot to the Himubey portfolio.

<section class="hero">
    <!-- Profile Image -->
    <img src="/images/himanshu-profile.webp" alt="Himanshu Dubey smiling in front of a laptop" width="300" height="300">
    
    <h1>Welcome to My Portfolio</h1>
</section>

<section class="projects">
    <h2>Latest Project</h2>
    <!-- External Image -->
    <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c" alt="Code editor showing React syntax" width="800" height="400">
</section>

Best Practices

Always use alt text: This is the golden rule of accessibility. If an image is purely decorative, use an empty alt attribute (alt="") so screen readers know to skip it.
Specify Dimensions: Always include width and height attributes. This reserves space on the page before the image loads, preventing the page layout from jumping around (Cumulative Layout Shift).
Modern Formats: Use modern image formats like .webp or .avif for faster loading times compared to older formats like .jpg or .png.

Common Mistakes

Mistake: Writing "Image of" or "Picture of" in the alt attribute.

<!-- WRONG -->
<img src="dog.jpg" alt="A picture of a dog">

<!-- CORRECT -->
<img src="dog.jpg" alt="A golden retriever playing in the park">

Screen readers already announce that the element is an image, so saying "Picture of" is redundant.

💡 Himubey Tip

Images can slow down your website if they are too large. Always compress your images before uploading them, and consider adding the loading="lazy" attribute to your <img> tags so they only load when the user scrolls down to them!

Interview Questions

What does the src attribute do?
Why is the alt attribute critical for web accessibility?
What is the difference between alt text and the title attribute on an image?
How do width and height attributes improve website performance?

Mini Challenge

Task: Add a logo to your webpage.

Find an image URL online.
Add an <img> tag to your code.
Provide a highly descriptive alt attribute.
Set the width to 150 pixels and height to 50 pixels.

Summary

The <img> tag is your gateway to visual storytelling on the web. By mastering the src and alt attributes, and understanding the importance of dimensions and lazy loading, you are well on your way to building professional, accessible websites.

Next Lesson

Next Lesson: HTML Pre Tag