支持使用 HTML 图片或服务器端通过 http headers 的 WebP？
Support WebP using HTML Picture or server side via http headers?
似乎有两种方法可以向支持它的浏览器显示 WebP 图片。
- 使用HTML图片元素
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg">
</picture>
- 在 HTTP 服务器上检测。所以请求/image，服务器通过http请求检测headers客户端是否支持webp，是否提供webp图片，是否不提供jpg图片。
哪种方法更好，各自的优缺点是什么？
HTML5<picture>解决方案或JavaScript解决方案Detecting WebP support is better because fetching website is faster (less requests). JavaScript solution is possibly the best solution considering the fact for performance reasons frameworks like React or Vue populate dynamic fragments of website via JS and HTML is only "page skeleton" what allows all resources to be cached for even better performance (so only API has to be downloaded and updated). Bad side of HTML solution is <picture> in an older browser can be displayed not as expected. You may also find this文章有帮助。
更新答案（基于对答案的评论）：
All-in-all，这两种方法都会产生相似的性能优势。两者哪个更好看你的情况（详见下文）：
- 方法 #1（<图片> 标签）
使用 标签方法的好处是不需要在服务器端进行任何更改。因此，在更改服务器/CDN 配置是一个问题的设置中 - 这应该可以解决问题。
这种方法的问题是需要更新现有代码。因此，对于具有大量现有页面的网站 - 这可能很麻烦。
- 方法 #2（更改基于 http headers 传送的图像格式）
这种方法的主要好处是 HTML.
中没有代码更改
使用此方法需要注意的一件事是 - 您必须确保您的服务器环境和 CDN 支持基于 HTTP header.
提供不同的图像格式
性能方面 - 两种方法之间没有区别。服务器端检测 header 并做出相应响应所消耗的额外 CPU 通常很少。
有关详细信息，请查看 https://www.tezify.com/how-to/using_webp_images/
原答案：
方法 #1（使用元素）更有意义。主要是因为随着浏览器对 webp 支持的提高，更新的浏览器将下载 webp 图像。
对于方法 #2（通过 user-agent-string 使用服务器端检测），您要么必须更新检测代码，要么改进的 webp 支持不会反映在您的图像加载解决方案中。
我想说如果它对您的应用程序有意义，最好通过检查 'Accept' header 在服务器端检测它，因为它不依赖于对<picture> 标签，可参考here。大多数现代浏览器都支持它，但旧版本不支持。
我能想到在客户端做它的原因是因为它是一个静态应用程序，或者您无法控制服务器。
似乎有两种方法可以向支持它的浏览器显示 WebP 图片。
- 使用HTML图片元素
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg">
</picture>
- 在 HTTP 服务器上检测。所以请求/image，服务器通过http请求检测headers客户端是否支持webp，是否提供webp图片，是否不提供jpg图片。
哪种方法更好，各自的优缺点是什么？
HTML5<picture>解决方案或JavaScript解决方案Detecting WebP support is better because fetching website is faster (less requests). JavaScript solution is possibly the best solution considering the fact for performance reasons frameworks like React or Vue populate dynamic fragments of website via JS and HTML is only "page skeleton" what allows all resources to be cached for even better performance (so only API has to be downloaded and updated). Bad side of HTML solution is <picture> in an older browser can be displayed not as expected. You may also find this文章有帮助。
更新答案（基于对答案的评论）：
All-in-all，这两种方法都会产生相似的性能优势。两者哪个更好看你的情况（详见下文）：
- 方法 #1（<图片> 标签）
使用
这种方法的问题是需要更新现有代码。因此，对于具有大量现有页面的网站 - 这可能很麻烦。
- 方法 #2（更改基于 http headers 传送的图像格式）
这种方法的主要好处是 HTML.
中没有代码更改使用此方法需要注意的一件事是 - 您必须确保您的服务器环境和 CDN 支持基于 HTTP header.
提供不同的图像格式性能方面 - 两种方法之间没有区别。服务器端检测 header 并做出相应响应所消耗的额外 CPU 通常很少。
有关详细信息，请查看 https://www.tezify.com/how-to/using_webp_images/
原答案：
方法 #1（使用元素）更有意义。主要是因为随着浏览器对 webp 支持的提高，更新的浏览器将下载 webp 图像。
对于方法 #2（通过 user-agent-string 使用服务器端检测），您要么必须更新检测代码，要么改进的 webp 支持不会反映在您的图像加载解决方案中。
我想说如果它对您的应用程序有意义，最好通过检查 'Accept' header 在服务器端检测它，因为它不依赖于对<picture> 标签，可参考here。大多数现代浏览器都支持它，但旧版本不支持。
我能想到在客户端做它的原因是因为它是一个静态应用程序，或者您无法控制服务器。