关于 HTML5 替代图像文件的说明答案

【问题标题】：Clarification on HTML5 alternative image files关于 HTML5 替代图像文件的说明
【发布时间】：2020-05-07 05:19:02
【问题描述】：

谁能准确告诉我，下面的代码，

<picture>
   <source media="(min-width:900px)" srcset="logo-480.png 480w, logo-768.png 768w" />  
   <img src="logo-320.png" alt="logo" sizes="(max-height: 300px) 480px" width="1000"/>
</picture>

在什么条件下会加载 logo-480.png 和 logo-768.png？

【问题讨论】：

请注意，<source> 和 <img> 不使用也不需要结束斜线，并且在 HTML 中永远不会有。
quora.com/…
The HTML Standard

标签： html image file

【解决方案1】：

我想通了。

这是一个重新设计的例子：

<!DOCTYPE html>
<html><head></head><body>
   <picture>
     <source media="(min-width:2000px)" type="image/webp" srcset="logo.webp" />
     <source media="(min-width:1500px)" srcset="logo.png"/>
     <source media="(min-width:900px)"  sizes="(max-width:1200px)400px,100vw "
             srcset="logo-480-2x.png 2x, 
                     logo-768-1.5x.png 1.5x, 
                     logo-480.png 480w, 
                     logo-768.png 768w" />  
     <img src="logo-320.png" alt="logo"  sizes="(min-width: 600px) 300px, 50vw"/>
   </picture>
</body></html>

如果浏览器不支持 webp 格式或视口宽度小于 2000px，'logo.webp' 将被忽略。（调整浏览器窗口大小以更改视口大小）

如果视口的宽度在 1500px 和 2000px 之间，将选择“logo.png”。

如果视口宽度在 1200px 和 1500px 之间，将选择“logo-768-1.5x.png”作为预期宽度，即。 100vw（100% 视口宽度，或 1200px 到 1500px），大于 480px 和 768px，但与大于 1 的最小像素密度描述符相关联，即1.5 倍。如果视口宽度在 900px 和 1200px 之间，则会选择“logo-480.png”，因为它的宽度描述符 (480w) 是比预期宽度 400px 大的最小的描述符。

如果视口宽度小于 900 像素，将使用“logo-320.png”。中的“sizes”属性将被忽略，因为它与“srcset”属性中的任何宽度描述符都没有关联。

宽度像素密度描述符（例如 2x）或宽度描述符（例如 480w）越大，显示的图像就越小，其中：宽度描述符 * 像素密度描述符 = 原始图像宽度

【讨论】：