Images are essential for visual communication on the web — logos, product photos, diagrams, and hero banners all rely on the HTML <img> element and related techniques.

The <img> Tag

The <img> tag embeds an image. It is a void element — no closing tag.

  <img src="images/photo.jpg" alt="A sunset over the ocean" width="600" height="400">
Attribute Required Purpose
src Yes Path or URL to the image file
alt Yes (accessibility) Text description when image cannot be displayed
width / height Recommended Reserve space to prevent layout shift
loading Optional lazy defers off-screen images
title Optional Tooltip on hover

Relative vs Absolute Paths 

  <!-- Relative — same folder -->
<img src="logo.png" alt="Company logo">

<!-- Relative — subfolder -->
<img src="images/hero.webp" alt="Hero banner">

<!-- Absolute URL -->
<img src="https://cdn.example.com/assets/banner.jpg" alt="Promotional banner">

See Absolute and Relative Paths for path rules in detail.

Complete Page Example 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
    }
    .gallery img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>Photo Gallery</h1>
  <div class="gallery">
    <img src="images/photo1.jpg" alt="Mountain landscape at dawn" loading="lazy">
    <img src="images/photo2.jpg" alt="City skyline at night" loading="lazy">
    <img src="images/photo3.jpg" alt="Forest trail in autumn" loading="lazy">
  </div>
</body>
</html>

Responsive Images with srcset

Serve different image sizes for different screen widths — faster loading on mobile:

  <img
  src="images/photo-800.jpg"
  srcset="images/photo-400.jpg 400w,
          images/photo-800.jpg 800w,
          images/photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Product photo"
  width="800"
  height="600"
>

The browser picks the best source based on viewport width and device pixel ratio.

The <picture> Element

Art direction — different crops or formats for different breakpoints:

  <picture>
  <source media="(min-width: 768px)" srcset="images/hero-wide.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="images/hero-wide.jpg">
  <source srcset="images/hero-mobile.webp" type="image/webp">
  <img src="images/hero-mobile.jpg" alt="Team collaborating in office" width="800" height="450">
</picture>

Image Formats

Format Best For
JPEG Photographs, complex colors
PNG Logos, transparency, screenshots
WebP Modern browsers — smaller files, transparency
SVG Icons, logos, scalable graphics
GIF Simple animations (prefer video for long clips)

Inline SVG (no separate file):

  <svg width="48" height="48" viewBox="0 0 24 24" aria-label="Home">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
</svg>

Accessibility Best Practices

  • Always set meaningful alt text — describe the image content, not “image” or “photo1”
  • Decorative images — use empty alt: alt=""
  • Complex images (charts, diagrams) — provide a longer description nearby or use aria-describedby
  • Do not embed text in images — use real HTML text when possible
  <!-- Informative -->
<img src="chart.png" alt="Sales increased 40% from Q1 to Q2 2024">

<!-- Decorative -->
<img src="divider.png" alt="" role="presentation">

<!-- Linked image — alt describes the link destination -->
<a href="/products">
  <img src="catalog.jpg" alt="Browse our product catalog">
</a>

Performance Optimization

  1. Compress images — use tools like Squoosh, ImageOptim, or cwebp
  2. Use modern formats — WebP/AVIF with JPEG fallback via <picture>
  3. Specify dimensions — prevents Cumulative Layout Shift (CLS)
  4. Lazy load — loading="lazy" for below-the-fold images
  5. CDN — serve images from a content delivery network close to users
  <img
  src="product.webp"
  alt="Wireless headphones"
  width="400"
  height="400"
  loading="lazy"
  decoding="async"
>

Figure and Caption

Semantic grouping with <figure> and <figcaption>:

  <figure>
  <img src="images/architecture.png" alt="Three-tier web application diagram" width="700" height="400">
  <figcaption>Figure 1: Browser, application server, and database layers.</figcaption>
</figure>

Common Mistakes

Mistake Fix
Missing alt Add descriptive alt text
Huge uncompressed PNGs Compress and use WebP
Stretching small images Use adequately sized source files
Hotlinking external images Host assets on your own CDN
Blocking layout Set width and height attributes

Next Steps

Learn how paths work in Absolute and Relative Paths, link images in navigation with Anchor Links, and optimize delivery in the CSS and performance sections of this track.