HTML Tags
HTML <img> Tag
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).
Syntax
html
<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
html
<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
html
Please use our TryIt Editor to see the outputBrowser Support
Chrome | Edge | Firefox | 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.