<img>

Syntax

<img src="path/to/image.jpg" alt="description">

Examples

<img src="https://via.placeholder.com/400x300" alt="Placeholder image" style="max-width: 100%; height: auto;">

<img src="https://via.placeholder.com/800x600" 
     alt="Responsive landscape" 
     style="width: 100%; max-width: 600px; height: auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">

<figure style="margin: 0; text-align: center;">
  <img src="https://via.placeholder.com/500x300" 
       alt="Sample image with caption" 
       style="width: 100%; max-width: 500px; border-radius: 8px;">
  <figcaption style="margin-top: 10px; color: #666; font-style: italic;">This is a descriptive caption for the image above</figcaption>
</figure>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
  <img src="https://via.placeholder.com/200" alt="Gallery image 1" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
  <img src="https://via.placeholder.com/200/FF6B6B" alt="Gallery image 2" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
  <img src="https://via.placeholder.com/200/4ECDC4" alt="Gallery image 3" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
</div>

Attributes

• src (URL): Path to the image file (required)
• alt (string): Alternative text description (required for accessibility)
• width (number): Image width in pixels
• height (number): Image height in pixels
• loading (lazy | eager): Controls image loading behavior
• srcset (string): Multiple image sources for responsive images

Best practices

• Always include descriptive alt text that explains the image content and purpose
• Use appropriate image formats: JPEG for photos, PNG for graphics with transparency, SVG for icons
• Optimize images for web - compress large files without sacrificing quality
• Set width and height to prevent layout shift during page load
• Use lazy loading (loading="lazy") for images below the fold to improve performance
• Consider using srcset for responsive images that adapt to different screen sizes

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard