支持WebP使用HTML图片或服务器端通过http头?

更新答案(基于对答案的评论):

总之,这两种方法都会产生类似的性能优势。这两种方法哪一种更好取决于你的情况(详情如下):

1. 进近#1(<图片>标签)

使用的好处<图片>标记方法是不需要在服务器端进行任何更改。因此,在更改服务器/CDN配置是一个问题的设置中,这应该可以解决问题。

这种方法的问题是需要更新现有代码。因此,对于有大量现有页面的网站来说,这可能会很麻烦。

2. 方法#2(更改基于http头传递的图像格式)

这种方法的主要优点是在HTML中没有代码更改。

使用这种方法需要注意的一点是,您必须确保您的服务器环境和CDN支持基于HTTP头提供不同的图像格式。

性能方面-这两种方法没有区别。服务器端检测报头并相应响应所消耗的额外CPU通常是最小的。

有关详细信息,请查看 https://www.tezify.com/how-to/using_webp_images/

原始答案:

方法#1(使用元素)更有意义。主要是因为浏览器对webp的支持将会提高,更新的浏览器将下载webp图像。

在方法#2(通过用户代理字符串使用服务器端检测)的情况下,您必须更新检测代码,否则改进的webp支持将不会反映在图像加载解决方案中。

<picture> 解决方案或JavaScript解决方案 Detecting WebP support <图片> 在较旧的浏览器中,可能无法按预期显示。你也可以发现 this 文章很有用。

<picture> 标签,可参考 here . 大多数现代浏览器都支持它,但旧版本不支持。

我之所以能想到在客户端这样做,是因为它是一个静态应用程序,或者你无法控制服务器。