php - 我可以只使用标签 src 和 alt 来提供 WebP 文件而不是使用
问题描述
我正在将我网站中的图像转换为 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
推荐阅读
- ios - 图像加载/缓存主线程
- return - 如何更改此方法以便可以打印计数?
- php - Laravel - 使用十进制/数字数据类型(Postgres)返回意外结果的计算
- python - 如何格式化来自 DynamoDB Scan() API (Python) 的响应
- python - 抓取大型复杂的 PDF 表格
- python - zsh:找不到命令:ampy
- java - 通过单个属性更新 JavaFX TableView 并用行颜色反映它
- css - Flexbox 和调整元素大小有问题
- audio - 取youtube视频元素的音频
- firebase - 如何在 Firestore 的文档中添加新的增量字段值?