The <img> tag in HTML is used to embed images into a webpage. It is a self-closing tag and does not require a closing tag. The <img> tag is one of the most common and versatile elements for adding visual content to web pages.

Syntax:

<img src="image.jpg" alt="Description of the image" width="600" height="400">

Key Attributes:

1. src:

   • Specifies the URL or path of the image file to display. This attribute is required.

   <img src="https://www.example.com/image.jpg" alt="Example Image">
   

2. alt:

   • Provides alternative text for the image if it cannot be displayed. This attribute is essential for accessibility, as it describes the content or function of the image for users who rely on screen readers.

   <img src="https://www.example.com/image.jpg" alt="Description of the image">
   

3. width and height:

   • Define the dimensions of the image in pixels. These attributes are optional but can be used to control the size of the image. The image will be scaled to fit these dimensions while maintaining its aspect ratio.

   <img src="https://www.example.com/image.jpg" alt="Example Image" width="600" height="400">
   

4. title:

   • Provides additional information about the image, which is typically displayed as a tooltip when the user hovers over the image.

   <img src="https://www.example.com/image.jpg" alt="Example Image" title="Hover text">
   

5. loading:

   • Specifies how the browser should load the image. It can be set to eager (default, loads immediately) or lazy (loads only when the image is about to enter the viewport).

   <img src="https://www.example.com/image.jpg" alt="Example Image" loading="lazy">
   

Example Usage:

Basic Example:

<img src="https://www.example.com/image.jpg" alt="Example Image">

In this example, the <img> tag embeds the image located at "https://www.example.com/image.jpg" and provides alternative text "Example Image" in case the image cannot be displayed.

Example with Dimensions:

<img src="https://www.example.com/image.jpg" alt="Example Image" width="300" height="200">

In this example, the image is displayed with a width of 300 pixels and a height of 200 pixels.

Example with Tooltip:

<img src="https://www.example.com/image.jpg" alt="Example Image" title="This is an example image">

In this example, the image has a tooltip "This is an example image" that appears when the user hovers over it.

Accessibility and Best Practices:

• Alt Attribute: Always include an alt attribute to describe the image content. This helps users who rely on screen readers and improves accessibility. For purely decorative images, the alt attribute should be an empty string (alt=""), so screen readers can skip them.

• Responsive Images: To ensure images scale appropriately on different devices, consider using CSS for responsive design. For example:

  img {
    max-width: 100%;
    height: auto;
  }
  

  This CSS rule ensures that images scale with their container while maintaining their aspect ratio.

• Loading Attribute: Use the loading attribute with lazy to defer loading of off-screen images until they are needed. This can improve page load times and performance.