HtmlHow-ToBeginner · 4 min read

How to Use Picture Element in HTML for Responsive Images

Use the <picture> element to provide multiple image sources for different screen sizes or formats. Inside it, use one or more <source> tags with media queries or type attributes, followed by an <img> tag as a fallback.

📐

Syntax

The <picture> element contains multiple <source> elements and one <img> element. Each <source> specifies a different image file and conditions like screen width or image format. The browser picks the first matching <source>. The <img> acts as a fallback if none match.

html

<picture>
  <source srcset="image-large.webp" type="image/webp" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="Description">
</picture>

💻

Example

This example shows how to use the <picture> element to serve a WebP image on large screens and a JPEG on smaller screens. The <img> tag provides a fallback image for browsers that don't support the <picture> element.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Picture Element Example</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <picture>
    <source srcset="https://via.placeholder.com/800x400.webp" type="image/webp" media="(min-width: 600px)">
    <source srcset="https://via.placeholder.com/400x200.jpg" media="(max-width: 599px)">
    <img src="https://via.placeholder.com/600x300.jpg" alt="Sample responsive image">
  </picture>
</body>
</html>

Output

A responsive image that shows a large WebP image on screens wider than 600px and a smaller JPEG image on narrower screens. If the browser does not support WebP or the picture element, it shows the fallback JPEG image.

⚠️

Common Pitfalls

Not including a fallback <img> tag inside <picture> causes no image to show in unsupported browsers.
Using incorrect media queries or missing the media attribute can cause unexpected image selection.
Forgetting the alt attribute on the <img> tag harms accessibility.
Placing <source> tags in the wrong order can cause the browser to pick the wrong image.

html

<!-- Wrong: Missing fallback img -->
<picture>
  <source srcset="image.webp" type="image/webp">
</picture>

<!-- Right: Include fallback img -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

📊

Quick Reference

Element/Attribute	Purpose
	Container for multiple image sources
	Defines an image source with optional media and type conditions
srcset	Specifies the image file URL(s)
media	Defines when this source applies (e.g., screen width)
type	Specifies the image format (e.g., image/webp)
	Fallback image and accessibility alt text

✅

Key Takeaways

Use

Always include a fallback tag with an alt attribute for accessibility and browser support.

Order tags from most specific to least specific conditions.

Use media queries in tags to control when each image is used.

Test your images in different browsers to ensure correct display and fallback behavior.