The core of using HTML5's picture elements to implement responsive images is to load the most appropriate image resources according to the device characteristics. The specific methods are as follows: 1. The element contains multiple and one , and the browser matches the that meets the conditions in order, otherwise it falls back to ; 2. Combining the srcset and sizes attributes, let the browser automatically choose the best size; 3. By specifying the type attribute, it is preferred to load modern formats (such as WebP), and downgrades support for traditional formats; 4. Pay attention to the order, retain as fallback, consider compatibility and SEO optimization.

The core of using HTML5 picture elements to implement responsive pictures is to load the most appropriate picture resources according to the characteristics of the device. It does not just rely on the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330446257.jpeg" class="lazy" alt="How to use the HTML5 picture element for responsive images" > tag to complete this, but uses a set of <source></source> to cooperate with <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330446257.jpeg" class="lazy" alt="How to use the HTML5 picture element for responsive images" > to control the source of pictures in different situations.

1. Basic structure of <picture></picture> element

<picture></picture> is a container element that can put multiple <source></source> and one <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330584448.jpeg" class="lazy" alt="How to use the HTML5 picture element for responsive images" > in it. Each <source></source> can set different media queries (media), image format (type) and corresponding image address (srcset). The browser will check from top to bottom which <source></source> meets the conditions. Once the match is successful, it will use that image source; if it does not match, it will fall back to the image in the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330584448.jpeg" class="lazy" alt="How to use the HTML5 picture element for responsive images" > tag.

The basic writing method is as follows:

 <picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy" alt="How to use the HTML5 picture element for responsive images">
</picture>

In this example:

• Load large.jpg when the screen width is greater than or equal to 800px;
• Load medium.jpg from width between 400 and 799px;
• Browsers less than 400px or do not support picture will load small.jpg.

2. Use srcset and sizes to achieve more flexible response

In addition to switching different pictures through media query, you can also combine srcset and sizes to let the browser choose the best size by itself.

for example:

 <picture>
  <source 
    srcset="image-320w.jpg 320w,
            image-480w.jpg 480w,
            image-800w.jpg 800w"
    sizes="(min-width: 600px) 800px,
           (min-width: 400px) 480px,
           320px"
    type="image/jpeg">
  <img src="/static/imghw/default1.png"  data-src="fallback.jpg"  class="lazy" alt="default picture">
</picture>

This code means:

• The browser selects the most suitable one from the provided image set based on the current layout width;
• sizes tells the browser: "If the screen is wider than 600px, I plan to use 800px to display this image", so that the browser can determine which resolution should be loaded;
• If the browser does not support these features, fallback.jpg will be displayed.

3. Supports multiple image formats (such as WebP)

Sometimes you want to provide smaller images to browsers that support modern formats (such as WebP), but you have to ensure that old browsers can also display JPG/PNG normally.

You can do this:

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

The browser will give priority to loading the WebP format, and if it is not supported, it will return to JPEG. This is helpful for improving page loading speed, especially on mobile.

4. Precautions and FAQs

There are several details that are easily overlooked when using <picture></picture> :

• The order is very important : the browser matches <source></source> from top to bottom, so it is more reasonable to put the conditions for high resolution or large screens in front.
• Don't miss <img alt="How to use the HTML5 picture element for responsive images" > : Even if you write multiple <source></source> , you must keep the <img alt="How to use the HTML5 picture element for responsive images" > tag as the final fallback plan.
• Compatibility considerations : Although mainstream browsers now support <picture></picture> , polyfill or server downgrade may be required in some older systems.
• Don't forget SEO and alt text : <img alt="How to use the HTML5 picture element for responsive images" > 's alt attribute is still important and cannot be left blank.

Basically that's it. <picture></picture> looks a bit complicated, but in fact, as long as you understand the essence of it being a "multi-condition selector", it will not be difficult to use.

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