HTML Image Element (<img>):

The HTML <img> (image) element is used to embed images within a web page. Images are crucial for enhancing visual appeal and conveying information. Here's a detailed guide on the HTML image element:

  1. Basic Syntax:
    • The <img> element is a self-closing tag that includes the src attribute specifying the source (URL) of the image.
    <img src="image.jpg" alt="Description of the image">
    Output:
    Example Image
  2. Source (src) Attribute:
    • The src attribute contains the URL or file path of the image. It can be a relative or absolute path.
  3. Alternative Text (alt) Attribute:
    • The alt attribute provides alternative text for the image. It is displayed if the image cannot be loaded and is crucial for accessibility.
  4. Width and Height Attributes:
    • The width and height attributes can be used to specify the dimensions of the image. This helps browsers allocate space before the image is fully loaded.
      <img src="image.jpg" alt="Description" width="300" height="200">
  5. Lazy Loading:
    • The loading="lazy" attribute can be added to enable lazy loading, which defers the loading of offscreen images until they are about to be displayed.
      • <img src="image.jpg" alt="Description" loading="lazy">


Example: 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>HTML Image Example</title>
</head>
<body>
   <h1>Welcome to My Website</h1>
    
    <p>This is an example of using the  image element in HTML.</p>

    <img src="example.jpg" alt="Example Image">

   <img src="lazy-load.jpg" alt="Lazy Loaded Image" loading="lazy">
</body>
</html>
Output:

Welcome to My Website

This is an example of using the image element in HTML.

Example Image Lazy Loaded Image