Responsive Images with picture

The picture Element

The <picture> element serves different images based on screen size, resolution, or format support (WebP, AVIF).

Example

<picture>
  <!-- Modern format: AVIF -->
  <source srcset="photo.avif" type="image/avif">
  <!-- Fallback format: WebP -->
  <source srcset="photo-large.webp 1200w,
                  photo-small.webp 600w"
          type="image/webp"
          sizes="(max-width: 600px) 600px, 1200px">
  <!-- Fallback for browsers without picture support -->
  <img src="photo.jpg" alt="Description" loading="lazy">
</picture>

HTML

Full Editor

Pro Tip

Always include an img fallback as the last child of picture — it is required.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned