HTML Images Guide

Master image display with multiple examples and techniques

⏱️ Reading time: 0 min•Last updated: 10/7/2025

HTML Image Gallery Guide

This comprehensive guide covers all aspects of working with images in HTML, from basic embedding to advanced responsive techniques and optimization.

Create beautiful, responsive image galleries
Implement modern loading techniques
Optimize for performance and accessibility
Apply visual effects and enhancements

Basic Image Gallery

Display multiple images in a responsive grid

<!-- Image gallery with multiple images -->
<div class="gallery">
  <img src="/images/html/ABeautifulLandscape.png" alt="Beautiful landscape">
  <img src="/images/html/APortraitImage.png" alt="Portrait photo">
  <img src="/images/html/ProductShot.png" alt="Product shot">
  <img src="/images/html/AbstractArt.png" alt="Abstract art">
</div><!-- Image gallery with multiple images -->
<div class="gallery">
  <img src="/images/html/ABeautifulLandscape.png" alt="Beautiful landscape">
  <img src="/images/html/APortraitImage.png" alt="Portrait photo">
  <img src="/images/html/ProductShot.png" alt="Product shot">
  <img src="/images/html/AbstractArt.png" alt="Abstract art">
</div>

Usage: Use CSS Grid to create responsive image layouts

Live Preview

Image with Captions

Add descriptive captions to your images

<!-- Image with caption -->
<figure>
  <img src="/images/html/ABeautifulLandscape.png" alt="Scenic mountain view">
  <figcaption>A beautiful mountain landscape at sunset</figcaption>
</figure>

<!-- Multiple images with captions -->
<div class="image-grid">
  <figure>
    <img src="/images/html/APortraitImage.png" alt="Professional portrait">
    <figcaption>Professional headshot</figcaption>
  </figure>
  <figure>
    <img src="/images/html/ProductShot.png" alt="Product display">
    <figcaption>Our featured product</figcaption>
  </figure>
</div><!-- Image with caption -->
<figure>
  <img src="/images/html/ABeautifulLandscape.png" alt="Scenic mountain view">
  <figcaption>A beautiful mountain landscape at sunset</figcaption>
</figure>

<!-- Multiple images with captions -->
<div class="image-grid">
  <figure>
    <img src="/images/html/APortraitImage.png" alt="Professional portrait">
    <figcaption>Professional headshot</figcaption>
  </figure>
  <figure>
    <img src="/images/html/ProductShot.png" alt="Product display">
    <figcaption>Our featured product</figcaption>
  </figure>
</div>

Usage: Use <figure> and <figcaption> for semantic image captions

Live Preview

Scenic mountain view — A beautiful mountain landscape at sunset

Professional portrait — Professional headshot

Responsive Images with srcset

Serve different resolution images based on viewport width

Automatic image selectionBandwidth optimizationRetina display support

<!-- Responsive image with srcset -->
<div class="responsive-example">
  <img 
    src="/images/html/SmallImage.png"
    srcset="
      /images/html/SmallImage.png 480w,
      /images/html/MediumImage.png 768w,
      /images/html/LargeImage.png 1200w
    "
    sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
    alt="Responsive landscape image"
    class="responsive-image"
  >
</div><!-- Responsive image with srcset -->
<div class="responsive-example">
  <img 
    src="/images/html/SmallImage.png"
    srcset="
      /images/html/SmallImage.png 480w,
      /images/html/MediumImage.png 768w,
      /images/html/LargeImage.png 1200w
    "
    sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
    alt="Responsive landscape image"
    class="responsive-image"
  >
</div>

Usage: Browser selects best image based on viewport and device resolution

Live Preview

Art Direction with Picture Element

Serve completely different images at different breakpoints

Different crops/compositionsMobile-first approachFallback support

<!-- Art direction with picture element -->
<div class="art-direction-example">
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/html/DesktopVersion.png">
    <source media="(min-width: 768px)" srcset="/images/html/MediumImage.png">
    <source media="(max-width: 767px)" srcset="/images/html/MobileVersion.png">
    <img src="/images/html/ABeautifulLandscape.png" alt="Art directed image" class="responsive-image">
  </picture>
