The <picture> element is a native way to implement responsive pictures in HTML5. It allows the most appropriate image resources to be loaded according to factors such as the screen size, resolution, and orientation of the device. Define multiple image sources and their corresponding media query conditions through the <source> tag. The browser will match and load the pictures that meet the conditions in order, and finally use the tag as the default fallback. For example: when the device width is greater than or equal to 1024px, medium.jpg is loaded between 768 and 1023px, small.jpg is loaded if the device width is greater than or equal to 1024px. Compared with 's srcset, <picture> provides more refined control capabilities, such as adapting to Retina screens, horizontal and vertical screen switching, completely different picture content, etc. When using it, media query conditions should be set reasonably, combined with srcset to improve high-resolution experience, and pay attention to image performance optimization. Typical applicable scenarios include: switching pictures with different compositions, using WebP format and falling back to JPG/PNG, adjusting aspect ratio to adapt to screen direction changes, etc.

Responsive pictures do not simply make the pictures scale, but load the most suitable picture resources based on factors such as the screen size, resolution, etc. The <picture></picture> element is a native way provided by HTML, which allows us to more precisely control which picture should be displayed under different conditions.

What is a <picture></picture> element?

<picture></picture> is a tag introduced by HTML5 to provide multiple image sources for different device conditions. It's a bit like " @media query for images", which allows you to define multiple <source></source> tags, each with media queries or other conditions, based on which the browser will select the most suitable image to load.

The basic structure is as follows:

 <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="Implementing Responsive Images using HTML Picture Element">
</picture>

If the device width is greater than or equal to 1024px, large.jpg is loaded; medium.jpg is loaded between 768 and 1023px; small.jpg is used if it is less than 768px.

Why use <picture> instead of just <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175212402729657.jpeg" class="lazy" alt="Implementing Responsive Images using HTML Picture Element" > 's srcset ?

Although the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175212402729657.jpeg" class="lazy" alt="Implementing Responsive Images using HTML Picture Element" > tag also supports srcset and sizes attributes for responsive images, its control granularity is limited. For example:

• You cannot specify different pictures based on the pixel ratio of different devices (such as Retina screen);
• The picture cannot be switched according to the device direction (horizontal/vertical screen);
• It is also impossible to replace completely different image content (such as simplified version pictures displayed on mobile).

And <picture> can easily deal with these scenarios. For example: You want to show a photo of vertical composition on your mobile phone and horizontal composition on your desktop. In this case, <picture> is very suitable.

How to correctly implement responsive pictures using <picture> ?

Here are some key points and suggestions:

• Always include a <img src="/static/imghw/default1.png" data-src="hero-mobile.jpg" class="lazy" alt="Implementing Responsive Images using HTML Picture Element" > fallback : no matter how many <source> there are, there must be a <img src="/static/imghw/default1.png" data-src="hero-mobile.jpg" class="lazy" alt="Implementing Responsive Images using HTML Picture Element" > tag as a guarantee, otherwise some browsers that do not support <picture> will not see the picture.

• Set media conditions reasonably : Ensure that there are no conflicts or missing intervals for each <source> media query. for example:

  • The first <source> is (min-width: 1024px)
  • The second one can be (min-width: 768px) instead of (min-width: 768px) and (max-width: 1023px) because the bigger case has been ruled out before.

• Use high-resolution images with srcset : You can use srcset in each <source> to specify 1x and 2x images to improve the Retina screen experience, for example:

   <source 
    srcset="photo-large.jpg, photo-large-2x.jpg 2x"
    media="(min-width: 1024px)"
  >

• Note the file size and performance : even if you provide multiple images, optimize their size. Large images should only be loaded when they are really needed to avoid slowing down the page.

When is <picture> suitable?

Not all responsive images require <picture> . Here are a few typical usage scenarios:

• You need to switch completely different image content according to the screen size (such as mobile version showing product close-up vs. desktop version of scene image)
• Want to provide higher-definition pictures for high-resolution screens
• Use new formats such as WebP, while retaining JPEG/PNG fallback
• Change the aspect ratio of the picture to adapt to different screen directions

For example:

 <picture>
  <source srcset="hero-wide.webp" type="image/webp">
  <source srcset="hero-wide.jpg">
  <img src="/static/imghw/default1.png"  data-src="hero-mobile.jpg"  class="lazy" alt="Home Banner">
</picture>

This will give priority to loading desktop wide images in WebP format. If not supported, fall back to JPG. If not, the mobile version of the small images will be displayed.

Overall, <picture></picture> brings us a more flexible responsive image solution. As long as you organize the <source></source> conditions reasonably and use them with srcset and type , you can achieve both beautiful and efficient image loading strategies. Basically all this is it. Although there is not much code, it is easy to cause problems if the details are not done well.

The above is the detailed content of Implementing Responsive Images using HTML Picture Element. For more information, please follow other related articles on the PHP Chinese website!