带srcset的图片源

Question

我想使用标签和 3 种图像格式。 avif\webp\png。同时，但不要忘记视网膜显示器。

此刻我想到了这样的格式：

<picture>
    <source srcset="components/header/img/logo.avif, components/header/img/logo@2x.avif 2x" type="image/avif">
    <source srcset="components/header/img/logo.webp, components/header/img/logo@2x.webp 2x" type="image/webp">
    <img class="someClass" src="components/header/img/logo.png" srcset="components/header/img/logo@2x.png 2x" alt="Logo">
</picture>

但这其中有多少是正确的？也许应该以其他方式实施？

Answer 1

虽然标准 HTML <img> 元素不支持图像的兼容性回退，但 <picture> 元素支持。 <picture> 用作许多 <source> 元素的包装器，每个元素指定不同格式或不同媒体条件下的图像版本，以及定义的 <img> 元素在哪里显示图像和回退到默认或“最兼容”版本。

<picture>
   <source srcset="diagram.svg" type="image/svg+xml">
   <source srcset="diagram.png" type="image/png">
   <img src="diagram.gif" width="620" height="540"
   alt="Diagram showing the data channels">
</picture>

更多信息developer.mozilla.org

希望对您有所帮助

Answer 2

您可以通过 art-direction 规则将这两个概念结合起来。

艺术指导概念基本上是为了根据您的视口大小在具有不同宽高比的不同图像版本之间切换。

德语示例web studio "kulturbanause":

<picture>
  <source media="(min-width: 56.25em)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 56.25em)" srcset="large.jpg">

  <source media="(min-width: 37.5em)" srcset="medium.webp" type="image/webp">
  <source media="(min-width: 37.5em)" srcset="medium.jpg">

  <source srcset="small.webp" type="image/webp">
  <source srcset="small.jpg">
  <img src="fallback.jpg" alt="">
</picture>

如果可行（徽标、信息图形等）使用 svg

参考您引用徽标 img 的代码示例：
最有可能的是，您的徽标可以用作 svg。
如果创建（或优化）良好，则不需要任何 HiRes 候选。（并且很可能 svg 也会用关于文件大小的光栅图像擦地板）

另请参阅：MDN 文档：响应式图像

Answer 3

最后我得到了一个设计，它既可以将图像切换到源（对于支持它的浏览器，我们可以获得 avif\webp），也可以使用 srcset，它允许我们为不同的显示器输出 x1 或 x2 图像。

仅例如文件路径:)

<picture>
    <source srcset="components/features/img/icon-5.avif 1x, components/features/img/icon-5@2x.avif 2x" type="image/avif">
    <source srcset="components/features/img/icon-5.webp 1x, components/features/img/icon-5@2x.webp 2x" type="image/webp">
    <img class="someClass" src="components/features/img/icon-5.png" alt="Icon" srcset="components/features/img/icon-5.png 1x, components/features/img/icon-5@2x.png 2x">
</picture>

带srcset的图片源

Picture source with srcset

html

css

webp

retina

avif

如果可行（徽标、信息图形等）使用 svg