The HTML <img> tag is used to embed images in a webpage. It is one of the most essential elements in web development, allowing users to visually enrich content by displaying images. The <img> tag is a self-closing element, meaning it does not require a closing tag. By using the appropriate attributes, you can define the image source, alt text, and various display properties to ensure that the image appears correctly across devices and browsers.
Syntax of the <img> Tag
<img src="image-url" alt="image-description">
- src: The src attribute specifies the URL or path of the image file.
- alt: The alt attribute provides alternative text for the image, which is displayed if the image fails to load or when accessed by screen readers, enhancing accessibility and SEO.
Attributes of the <img> Tag
The <img> tag supports several attributes that enhance its functionality and ensure that images are displayed correctly across various devices and platforms.
| Attribute | Description |
|---|---|
| src | Specifies the path or URL of the image. This attribute is mandatory. |
| alt | Provides alternative text for the image. This is vital for accessibility and SEO purposes. |
| width | Specifies the width of the image (in pixels or percentage). |
| height | Specifies the height of the image (in pixels or percentage). |
| title | Adds a tooltip text when the user hovers over the image. |
| loading | Specifies how the image should be loaded (lazy or eager). |
| srcset | Allows for specifying multiple image URLs for different device resolutions or screen sizes. |
| sizes | Defines the image sizes for different screen widths when using srcset. |
| crossorigin | Defines how the image should handle CORS (Cross-Origin Resource Sharing) requests. |
The alt attribute is particularly important for SEO and accessibility because search engines and screen readers rely on it to understand the content of the image.
Examples of HTML <img> Tag
Example 1: Simple Image with Alt Text
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Example</title>
</head>
<body>
<img src="https://example.com/image.jpg" alt="Description of the image">
</body>
</html>
In this example, the image is displayed using the src attribute, and the alt text provides a description of the image for accessibility and SEO.
Example 2: Responsive Image with srcset and sizes
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
</head>
<body>
<img
src="https://example.com/image-large.jpg"
srcset="https://example.com/image-small.jpg 500w,
https://example.com/image-medium.jpg 1000w,
https://example.com/image-large.jpg 1500w"
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 800px,
1200px"
alt="Responsive image example">
</body>
</html>
In this example, the srcset attribute is used to provide multiple image sources depending on the device's screen resolution, improving performance on different devices. The sizes attribute defines the conditions for choosing an appropriate image size based on screen width.
FAQs About HTML <img> Tag
Q1: What is the purpose of the HTML <img> tag?
A: The <img> tag is used to display images on a webpage by embedding them directly into the HTML document.
Q2: Why is the alt attribute important for the <img> tag?
A: The alt attribute is important for accessibility as it describes the image for users who rely on screen readers. It also helps search engines understand the content of the image, improving SEO.
Q3: Can I resize an image using the <img> tag?
A: Yes, you can resize an image using the width and height attributes, but it's generally better to use CSS for responsive image scaling to ensure better control and flexibility.
Q4: What is the difference between the src and srcset attributes?
A: The src attribute specifies the URL of the image, while the srcset attribute allows you to specify different image versions for different screen resolutions, making your images responsive and more efficient.
Q5: What does the loading = “lazy” attribute do in the <img> tag?
A: The loading = “lazy” attribute defers the loading of the image until it is needed, typically when it appears in the viewport. This improves page load performance, especially for pages with many images.
