HTML Images

Images make web pages visual and engaging. The <img> element embeds images, and understanding image formats, sizing, optimization, and accessibility is crucial for modern web development.

The Image Element

The <img> element embeds an image. It's a void element (no closing tag) with two required attributes: src (source URL) and alt (alternative text). The src specifies where the image file is located, and alt provides text description for accessibility and SEO.

Alternative text is critical. Screen readers read it to visually impaired users, search engines use it to understand image content, and it displays if the image fails to load. Write descriptive alt text that conveys the image's purpose and content.

For decorative images that don't add information (borders, spacers, pure decoration), use empty alt text (alt="") so screen readers skip them. Never omit the alt attribute entirely—it's required for valid HTML.

<!-- Basic image with alt text -->
<img src="photo.jpg" alt="Sunset over mountain lake">

<!-- Image with descriptive alt text -->
<img src="chart.png" alt="Bar chart showing 50% increase in sales from 2024 to 2025">

<!-- Decorative image (empty alt) -->
<img src="border-decoration.png" alt="">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

Image Formats

JPEG is best for photographs and images with many colors. It uses lossy compression, creating small files at the cost of some quality. Adjust quality settings to balance file size and visual fidelity.

PNG supports transparency and uses lossless compression. Use PNG for logos, icons, screenshots, and images requiring transparency. PNG-24 supports millions of colors; PNG-8 supports 256 colors with smaller file sizes.

WebP is a modern format offering better compression than JPEG and PNG, with transparency support. It's now widely supported. SVG is vector-based, perfect for logos and icons—it scales infinitely without loss of quality.

GIF supports animation but has limited colors (256). Use video formats like MP4 for better animated content. Avoid GIF for photos—JPEG or WebP are much more efficient.

<!-- JPEG for photos -->
<img src="photograph.jpg" alt="Beach sunset" width="800" height="600">

<!-- PNG for graphics with transparency -->
<img src="logo.png" alt="Company Logo">

<!-- WebP for better compression -->
<img src="photo.webp" alt="Product photo">

<!-- SVG for scalable graphics -->
<img src="icon.svg" alt="Settings icon" width="24" height="24">

<!-- Multiple formats with picture element -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Fallback image">
</picture>

Responsive Images

The srcset attribute provides multiple image sources at different resolutions. Browsers choose the appropriate image based on screen density and viewport size, delivering optimal images to each device.

Use the sizes attribute with srcset to tell browsers the display size of the image at different viewport widths. This helps browsers choose the right image file before CSS is loaded.

The picture element offers more control than srcset. Use it for art direction (different images at different breakpoints), format switching (WebP with fallback), or when you need complete control over which image loads.

<!-- Simple responsive image (pixel density) -->
<img 
  src="photo.jpg"
  srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
  alt="Product photo">

<!-- Responsive image with sizes -->
<img 
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         33vw"
  alt="Responsive image">

<!-- Picture element for art direction -->
<picture>
  <!-- Mobile: portrait crop -->
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  
  <!-- Tablet: square crop -->
  <source media="(max-width: 1000px)" srcset="tablet.jpg">
  
  <!-- Desktop: landscape crop -->
  <source media="(min-width: 1001px)" srcset="desktop.jpg">
  
  <!-- Fallback -->
  <img src="desktop.jpg" alt="Adaptive image">
</picture>

Image Loading and Performance

The loading attribute controls when images load. loading='lazy' defers loading until the image is near the viewport, improving initial page load. loading='eager' (default) loads immediately. Use lazy loading for images below the fold.

The width and height attributes reserve space for the image, preventing layout shift as images load. Always specify dimensions to improve Cumulative Layout Shift (CLS), a core web vital.

The decoding attribute hints at image decoding priority. decoding='async' allows async decoding (non-blocking), while decoding='sync' forces synchronous decoding. Most images should use async.

<!-- Lazy loading for images below fold -->
<img 
  src="below-fold.jpg" 
  alt="Content below the fold"
  loading="lazy"
  width="800"
  height="600">

<!-- Eager loading for above-fold images -->
<img 
  src="hero.jpg" 
  alt="Hero image"
  loading="eager"
  width="1920"
  height="1080">

<!-- Async decoding -->
<img 
  src="photo.jpg" 
  alt="Photo"
  decoding="async"
  width="800"
  height="600">

<!-- Reserve space to prevent layout shift -->
<img 
  src="product.jpg" 
  alt="Product"
  width="400" 
  height="300"
  loading="lazy">

Figure and Figcaption

The <figure> element represents self-contained content like images, diagrams, code snippets, or illustrations. Use it with <figcaption> to provide a caption. This semantic pairing improves accessibility and SEO.

Figcaption provides a caption for the figure. It can appear before or after the figure's content. Use it for photo credits, diagram labels, or explanatory text.

Figures can contain multiple images, videos, code blocks, or any self-contained content. The caption describes the figure as a whole.

<!-- Image with caption -->
<figure>
  <img src="chart.png" alt="Sales growth bar chart" width="600" height="400">
  <figcaption>Figure 1: Sales growth from 2023 to 2025</figcaption>
</figure>

<!-- Multiple images in one figure -->
<figure>
  <img src="before.jpg" alt="Before renovation" width="300" height="200">
  <img src="after.jpg" alt="After renovation" width="300" height="200">
  <figcaption>Kitchen renovation: before and after</figcaption>
</figure>

<!-- Figure with photo credit -->
<figure>
  <img src="landscape.jpg" alt="Mountain landscape at sunset" width="800" height="600">
  <figcaption>
    Mountain sunset in Colorado.
    <small>Photo by John Doe</small>
  </figcaption>
</figure>

Image Accessibility Best Practices

  • Always include meaningful alt text for informative images
  • Use empty alt (alt="") for purely decorative images
  • Don't start alt text with 'Image of' or 'Picture of'—it's redundant
  • Describe the content and function, not just the visual appearance
  • For complex images (charts, diagrams), provide detailed descriptions
  • Specify width and height to prevent layout shift
  • Use lazy loading for images below the fold
  • Optimize file sizes—compress images appropriately
  • Provide multiple formats with picture element when appropriate
  • Test with screen readers to ensure alt text is helpful