HTML `picture` Source Order and Fallbacks

When the browser parses the picture elements, matches in the source order, and finds the first supported resource loading, otherwise it falls back to img. Because the browser checks from top to bottom whether each source meets the criteria, it stops once it matches, and neither the subsequent source nor the img will be loaded. The correct order should be to place the loaded format in the front, such as AVIF, WebP, and alternative formats such as JPG, PNG, and img as the final guarantee. Common problems include img without src, source type error or path error, causing fallback to fail. It is recommended to verify the source order, check the img path, and use developer tools to debug resource loading.

When the browser parses the HTML picture element, it will determine whether it supports it in the order of the <source></source> tags you wrote in the code until a matching resource is found. If none of them match, the contents that are fallback to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175329111415127.jpeg" class="lazy" alt="HTML `picture` Source Order and Fallbacks" > tag will eventually fallback.

Therefore, the order of source is very important , and the order determines which resource the browser prefers to load.

Why does the source order affect fallback behavior?

The way <picture></picture> works is to check "top to bottom" whether each <source></source> meets the support conditions for the current device and browser. Once a <source></source> matches (such as media query is established, or the format is supported), the browser will use it and ignore the subsequent <source></source> and <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175329111661004.jpeg" class="lazy" alt="HTML `picture` Source Order and Fallbacks" > .

If you put unsupported formats or inappropriate media queries in front of it, the browser may pick it up and keep searching. But if there is no suitable one in the future, then <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175329111891961.jpeg" class="lazy" alt="HTML `picture` Source Order and Fallbacks" > will be used.

For example:

 <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 example, if the browser supports AVIF, it will load the AVIF image; if AVIF is not supported but WebP is supported, it will load the WebP; if none is supported, it will display JPG.

But if the writing is reversed:

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

That will be preferred to load JPG even if the browser supports AVIF and WebP, because it is the first matching type. And the AVIF in the <img alt="HTML `picture` Source Order and Fallbacks" > tag will not be used.

How to correctly arrange the source order?

To ensure that the browser can load the format you expect first, you should write it in the order of “modern to traditional” or “efficient to universal”:

• <source></source> placed in front should be the format you want to load first (such as AVIF, WebP)
• <source></source> placed behind is an alternative format (such as JPG, PNG)
• The final <img alt="HTML `picture` Source Order and Fallbacks" > is the bottom-up plan

This ensures:

• Browsers that support new formats can load smaller images
• Unsupported browsers can also display pictures normally

What are the common problems with fallback behavior?

Sometimes, even if you write fallback, the picture is not loaded. Common reasons include:

• <img alt="HTML `picture` Source Order and Fallbacks" > No src attribute is written
• type of <source></source> is written incorrectly (for example, it is written as image/jpg , but it is actually image/jpeg )
• All <source></source> does not match, but <img alt="HTML `picture` Source Order and Fallbacks" > path error or resource does not exist

So suggestion:

• Always provide a reliable src for <img alt="HTML `picture` Source Order and Fallbacks" >
• Check loaded resources and request status with browser developer tools
• Test the performance of different browsers, especially mobile and old browsers

Let's summarize

• The browser matches <source></source> from top to bottom in order
• The first match <source></source> will be used, and the following will be ignored
• <img alt="HTML `picture` Source Order and Fallbacks" > will be loaded only if all <source></source> does not match
• The correct order is: put the loaded format first, and put the compatible format behind.
• Fallback is often invalid because of path errors, format errors or misorder

Basically that's it. The order looks simple, but if you make a mistake, it can easily cause the image to fail to load or the format that should not be loaded.

The above is the detailed content of HTML `picture` Source Order and Fallbacks. For more information, please follow other related articles on the PHP Chinese website!