Php 我可以用<；img>；标记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

属性用于在图像不可用时向浏览器显示可选的文本。您可以在此处查看说明：

因此，将图像路径放在

alt

属性中并不能得到您想要的。当PNG图像不可用时，浏览器只会将路径显示为纯文本

标记是为了解决

alt

的缺点，因此您可以使用另一个映像作为备用映像。您可以使用它进行多个后备/情景替换。由于它被设计得更加强大和通用，语法看起来更加复杂

权力越大，责任越大：-）

---

有关

标记的更多详细信息：

标记中的

alt

属性用于在图像不可用时向浏览器显示可选的文本。您可以在此处查看说明：

因此，将图像路径放在

alt

属性中并不能得到您想要的。当PNG图像不可用时，浏览器只会将路径显示为纯文本

标记是为了解决

alt

的缺点，因此您可以使用另一个映像作为备用映像。您可以使用它进行多个后备/情景替换。由于它被设计得更加强大和通用，语法看起来更加复杂

权力越大，责任越大：-）

有关

标记的更多详细信息：