我可以只使用 <img> 标签 src 和 alt 来提供 WebP 文件而不是使用 <picture> 吗？

Posted 2023-03-06

【中文标题】我可以只使用 <img> 标签 src 和 alt 来提供 WebP 文件而不是使用 <picture> 吗？

【英文标题】：Can I just use <img> tag src and alt to serve WebP files vs using <picture>?

【发布时间】：2021-01-31 12:04:17

【问题描述】：

我正在将我网站中的图像转换为 WebP 图像格式。如果系统无法提供文件，它将使用 PNG 版本。我在 'img' 的 'src' 和 'alt' 元素中同时指定了 WebP 和 PNG 格式，如下所示：

<img class="d-flex d-lg-flex" 
 src="/assets/img/bytebixlogo.png.webp?h=757c7b444ce465289d079f63b22bbca0" 
 >

但在某些网站中，我看到了以下复杂的实现：

<picture>
    <source data-lazy-srcset="https://openplant.b-cdn.net/wp-content/webp-express/webp-images/doc- 
        root/wp-content/uploads/OpenPlantLogo_TransparentBG.png.webp" type="image/webp" 
        srcset="https://openplant.b-cdn.net/wp-content/webp-express/webp-images/doc-root/wp- 
        content/uploads/OpenPlantLogo_TransparentBG.png.webp">
    <img id="image-4125-897"  src="https://openplant.b-cdn.net/wp 
        content/uploads/OpenPlantLogo_TransparentBG.png" class="ct-image webpexpress-processed lazyloaded" data-lazy-src="https://openplant.b-cdn.net/wp- 
        content/uploads/OpenPlantLogo_TransparentBG.png" data-was-processed="true">
    <noscript>
    <img id="image-4125-897"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="ct-image op-logo-image animated fadeInUp webpexpress-processed" data-lazy-src="https://openplant.b-cdn.net/wp-content/uploads/OpenPlantLogo_TransparentBG.png">
    </noscript>
</picture>

我有什么遗漏吗？ 为什么要使用这种复杂的 WebP 实现？

【参考方案1】：

<img> 标签中的alt 属性用于在图像不可用时向浏览器显示替代的文本。你可以看看这里的描述： https://developer.mozilla.org/en-US/docs/Web/html/Element/img#Attributes

因此，将图像路径放在alt 属性中不会得到你想要的。当 PNG 图像不可用时，浏览器只会将路径显示为纯文本。

<picture> 标签是为了解决alt 的缺点，所以你可以有另一个图像作为后备。您可以使用它进行多个后备/情境替换。由于它被设计得更加强大和通用，因此语法看起来更加复杂。

权力越大，责任越大:-)

更多关于<picture>标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture