HTML Picture Element

Subject: html

🖼️ HTML <picture> Element

The <picture> element in HTML provides advanced control over responsive images, allowing developers to serve different images based on screen size, resolution, or device type. This helps improve load times, display quality, and overall user experience.

🔍 What is the <picture> Element?

The <picture> element works with multiple <source> elements and a fallback <img> element. The browser evaluates each <source> and selects the most suitable image based on media conditions or supported formats.

🧱 Syntax

🚀 Try it in Compiler
  • <source>: Specifies a candidate image with optional media or type
  • srcset: Defines the image URL
  • media: Sets the screen size condition
  • <img>: Fallback image if no <source> conditions are met or not supported

🎯 Use Cases for <picture>

  • Serve different image sizes to mobile, tablet, and desktop
  • Use modern formats like WebP with fallback to JPEG/PNG
  • Implement art direction: show different images for different screen sizes or orientations

✅ Example: Responsive Picture

🚀 Try it in Compiler

✅ What Happens:

  • If browser supports WebP → loads image.webp
  • If width ≥ 800px → loads image-large.jpg
  • If width ≥ 480px → loads image-medium.jpg
  • Else → loads fallback image-small.jpg

♿ Accessibility Considerations

  • Always include meaningful alt text in the <img> fallback element.
  • <source> tags do not support alt; screen readers rely on the <img>.

🧠 Key Takeaways

  • Use <picture> to deliver optimized, responsive images
  • Combine multiple <source> with media queries and image type
  • Always include a fallback <img> for compatibility
  • Boost performance, accessibility, and user experience by delivering the right image to the right device
Next: Background Image in HTML Using CSS