如何解决我能否仅使用<img>标记src和alt来提供WebP文件而不是使用<picture>?
我正在将网站中的图像转换为WebP图像格式。如果系统无法提供文件,它将使用PNG版本。我在“ img”的“ src”和“ alt”元素中同时指定了WebP和PNG格式:
<img class="d-flex d-lg-flex"
src="/assets/img/bytebixlogo.png.webp?h=757c7b444ce465289d079f63b22bbca0"
alt="/assets/img/bytebixlogo.png?h=82cf7689d1dee6b6948666e42d5e364d">
但是在某些网站上,我看到以下复杂的实现方式:
<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" alt="" 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" alt="" 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的这种复杂实现?
解决方法
alt
标签中的<img>
属性用于当图像不可用时,供替代的文本显示给浏览器。您可以在此处查看说明:
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。