HTML <picture> Element

Publish in HTML Tutorial el 25/05/2025 14:53

The HTML <picture> element serves as a container for zero or more <source> elements and one <img> element. Its primary purpose is to provide alternative image resources for different display/device scenarios, enabling responsive images without using CSS or JavaScript.

Key features:

Art direction - show different cropped images for different viewports
Image format selection - serve modern formats to supporting browsers
Resolution switching - serve smaller images to smaller devices
Fallback to standard <img> if no sources match

Basic Syntax

Here's the basic structure of the <picture> element:

Examples

1. Basic Responsive Image

This example shows different images based on viewport width:

Play Code

<picture>
  <source media="(min-width: 1200px)" srcset="https://picsum.photos/1200/600">
  <source media="(min-width: 768px)" srcset="https://picsum.photos/768/384">
  <img src="https://picsum.photos/400/200" alt="Responsive example">
</picture>

2. Modern Image Formats

Serve WebP to supporting browsers, fallback to JPEG:

Play Code

<picture>
  <source type="image/png" srcset="https://samplelib.com/lib/preview/png/sample-boat-400x300.png">
  <img src="https://samplelib.com/lib/preview/jpeg/sample-city-park-400x300.jpg" alt="Modern formats example">
</picture>

3. Density Switching

Serve higher resolution images to high-DPI devices:

Play Code

<picture>
  <source srcset="https://picsum.photos/400/300 2x, https://picsum.photos/800/600 3x">
  <img src="https://picsum.photos/1200/600" alt="Density switching example">
</picture>

4. JavaScript Interaction (Change Image on Click)

This example shows how to change the picture source using JavaScript:

Play Code

<picture id="interactive-pic">
  <source id="pic-source" srcset="https://picsum.photos/400/200">
  <img src="https://picsum.photos/400/200" alt="Interactive example">
</picture>
<button onclick="changePicture()">Change Image</button>

<script>
function changePicture() {
  const randomId = Math.floor(Math.random() * 1000);
  document.getElementById('pic-source').srcset = 
    `https://picsum.photos/id/${randomId}/400/200`;
  document.querySelector('#interactive-pic img').src = 
    `https://picsum.photos/id/${randomId}/400/200`;
}
</script>

5. JavaScript Art Direction (Change Based on Screen Size)

Dynamically update image sources when window is resized:

Play Code

<picture id="responsive-pic">
  <source id="wide-source" media="(min-width: 1000px)">
  <source id="medium-source" media="(min-width: 600px)">
  <img id="fallback-im" src="https://picsum.photos/1200/600" alt="Dynamic art direction">
</picture>

<script>
function updatePictureSources() {
  const wide = document.getElementById('wide-source');
  const medium = document.getElementById('medium-source');
  const img = document.getElementById('fallback-img');
  
  const randomId = Math.floor(Math.random() * 1000);
  
  wide.srcset = `https://picsum.photos/id/${randomId}/1000/500`;
  medium.srcset = `https://picsum.photos/id/${randomId}/600/300`;
  img.src = `https://picsum.photos/id/${randomId}/400/200`;
}

// Initial load
updatePictureSources();

// Update on resize
window.addEventListener('resize', updatePictureSources);
</script>

Tips and Tricks

Always include the <img> tag as the last child - it serves as the fallback
Order matters - browsers use the first matching <source>
Combine media and type - you can use both attributes on a single <source>
Use descriptive alt text - important for accessibility and SEO
Consider using sizes attribute with srcset for better control

Browser Support

The <picture> element is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2015. For older browsers, the <img> fallback ensures your content remains accessible.