</div><!-- Art direction with picture element -->
<div class="art-direction-example">
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/html/DesktopVersion.png">
    <source media="(min-width: 768px)" srcset="/images/html/MediumImage.png">
    <source media="(max-width: 767px)" srcset="/images/html/MobileVersion.png">
    <img src="/images/html/ABeautifulLandscape.png" alt="Art directed image" class="responsive-image">
  </picture>
</div>

Usage: Use for images that need different crops at different viewports

Live Preview

Lazy Loading

Defer offscreen images to improve performance

<!-- Lazy loaded image gallery -->
<div class="lazy-gallery">
  <img 
    src="/images/html/SmallImage.png" 
    data-src="/images/html/ABeautifulLandscape.png" 
    alt="Lazy loaded landscape"
    loading="lazy"
    class="lazy"
  >
  <img 
    src="/images/html/SmallImage.png" 
    data-src="/images/html/APortraitImage.png" 
    alt="Lazy loaded portrait"
    loading="lazy"
    class="lazy"
  >
</div><!-- Lazy loaded image gallery -->
<div class="lazy-gallery">
  <img 
    src="/images/html/SmallImage.png" 
    data-src="/images/html/ABeautifulLandscape.png" 
    alt="Lazy loaded landscape"
    loading="lazy"
    class="lazy"
  >
  <img 
    src="/images/html/SmallImage.png" 
    data-src="/images/html/APortraitImage.png" 
    alt="Lazy loaded portrait"
    loading="lazy"
    class="lazy"
  >
</div>

Why this matters: Lazy loading improves page load performance significantly by only loading images when they enter the viewport

Live Preview

Image Maps

Create clickable regions on an image

<!-- Image with clickable areas -->
<div class="image-map-container">
  <img src="/images/html/AbstractArt.png" alt="Abstract art" usemap="#abstractmap">
  
  <map name="abstractmap">
    <area shape="rect" coords="0,0,200,200" href="#section1" alt="Top left section">
    <area shape="circle" coords="300,300,100" href="#section2" alt="Center circle">
    <area shape="poly" coords="400,50,450,150,400,250,350,150" href="#section3" alt="Diamond shape">
  </map>
</div><!-- Image with clickable areas -->
<div class="image-map-container">
  <img src="/images/html/AbstractArt.png" alt="Abstract art" usemap="#abstractmap">
  
  <map name="abstractmap">
    <area shape="rect" coords="0,0,200,200" href="#section1" alt="Top left section">
    <area shape="circle" coords="300,300,100" href="#section2" alt="Center circle">
    <area shape="poly" coords="400,50,450,150,400,250,350,150" href="#section3" alt="Diamond shape">
  </map>
</div>

Use Case: Useful for diagrams, interactive infographics, and complex image navigation

Live Preview

CSS Image Effects

Apply visual effects to images with CSS

<!-- Image for effects -->
<div class="image-effects">
  <img src="/images/html/ABeautifulLandscape.png" alt="Landscape with effects">
</div><!-- Image for effects -->
<div class="image-effects">
  <img src="/images/html/ABeautifulLandscape.png" alt="Landscape with effects">
</div>

Use Case: Enhance visual appeal with hover effects and transitions

Live Preview

Image Playground

Experiment with different image techniques in our live editor

Multiple Image Examples

Try different gallery layouts and responsive techniques

Live Preview

Basic Gallery

Responsive Gallery

< Previous Next >

HTML Images Guide

HTML Image Gallery Guide

Image Basics & Galleries

Basic Image Gallery

Live Preview

Image with Captions

Live Preview

Responsive Image Techniques

Responsive Images with srcset

Live Preview

Art Direction with Picture Element

Live Preview

Image Optimization

Lazy Loading

Live Preview

Advanced Image Techniques

Image Maps

Live Preview

CSS Image Effects

Live Preview

Image Playground

Multiple Image Examples

Basic Gallery

Responsive Gallery