<img>

Draft

Definition

The <img> HTML element represents an image in an HTML document. It’s used to embed images, graphics, icons, and other visual content into web pages. The <img> element is a self-closing tag that supports various attributes for controlling image display, accessibility, and behavior. Images can be sourced from local files, external URLs, or generated dynamically.

Syntax

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

Attributes

Essential Attributes

<img src="image.jpg" <!-- Source URL or path to the image -- />
alt="Description"
<!-- Alternative text for accessibility -->
width="300"
<!-- Image width in pixels or percentage -->
height="200"
<!-- Image height in pixels or percentage -->
loading="lazy"
<!-- Loading behavior (lazy, eager, auto) -->
decoding="async"
<!-- Decoding behavior (sync, async, auto) -->
crossorigin="anonymous"
<!-- CORS policy for cross-origin images -->
referrerpolicy="no-referrer">
<!-- Referrer policy -->

Accessibility Attributes

<img alt="Detailed description" <!-- Descriptive alternative text -- />
title="Image title"
<!-- Tooltip text -->
aria-label="Label"
<!-- ARIA label for screen readers -->
aria-describedby="desc"
<!-- Reference to description element -->
role="img">
<!-- ARIA role -->

Examples

Basic Image Usage

HTML

Basic Image Usage:

Simple Image:

A blue placeholder image with white text

Image with Dimensions:

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic Image Usage:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Simple Image:</h4>
      <img src="https://via.placeholder.com/300x200/3B82F6/FFFFFF?text=Sample+Image"
           alt="A blue placeholder image with white text"
           class="border rounded">
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Image with Dimensions:</h4>
      <img src="https://via.placeholder.com/400x150/10B981/FFFFFF?text=Wide+Image"
           alt="A green wide placeholder image"
           width="400" height="150"
           class="border rounded">
    </div>

  </div>
</div>

Responsive Images

HTML

Responsive Images:

Responsive Image:

Image with Breakpoints:

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Responsive Images:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Responsive Image:</h4>
      <img src="https://via.placeholder.com/800x400/8B5CF6/FFFFFF?text=Responsive+Image"
           alt="A purple responsive placeholder image"
           class="w-full h-auto max-w-md mx-auto border rounded shadow-sm">
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Image with Breakpoints:</h4>
      <img src="https://via.placeholder.com/600x300/EF4444/FFFFFF?text=Breakpoint+Image"
           alt="A red breakpoint placeholder image"
           class="w-full md:w-3/4 lg:w-1/2 h-auto border rounded">
    </div>

  </div>
</div>

Image with Captions and Descriptions

HTML

Image with Captions and Descriptions:

A cyan figure placeholder image showing a diagram or illustration — Figure 1: A sample placeholder image demonstrating proper figure usage

Image Title

This is a detailed description of the image content, providing context and information about what the image represents.

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Image with Captions and Descriptions:</h3>

  <div class="space-y-6">
    <figure class="text-center">
      <img src="https://via.placeholder.com/500x300/06B6D4/FFFFFF?text=Figure+Image"
           alt="A cyan figure placeholder image showing a diagram or illustration"
           class="w-full max-w-lg mx-auto border rounded shadow-sm">
      <figcaption class="mt-2 text-sm text-gray-600">
        Figure 1: A sample placeholder image demonstrating proper figure usage
      </figcaption>
    </figure>

    <div class="bg-white p-4 border rounded">
      <img src="https://via.placeholder.com/400x200/F59E0B/FFFFFF?text=Card+Image"
           alt="An amber card placeholder image"
           class="w-full h-48 object-cover rounded mb-3">
      <h4 class="font-semibold text-lg mb-2">Image Title</h4>
      <p class="text-gray-600 text-sm">This is a detailed description of the image content, providing context and information about what the image represents.</p>
    </div>

  </div>
</div>

Image Gallery

HTML

Image Gallery:

Gallery Image 1

Gallery Image 2

Gallery Image 3

Gallery Image 4

Gallery Image 5

Gallery Image 6

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Image Gallery:</h3>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/3B82F6/FFFFFF?text=Gallery+1"
           alt="Blue gallery image 1"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 1</p>
    </div>

    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/10B981/FFFFFF?text=Gallery+2"
           alt="Green gallery image 2"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 2</p>
    </div>

    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/8B5CF6/FFFFFF?text=Gallery+3"
           alt="Purple gallery image 3"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 3</p>
    </div>

    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/EF4444/FFFFFF?text=Gallery+4"
           alt="Red gallery image 4"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 4</p>
    </div>

    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/F59E0B/FFFFFF?text=Gallery+5"
           alt="Amber gallery image 5"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 5</p>
    </div>

    <div class="bg-white p-3 border rounded shadow-sm">
      <img src="https://via.placeholder.com/300x200/06B6D4/FFFFFF?text=Gallery+6"
           alt="Cyan gallery image 6"
           class="w-full h-32 object-cover rounded mb-2">
      <p class="text-sm text-gray-600 text-center">Gallery Image 6</p>
    </div>

  </div>
</div>

Image with Hover Effects

HTML

