Syntax
<img src="url" alt="description" width="width" height="height">
Attributes
1. src` (source):
Description: Specifies the path to the image file. This can be a relative path, an absolute path, or a URL.
Example: src="images/picture.jpg"
2. alt` (alternative text):
Description: Provides alternative text for the image if it cannot be displayed. This text is also used by screen readers for accessibility purposes.
Example: `alt="A description of the image"`
3. width:
Description: Specifies the width of the image. This can be defined in pixels or as a percentage of the containing element.
Example: width="500"
4. height:
Description: Specifies the height of the image. Like the width, it can be defined in pixels or as a percentage.
Example: height="300"
Optional Attributes
title:
Description: Provides additional information about the image, often shown as a tooltip when the user hovers over the image.
Example: title="Tooltip text"
loading:
Description: Defines the loading behavior of the image. Values can be "lazy" (defers loading until the image is near the viewport) or "eager" (loads the image immediately).
Example: loading="lazy"
Example Usage
<img src="https://example.com/image.jpg" alt="A beautiful landscape" width="600" height="400" title="Landscape Image" loading="lazy">
Points to Remember
- The `alt` attribute is crucial for accessibility and SEO, ensuring that users and search engines understand the content of the image.
- The `width` and `height` attributes help in maintaining the aspect ratio and avoiding layout shifts while the image loads.
- Using the `loading` attribute can improve the performance of your web page by deferring offscreen images.
The `<img>` tag is an essential part of HTML for displaying images, contributing to both the visual appeal and usability of web pages.