带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

最后，我得到了一个将图像切换到源(支持它的浏览器可以获得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>

Answer 2

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

艺术方向的概念基本上是为了切换不同的图像版本与不同的纵横比取决于您的视口大小。

德国网络演播室“库尔图班塞”：的例子

<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

虽然标准的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

希望我能帮上忙