Image with Hover Effects:

View Details

Image Title

Hover to see description

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Image with Hover Effects:</h3>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="group cursor-pointer">
      <div class="relative overflow-hidden rounded-lg shadow-md">
        <img src="https://via.placeholder.com/400x250/3B82F6/FFFFFF?text=Hover+Image"
             alt="A blue hover effect placeholder image"
             class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-110">
        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300"></div>
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <span class="text-white font-semibold text-lg">View Details</span>
        </div>
      </div>
    </div>

    <div class="group cursor-pointer">
      <div class="relative overflow-hidden rounded-lg shadow-md">
        <img src="https://via.placeholder.com/400x250/10B981/FFFFFF?text=Zoom+Image"
             alt="A green zoom effect placeholder image"
             class="w-full h-48 object-cover transition-all duration-300 group-hover:scale-105 group-hover:brightness-110">
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
          <h4 class="text-white font-semibold">Image Title</h4>
          <p class="text-gray-200 text-sm">Hover to see description</p>
        </div>
      </div>
    </div>

  </div>
</div>

Lazy Loading Images

HTML

Lazy Loading Images:

Lazy Loaded Image:

This image uses lazy loading for better performance

Performance Benefits:

• Images load only when needed
• Faster initial page load
• Reduced bandwidth usage
• Better user experience

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Lazy Loading Images:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Lazy Loaded Image:</h4>
      <img src="https://via.placeholder.com/500x300/8B5CF6/FFFFFF?text=Lazy+Image"
           alt="A purple lazy loading placeholder image"
           loading="lazy"
           class="w-full max-w-md mx-auto border rounded">
      <p class="text-xs text-gray-500 mt-1 text-center">This image uses lazy loading for better performance</p>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="font-semibold mb-2">Performance Benefits:</h4>
      <ul class="text-sm text-gray-600 space-y-1">
        <li>• Images load only when needed</li>
        <li>• Faster initial page load</li>
        <li>• Reduced bandwidth usage</li>
        <li>• Better user experience</li>
      </ul>
    </div>

  </div>
</div>

Image with Fallbacks

HTML

Image with Fallbacks:

Multiple Source Images:

A responsive image that adapts to screen size

Fallback Strategy:

• Large screens: 800x400 image
• Medium screens: 600x300 image
• Small screens: 400x200 image
• Ensures optimal performance and quality

Code

<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Image with Fallbacks:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Multiple Source Images:</h4>
      <picture>
        <source srcset="https://via.placeholder.com/800x400/EF4444/FFFFFF?text=Large+Image" media="(min-width: 768px)">
        <source srcset="https://via.placeholder.com/600x300/F59E0B/FFFFFF?text=Medium+Image" media="(min-width: 480px)">
        <img src="https://via.placeholder.com/400x200/06B6D4/FFFFFF?text=Small+Image"
             alt="A responsive image that adapts to screen size"
             class="w-full border rounded">
      </picture>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="font-semibold mb-2">Fallback Strategy:</h4>
      <ul class="text-sm text-gray-600 space-y-1">
        <li>• Large screens: 800x400 image</li>
        <li>• Medium screens: 600x300 image</li>
        <li>• Small screens: 400x200 image</li>
        <li>• Ensures optimal performance and quality</li>
      </ul>
    </div>

  </div>
</div>

Browser Support

The <img> element is supported in all browsers and has been a standard HTML element since HTML 2.0.

Best Practices

Always use alt text: Provide meaningful alternative text for accessibility
Optimize images: Use appropriate formats (WebP, AVIF) and compress images
Responsive images: Use srcset and sizes for different screen densities
Lazy loading: Implement lazy loading for images below the fold
Performance: Consider using modern image formats and CDNs
Accessibility: Ensure images have proper descriptions and aren’t decorative

Common Use Cases

Content images: Illustrating articles, blog posts, and documentation
Product galleries: Displaying products in e-commerce applications
User avatars: Profile pictures and user identification
Icons and logos: Brand elements and navigation aids
Background images: Visual enhancement of page sections
Data visualization: Charts, graphs, and infographics
Social media: Sharing images across platforms

<picture>: Container for multiple image sources
<figure>: Self-contained content with optional caption
<figcaption>: Caption for figure elements
<source>: Alternative media sources for picture elements
<canvas>: Drawing surface for dynamic graphics
<svg>: Scalable vector graphics
<video>: Video content embedding

Definition

Syntax

Attributes

Essential Attributes

Accessibility Attributes

Examples

Basic Image Usage

Basic Image Usage:

Simple Image:

Image with Dimensions:

Responsive Images

Responsive Images:

Responsive Image:

Image with Breakpoints:

Image with Captions and Descriptions

Image with Captions and Descriptions:

Image Title

Image Gallery

Image Gallery:

Image with Hover Effects

Image with Hover Effects:

Image Title

Lazy Loading Images

Lazy Loading Images:

Lazy Loaded Image:

Performance Benefits:

Image with Fallbacks

Image with Fallbacks:

Multiple Source Images:

Fallback Strategy:

Browser Support

Best Practices

Common Use Cases

Related Elements