The
<img>tag in HTML is used to embed images into a webpage. It is an empty tag (no closing tag) and requires attributes likesrc(source URL of the image) andalt(alternative text for accessibility and SEO).It helps add visual content like icons, illustrations, and photographs to enhance web design and user experience.
Syntax
<img src="image.jpg" alt="Description of image">Attributes
| Attribute | Description | Example |
|---|---|---|
src | Specifies the path to the image file. | src="photo.png" |
alt | Provides alternate text if image fails to load. | alt="Profile picture" |
width | Defines the image width (in px or %). | width="300" |
height | Defines the image height (in px or %). | height="200" |
loading | Defines how the image should load (lazy or eager). | loading="lazy" |
title | Provides extra info on hover. | title="HTML5 Logo" |
srcset | Defines multiple image sources for responsive design. | srcset="img-400.jpg 400w, img-800.jpg 800w" |
sizes | Specifies how different image sizes are used for screen widths. | sizes="(max-width: 600px) 480px, 800px" |
crossorigin | Indicates if image should be fetched with CORS. | crossorigin="anonymous" |
Example
<h2>Example: Adding an Image</h2>
<img src="https://picsum.photos/seed/picsum/400/300" alt="Beautiful sunrise over the mountains" width="400" height="250">Output
Browser Output
Please use our TryIt Editor to see the output
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
(Displays an image of sunrise on the webpage — width 400px, height 250px)
Notes
- The
<img>tag does not have a closing tag. - Always include the
altattribute — it improves accessibility and SEO. - Use
loading="lazy"for better performance (defers loading until the image is visible). - Use responsive image techniques (
srcset,sizes) for adaptive layouts.
Conclusion
The <img> tag is the backbone of visual content in web design. When used correctly with attributes like alt, srcset, and loading, it makes websites both beautiful and efficient — ensuring faster loading, better SEO, and accessibility compliance.
