How to Add Images in HTML

<!DOCTYPE html>
<html>
<head>
  <title>Images Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    img { max-width: 100%; height: auto; }
    .responsive { width: 100%; height: auto; }
    .thumbnail { width: 150px; height: 150px; object-fit: cover; }
    figure { margin: 20px 0; }
    figcaption { font-style: italic; color: #666; margin-top: 8px; }
  </style>
</head>
<body>
  <h1>HTML Images</h1>
  
  <h2>Basic Image</h2>
  <img src="https://via.placeholder.com/400x200" alt="Placeholder image">
  
  <h2>Image with Dimensions</h2>
  <img src="https://via.placeholder.com/300x200" alt="Sized image" width="300" height="200">
  
  <h2>Image with Title</h2>
  <img src="https://via.placeholder.com/400x200" alt="Image" title="Hover text">
  
  <h2>Responsive Image</h2>
  <img src="https://via.placeholder.com/800x400" alt="Responsive" class="responsive">
  
  <h2>Thumbnail with Object-fit</h2>
  <img src="https://via.placeholder.com/400x400" alt="Thumbnail" class="thumbnail">
  
  <h2>Image with Caption</h2>
  <figure>
    <img src="https://via.placeholder.com/400x300" alt="Figure image">
    <figcaption>This is an image caption using figure and figcaption tags.</figcaption>
  </figure>
  
  <h2>Image as Link</h2>
  <a href="https://example.com">
    <img src="https://via.placeholder.com/200x100" alt="Clickable image">
  </a>
  
  <h2>Image Map (Clickable Regions)</h2>
  <img src="https://via.placeholder.com/400x200" alt="Image map" usemap="#map">
  <map name="map">
    <area shape="rect" coords="0,0,200,200" href="#section1" alt="Left side">
    <area shape="circle" coords="300,100,50" href="#section2" alt="Circle">
  </map>
  
  <h2>Lazily Loaded Image</h2>
  <img src="https://via.placeholder.com/400x200" alt="Lazy loaded" loading="lazy">
  
  <h2>Picture Element (Responsive Images)</h2>
  <picture>
    <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x400">
    <source media="(min-width: 400px)" srcset="https://via.placeholder.com/400x200">
    <img src="https://via.placeholder.com/200x100" alt="Responsive picture">
  </picture>
  
  <h2>Best Practices</h2>
  <ul>
    <li>Always include alt attribute for accessibility</li>
    <li>Use appropriate image formats (JPG for photos, PNG for graphics, SVG for icons)</li>
    <li>Optimize images for web (compress, resize)</li>
    <li>Use lazy loading for images below the fold</li>
    <li>Provide multiple sizes for responsive design</li>
  </ul>
</body>
</html>