html - 标签如何处理两个来源？

Question

我需要一些帮助来理解为什么有人会在网页中加载这样的图像？我的意思是最后的两个标签和标签。

1. 如何决定加载哪个图像？
2. 背后有框架吗？

3. 这是否意味着它加载两个图像并以不同的分辨率在它们之间切换？

       <picture>
           <!--[if IE 9]><video style="display:none;"><![endif]-->
           <source srcset="<?php echo get_page_thumbnail('800x690', FALSE, TRUE); ?>" media="(max-width: 960px)">
           <source srcset="<?php echo get_page_thumbnail('9000x9000', FALSE, TRUE); ?>" media="(min-width: 960px)">
           <!--[if IE 9]></video><![endif]-->
           <img srcset="<?php echo get_page_thumbnail('9000x9000', TRUE, TRUE); ?>" alt="<?php echo get_page_title(); ?>" />          
       </picture>
   

Answer 1

https://www.w3schools.com/tags/tag_picture.asp

该标签为网络开发人员指定图像资源提供了更大的灵 active 。

该元素最常见的用途是响应式设计中的艺术指导。可以设计多张图片以更好地填充浏览器视口(viewport)，而不是让一张图片根据视口(viewport)宽度按比例放大或缩小。

该元素包含两个不同的标签:一个或多个标签和一个标签。

该元素具有以下属性:

• srcset(必需)- 定义要显示的图像的 URL
• media - 接受通常在 CSS 中定义的任何有效媒体查询
• sizes - 定义单个宽度描述符、具有宽度描述符的单个媒体查询或具有宽度描述符的以逗号分隔的媒体查询列表
• type - 定义 MIME 类型

浏览器将使用属性值来加载最合适的图像。浏览器将使用具有匹配提示的第一个元素并忽略任何后续标记。