HTML Image
The HTML Image Tag <img> is used to embed images on a webpage. It is an empty (self-closing) tag that uses the src attribute to specify the image file and alt for descriptive alternative text.
What is the Image Tag?
- The
<img>tag embeds an image into the webpage. - It is a self-closing (empty) element — no closing tag.
- Use
srcfor the image URL andaltfor description. - Modern attributes:
width,height,loading="lazy".
Why Use Images?
Visual Appeal
Images make pages engaging and informative.
Storytelling
A picture is worth a thousand words.
Product Display
E-commerce relies on quality product images.
SEO
Optimized images improve search visibility.
Accessibility
Alt text helps visually impaired users.
Lazy Loading
Modern attributes save bandwidth and improve speed.
Image Tag Syntax
- Basic:
<img src="logo.png" alt="Logo"> - Size:
<img src="img.jpg" width="300" height="200"> - Lazy:
<img src="a.jpg" loading="lazy"> - Responsive:
srcsetandsizesattributes - Title:
title="Tooltip text"
Example 1: River Image
<!DOCTYPE html> <html> <body> <h4>River</h4> <img src="river.jpeg" alt="River image" width="300" height="300"> </body> </html>
River
- The
<img>tag embeds the image. - The
srcattribute specifies the image location. - The
widthandheightattributes control the image size.
Example 2: Cherry Blossom Image
<!DOCTYPE html> <html> <head> <title>Cherry Blossom</title> </head> <body> <h4>Cherry Blossom</h4> <img src="imgs/cherry blossm.jpeg" alt="Cherry blossom image" width="300" height="300"> </body> </html>
Cherry Blossom
Example 3: Flowers Image
<!DOCTYPE html> <html> <body> <h4>Flowers</h4> <img src="imgs/flowers.webp" alt="Flowers image" width="300" height="200"> </body> </html>
Flowers
Code Explanation
| HTML Part | Meaning |
|---|---|
| <img> | Self-closing image element. |
| src | Path or URL of the image file. |
| alt | Alternative text describing the image. |
| width / height | Sets dimensions in pixels. |
| loading="lazy" | Loads image only when it enters the viewport. |
Image Attributes
Use Cases
- Logos and branding: Display company identity.
- E-commerce: Show products in galleries.
- Blog illustrations: Support articles with visuals.
- Backgrounds: Add hero or banner images.
Practice Questions
- Add an image with descriptive
alttext. - Set width and height on an image to prevent layout shift.
- Use
loading="lazy"on a below-the-fold image. - Make an image clickable by wrapping it in
<a>.
Frequently Asked Questions
What does the alt attribute do?
It provides alternative text for screen readers and when the image fails to load.
What image formats are supported?
JPG, PNG, GIF, SVG, WebP and AVIF are widely supported.
Why use loading='lazy'?
It defers loading until the image is near the viewport, saving bandwidth and improving speed.
How do I make an image responsive?
Use the srcset and sizes attributes or CSS max-width: 100%.
Conclusion
The HTML Image tag is essential for any modern webpage. Use proper alt text, correct dimensions and modern attributes like lazy loading and srcset to deliver fast, accessible and SEO-friendly visuals.
Additional Tips
- Always use alt text: Essential for SEO and accessibility.
- Optimize images: Use WebP/AVIF for smaller sizes.
- Set dimensions: Prevents layout shifts.
- Lazy load below-the-fold: Improves performance.