Use elements to better handle responsive images, which enables the loading of the most suitable images based on screen size, resolution and format through multiple <source> and one . Specifically, it includes: 1. Different cropped images under different screen sizes; 2. Support modern formats such as WebP or AVIF; 3. High-definition pictures of high-resolution devices. Structures need to use <source> to define the conditions and image sources in turn, and use as a fallback scheme. At the same time, be careful to always include , use srcset instead of src, and specify the format through type to ensure compatibility. In addition, breakpoints should be set reasonably, pictures should be optimized, and valid alt text should be retained. In simple scenarios, only img srcset can be used to achieve responsiveness.

Using the <picture></picture> element is one of the best ways to handle responsive images on the web. It gives you more control over which image gets shown based on screen size, resolution, and even format support. Let's break it down into what you actually need to know and how to use it effectively.

What the <picture></picture> element does

The <picture></picture> element works like a container that holds multiple <source></source> elements along with a fallback <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175233903669148.jpeg" class="lazy" alt="How to use the picture element for responsive images?" > . Browsers check each <source></source> in order and load the first one that matches the current device conditions — things like screen width or pixel density.

It's especially useful when you want:

• Different crops of an image for different screen sizes
• Modern image formats (like WebP or AVIF) for supported browsers
• High-resolution versions for retina displays

This isn't just about saving bandwidth — it's about showing the right image at the right time without sacrificing quality or layout.

How to structure your <picture></picture> tag

Here's a basic example:

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

Each <source> defines a different image ( srcset ) and a condition ( media ). The browser picks the first matching source, or falls back to the <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="How to use the picture element for responsive images?" > if none match.

A few things to keep in mind:

• Always include an <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="How to use the picture element for responsive images?" > tag as the last child — it's required.
• Use srcset instead of src inside <source> .
• You can also use type attribute to specify image formats.

When to use type and why it matters

If you're using next-gen image formats like WebP or AVIF, not all browsers support them (though most modern ones do). That's where the type attribute comes in handy:

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

In this case, the browser checks if it supports AVIF first. If not, it tries WebP. If neither is supported, it loads the JPG version. This way, users get the best possible image format their browser supports — no extra work needed from you.

You don't have to worry about ordering too much here — browsers will pick the best match automatically based on support.

Tips for getting the most out of <picture></picture>

• Use meaningful breakpoints — Don't copy other people's media queries blindly. Use breakpoints that make sense for your design and content.
• Test across devices — Make sure your images look good and load correctly on mobile, tablet, and desktop.
• Don't forget alt text — The <img alt="How to use the picture element for responsive images?" > still needs proper alt text for accessibility and SEO.
• Optimize your images — Even though <picture></picture> helps with responsiveness, always compress and resize your images before putting them online.

Also, keep in mind that while <picture></picture> is powerful, it's not always necessary. For simple size changes without different crops or formats, img srcset and sizes might be enough.

Basically that's it.

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