When building modern websites, you often need to display images that look good on different screen sizes and devices. That’s where the <picture> tag comes in.
The <picture> tag allows you to show different images based on screen size, resolution, or device type. It helps improve performance and makes your website more responsive.
This guide explains everything in a simple, clear, and evergreen way.
What is the <picture> Tag?
The <picture> tag is used to define multiple versions of an image so the browser can choose the best one to display.
It works together with:
<source>→ defines image options<img>→ fallback image
Simple meaning:
The <picture> tag = responsive image container
What is the <picture> Tag?
The <picture> tag is used to define multiple versions of an image so the browser can choose the best one to display.
It works together with:
<source>→ defines image options<img>→ fallback image
Simple meaning:
The <picture> tag = responsive image container
Why the <picture> Tag is Important
Different users visit your site on:
- Mobile phones
- Tablets
- Laptops
- Large screens
Using one large image for all devices can:
- Slow down your website
- Waste data
- Look bad on small screens
The <picture> tag solves this by serving the right image for each situation.
Basic Syntax
Here is the basic structure:
<picture>
<source srcset=”small.jpg” media=”(max-width: 600px)”>
<source srcset=”medium.jpg” media=”(max-width: 1024px)”>
<img src=”large.jpg” alt=”Example Image”>
</picture>
How the <picture> Tag Works
The browser checks each <source> from top to bottom:
- It looks at the
mediacondition - If it matches → it loads that image
- If none match → it uses the
<img>fallback
Understanding Each Part
1. <picture>
This is the container that wraps everything.
2. <source>
Defines image options.
<source srcset="small.jpg" media="(max-width: 600px)">
3. <img>
Fallback image if no condition matches.
<img src="large.jpg" alt="Example">
The media Attribute
The media attribute defines conditions.
Example:
Meaning:
- If screen width is 600px or less → use mobile image
The srcset Attribute
srcset defines the image file.
<source srcset="tablet.jpg">
You can also provide multiple resolutions:
<source srcset="image-1x.jpg 1x, image-2x.jpg 2x">
Responsive Design with <picture>
The <picture> tag is perfect for responsive design.
Example:
<picture>
<source media=”(max-width: 600px)” srcset=”mobile.jpg”>
<source media=”(max-width: 1024px)” srcset=”tablet.jpg”>
<img src=”desktop.jpg” alt=”Responsive Image”>
</picture>
Art Direction with <picture>
Sometimes you don’t just want to resize an image—you want to show different images.
Example:
<picture>
<source media=”(max-width: 600px)” srcset=”crop-small.jpg”>
<source media=”(min-width: 601px)” srcset=”wide.jpg”>
<img src=”default.jpg” alt=”Art direction example”>
</picture>
<picture> vs <img>
| Feature | <picture> | <img> |
|---|---|---|
| Multiple images | ✔ | ✘ |
| Responsive control | ✔ | Limited |
| Simple usage | ✘ | ✔ |
<picture> vs srcset in <img>
You can also use srcset inside <img>:
<img src="image.jpg" srcset="image-2x.jpg 2x" alt="Example">
Difference:
<img srcset>→ resolution switching<picture>→ full control (media + art direction)
Real-Life Use Cases
1. Mobile Optimization
Serve smaller images to mobile users.
2. Performance Improvement
Reduce load time by using optimized images.
3. Different Image Crops
Show cropped images for smaller screens.
4. High-Resolution Displays
Provide sharper images for retina screens.
Advanced Example
<!DOCTYPE html>
<html>
<head>
<title>Picture Tag Example</title>
</head>
<body>
<h2>Responsive Image Example</h2>
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="Beautiful landscape">
</picture>
</body>
</html>
Accessibility Tips
- Always include
alttext in<img> - Keep descriptions meaningful
- Ensure images support your content
Common Mistakes to Avoid
1. Forgetting <img>
❌ Wrong:
<picture>
<source srcset="image.jpg">
</picture>
✔ Correct:
<picture>
<source srcset="image.jpg">
<img src="fallback.jpg" alt="Example">
</picture>
2. Wrong Media Queries
Make sure your conditions are correct.
3. Large Image Sizes
Always optimize images before using them.
4. Missing alt Text
This affects accessibility and SEO.
Browser Support
The <picture> tag is supported in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
Best Practices
- Always include a fallback
<img> - Use optimized images
- Order
<source>from smallest to largest - Test on multiple devices
- Use clear file names
When Should You Use <picture>?
Use it when:
✔ You need responsive images
✔ You want different images for devices
✔ You care about performance
✔ You need art direction
Avoid it when:
✘ You only need a simple image
✘ No responsiveness is required
Why the <picture> Tag Matters
Modern websites must work on all devices.
The <picture> tag helps:
- Improve performance
- Save bandwidth
- Enhance user experience
- Deliver better visuals
<picture> and SEO
Images affect SEO. Using <picture> helps:
- Faster loading → better ranking
- Better user experience
- Proper image delivery