How to use the picture element for responsive images in HTML5

Using HTML5's elements can provide responsive images based on screen size, resolution or device orientation. By combining the media and type attributes of the <source> tag, image loading under different conditions is achieved, and using as a backup to ensure compatibility and performance optimization. When art guidance or modern format support is required, is ideal, and the 's srcset attribute can be used only when resolution switching is required.

The <picture></picture> element in HTML5 is a powerful tool for delivering responsive images, allowing you to serve different image files based on screen size, resolution, device orientation, or other conditions. It works similarly to the <video></video> and <audio></audio> elements by wrapping multiple <source></source> tags and a fallback <img src="/static/imghw/default1.png" data-src="large.jpg" class="lazy" alt="How to use the picture element for responsive images in HTML5" > .

Here's how to use it effectively:

Understanding the structure of the <picture></picture> element

The <picture></picture> element acts as a container for different image sources. You define multiple sources using the <source></source> tag, and include one <img src="/static/imghw/default1.png" data-src="large.jpg" class="lazy" alt="How to use the picture element for responsive images in HTML5" > element as a fallback. The browser selects the first source that matches the given criteria, falling back to the image if none apply.

 <picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="/static/imghw/default1.png"  data-src="large.jpg"  class="lazy" alt="Description of image">
</picture>

In this example:

• Devices with screen widths up to 768px get small.jpg
• Devices between 769px and 1200px get medium.jpg
• Larger screens get large.jpg via the <img src="/static/imghw/default1.png" data-src="hero-desktop.jpg" class="lazy" alt="How to use the picture element for responsive images in HTML5" > fallback

Using media queries to target device characteristics

The media attribute in <source> accepts CSS media queries, making it ideal for art direction—when you want to show different crops or compositions on different devices.

 <picture>
  <source media="(max-width: 599px)" srcset="hero-mobile.jpg">
  <source media="(min-width: 600px)" srcset="hero-desktop.jpg">
  <img src="/static/imghw/default1.png"  data-src="hero-desktop.jpg"  class="lazy" alt="Hero banner">
</picture>

This is useful when:

• A mobile image is cropped vertically to fit smaller screens
• Desktop versions include more context or background elements
• You want to optimize loading by sending only what's necessary

Supporting modern image formats with type attribute

You can also use the type attribute to serve next-gen formats like WebP or AVIF while falling back to JPEG or PNG for older browsers.

 <picture>
  <source type="image/webp" srcset="photo.webp">
  <source type="image/avif" srcset="photo.avif">
  <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="A scenario view">
</picture>

Browsers check the type first. If they support WebP, they'll load it. If not, they'll try AVIF, then fall back to the JPG. This improves performance without sacrificing compatibility.

Tips for effective use

• Always include an <img src="/static/imghw/default1.png" data-src="large.jpg" class="lazy" alt="How to use the picture element for responsive images in HTML5" > tag with a src and alt attribute. It's required and ensures accessibility and fallback.
• Order <source> elements logically—most specific or preferred formats first.
• Combine media and type when needed:

 <picture>
  <source media="(max-width: 768px)" srcset="small.webp" type="image/webp">
  <source media="(max-width: 768px)" srcset="small.jpg" type="image/jpeg">
  <source srcset="large.webp" type="image/webp">
  <img src="/static/imghw/default1.png"  data-src="large.jpg"  class="lazy" alt="Responsive image">
</picture>

• Use relative paths or CDNs consistently to avoid broken images.

The <picture></picture> element gives you fine control over image delivery. It's not always needed—simple size-based responsive images can use srcset and sizes on <img alt="How to use the picture element for responsive images in HTML5" > —but when you need art direction or format switching, <picture></picture> is the right choice.

Basically, use <picture></picture> when you need different images for different contexts, and stick with srcset on <img alt="How to use the picture element for responsive images in HTML5" > for resolution switching alone.

The above is the detailed content of How to use the picture element for responsive images in HTML5. For more information, please follow other related articles on the PHP Chinese website!