通过HTTP标头使用HTML Picture或服务器端支持WebP？

Question

似乎有两种方法可以向支持WebP的浏览器显示WebP图像。

1. 使用HTML图片元素

<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg"> </picture>

1. 在HTTP服务器上检测。因此，请求/ image，服务器将通过http请求标头检测客户端是否支持webp，是否支持webp图像，是否不支持jpg图像。

哪种方法更好，每种方法的优缺点是什么？

Answer 1

HTML5 <picture>解决方案或JavaScript解决方案Detecting WebP support更好，因为获取网站的速度更快（请求更少）。考虑到基于性能的原因，JavaScript解决方案可能是最好的解决方案，例如React或Vue之类的框架通过JS填充网站的动态片段，而HTML只是“页面框架”，它可以缓存所有资源以获得更好的性能（因此，只有API才能下载和更新）。 HTML解决方案的不好的一面是<picture>在较旧的浏览器中可能无法正常显示。您可能还会发现this文章很有帮助。

Answer 2

我想说，如果这对您的应用程序有意义，那么最好通过检查'Accept'标头来检测服务器端，因为它不依赖于对<picture>标签的支持，可以咨询here。大多数现代浏览器都支持它，但是旧版本不支持。

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

Answer 3

更新答案（基于对该答案的评论）：

总而言之，这两种方法都将产生相似的性能优势。两者中的哪一个更好取决于您的情况（详细信息如下）：

1. 方法＃1（标签）

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

此方法的问题是需要更新现有代码。因此，对于具有大量现有页面的网站-这可能很麻烦。

1. 方法2（更改基于http标头提供的图像格式）

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

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

明智的性能-两种方法之间没有区别。通常，服务器端用于检测标头并做出相应响应所消耗的额外CPU最少。

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

原始答案：

方法1（使用元素）更有意义。主要是因为随着浏览器对webp的支持将提高，较新的浏览器将下载webp图像。

如果采用方法2（通过用户代理字符串使用服务器端检测），则要么必须更新检测代码，要么改进的Webp支持将不会反映在图像加载解决方案中。