我对像这样实现的图片标签很好奇。
<picture> <source srcset="path/img.webp" type="image/webp" /> <img src="path/img.jpg" alt="image" /> </picture>
对于客户端,我理解如果浏览器可以处理webp,它将显示从服务器发送的webp图像;否则,它将显示同样从服务器发送的 jpg 图像。
我想知道服务器是否需要将两张图像都发送给客户端,或者服务器只发送一张客户端可以处理的图像,因为我的目标是服务器带宽优化。
它采用“惰性”方法。在
source
元素“可用”之前,它不会请求source
元素中指定的文件。“可用”可能意味着以下任何一项:
以 演示 为例https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools:
(下面是演示的副本)