0

我想使用标签和 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>

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

4

3 回答 3

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

我希望我有帮助

于 2022-02-09T23:02:12.430 回答
1

您可以通过艺术指导规则将这两个概念结合起来。

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

来自德国网络工作室“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 文档：响应式图像

于 2022-02-10T04:05:13.783 回答
0

最后，我得到了一个设计，它既可以将图像切换到源（我们可以为支持它的浏览器获取 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>
于 2022-02-10T13:55:00.400 回答