Stop Misusing <img>: When to Use <figure> and <picture> for Better Performance and Accessibility

Images aren’t just visual decorations — they’re essential for communication, usability, and engagement on the web. But using the right HTML tag makes a huge difference in accessibility, SEO, and performance.

Developers often use <img> for everything, but HTML actually gives us a trio of elements — <img>, <figure>, and <picture> — each serving a unique purpose.

Let’s explore what each does, when to use them, and how they work together in real-world scenarios.

---

1. <img> — The Core Image Tag

What It Does

The <img> element is the simplest and most direct way to display an image on a webpage. It’s used when the image is purely visual content and doesn’t need extra context, captions, or dynamic behavior.

<img src="cat.jpg" alt="A cute cat relaxing on the couch">

When to Use

• You’re showing a standalone image within content (like a thumbnail, logo, or product image).
• The image isn’t complex enough to need captions or responsive logic.
• You want quick, lightweight embedding for images.

Why It Matters

The <img> tag integrates tightly with accessibility tools and search engines. Screen readers depend on the alt attribute to describe the image, while search engines use it to understand context for image indexing.

✅ Best Practices

1. Always use alt text — describe what the image means, not just what it shows:

   <img src="team-photo.jpg" alt="Our development team at the 2024 Hackathon">

1. Add lazy loading to defer offscreen images:

   <img src="product.jpg" alt="Product image" loading="lazy">

1. Use descriptive filenames (office-interior.webp instead of IMG_001.webp) to improve SEO.
2. Choose modern formats like WebP or AVIF for better compression and smaller file sizes.

🚫 Avoid

• Using <img> for decorative icons — use CSS background images or inline SVGs instead.
• Adding images without alt, as it harms accessibility and SEO.

---

2. <figure> — Semantic Grouping for Images & Captions

What It Does

The <figure> tag wraps media — like an image, chart, or video — along with an optional <figcaption>.
It gives semantic meaning to the visual content and its caption, treating them as one unit.

<figure>
  <img src="cat.jpg" alt="A cat lounging on a windowsill">
  <figcaption>Cats love sunny spots and cozy corners.</figcaption>
</figure>

When to Use

• You want to add a caption or explanation to an image.
• The image conveys data, insight, or documentation value (not just decoration).
• You’re writing blogs, documentation, case studies, or scientific content.

💡 Real-World Example

In technical blogs or dashboards, you might show a chart or visual data:

<figure>
  <img src="revenue-growth.png" alt="Bar chart showing revenue growth by quarter">
  <figcaption>Figure 1: Q4 2024 revenue grew 35% year-over-year.</figcaption>
</figure>

This gives the image a label and context, improving both comprehension and SEO.

Why It Matters

• The <figure> and <figcaption> pairing enhances semantic meaning.
• Screen readers automatically associate captions with images.
• It improves accessibility and content structure, especially for academic or data-driven sites.

✅ Best Practices

1. Use <figcaption> only for captions — not for unrelated descriptions.
2. A <figure> can contain multiple elements, like an image and a chart legend.
3. You can even use <figure> for videos or code snippets:

   <figure>
     <video controls src="demo.mp4"></video>
     <figcaption>Figure 2: Product demo in action.</figcaption>
   </figure>

---

3. <picture> — Responsive and Art-Direction Images

What It Does

The <picture> element lets you define multiple image sources for different conditions — like screen size, resolution, or format support.
It gives you fine-grained control over what image loads and when, without relying solely on CSS.

<picture>
  <source srcset="cat.avif" type="image/avif">
  <source srcset="cat.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="cat-large.jpg">
  <img src="cat-small.jpg" alt="A playful cat sitting on a sofa">
</picture>

When to Use

• You need different image sizes for desktop and mobile.
• You want to serve modern formats (like AVIF or WebP) with fallbacks.
• You’re optimizing hero images, banners, or large visuals.

💡 Real-World Example: Art Direction

<picture>
  <source media="(max-width: 600px)" srcset="banner-mobile.jpg">
  <source media="(min-width: 601px)" srcset="banner-desktop.jpg">
  <img src="banner-default.jpg" alt="Mountain view with sunset sky">
</picture>

This way, mobile users get a cropped, lighter image, while desktop users get the full scenic version — reducing load time and improving visual quality.

Why It Matters

• Greatly improves performance and bandwidth efficiency.
• Helps maintain visual storytelling across devices (“art direction”).
• Allows format fallbacks — older browsers can still load JPEGs when newer ones prefer WebP or AVIF.

✅ Best Practices

1. Always include a fallback <img> for browsers that don’t support <picture>.
2. Optimize each source file — don’t just resize; re-crop for context.
3. Test across devices — ensure that the image still aligns with layout and typography.

---

🧠 Summary: Choosing the Right Tag

Tag	Purpose	Use When	Example
<img>	Display a basic image	Simple visuals like logos, product images, blog graphics	<img src="logo.webp" alt="Company logo">
<figure>	Add semantic meaning and captions	Illustrations, charts, code samples, photos with captions	<figure><img><figcaption></figcaption></figure>
<picture>	Serve responsive or alternate images	Hero banners, adaptive layouts, performance-focused sites	<picture><source><img></picture>

---

Combining <picture> and <figure>

For the best of both worlds — responsive design + semantic meaning — combine them:

<figure>
  <picture>
    <source srcset="cat.webp" type="image/webp">
    <source srcset="cat.jpg" type="image/jpeg">
    <img src="cat.jpg" alt="A cat curled up in a blanket">
  </picture>
  <figcaption>Figure 3: Lazy mornings — optimized for both users and browsers.</figcaption>
</figure>

This combination ensures your content is responsive, accessible, and semantically rich.

---

Final Thoughts

HTML gives us more than one way to include images — because not all images are created equal.

• Use <img> for simple content images.
• Use <figure> when you need captions or contextual meaning.
• Use <picture> when performance and responsiveness matter most.

Together, they form a foundation for accessible, performant, and semantically meaningful web content — something every modern frontend developer should master.