使用HTML Picture支持WebP还是通过http头在服务器端支持WebP？

Question

似乎有两种方法可以展示WebP图片给支持它的浏览器。

1. 使用HTML Picture元素

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

检测HTTP服务器。因此，请求/image并通过http请求头检测客户端是否支持webp，如果支持则提供webp图像，如果不支持则提供jpg图像。

每种方法都有优缺点。第一种方法需要在网站上维护两个版本的图像，这可能会导致更高的存储成本和带宽使用。第二种方法需要进行额外的检测，但只需要维护一个版本的图像，因此可以减少存储成本和带宽使用。选择哪种方法取决于您的特定需求和限制。

- AndrewHarvey

Answer 1

更新回答（根据评论）：

总的来说，这两种方法都能带来类似的性能优势。哪种更好取决于你的情况（详见下文）：

1. 方法 #1（<picture> 标签）

使用 <picture> 标签方法的好处在于无需更改服务器端。因此，在更改服务器/CDN配置是问题的设置中-这应该能解决问题。

这种方法的问题在于需要更新现有代码。因此，对于有大量现有页面的站点，这可能会很麻烦。

2. 方法 #2（基于http标头更改传递的图像格式）

这种方法的主要优点是 HTML 中不需要更改任何代码。

这种方法需要注意的一件事是-您必须确保您的服务器环境和 CDN 支持根据 HTTP 标头交付不同的图像格式。

就性能而言-这两种方法之间没有区别。通常，服务器端消耗的额外 CPU 来检测标头并相应地响应是最小的。

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

原始答案：

方法 #1（使用 <picture> 元素）更合理。主要因为随着浏览器对 webp 支持的改善，新版浏览器将下载 webp 图像。

在方法 #2 中（通过用户代理字符串进行服务器端检测），您将不得不更新检测代码，否则改进后的 webp 支持将无法反映在您的图像加载解决方案中。

- Punit S

---

方法二根本不使用用户代理，而是基于接受标头。https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Accept - AndrewHarvey

明白了，在这种情况下，我提到的问题#2不存在了。对于问题#2，如果接受webp格式，服务器会提供一个不同的HTML（其中IMG SRC中包含webp图像）吗？ - Punit S

这个想法是在src中放置像/image/1这样的url，并让Web服务器根据Accept头提供webp或jpg。因此，HTML对于每个人都是相同的。这样，如果有人选择右键单击图像并复制URL，然后分享它，接收者将永远不会获得无法打开的格式链接，我认为这是b#1的缺点。 #2的缺点是您可能无法在S3等上执行此操作，但是通过自己的Web服务器配置，您可以执行此操作。 - AndrewHarvey

另外，如果您正在利用CDN，那么/image/1方法可能无法正常工作。因此，您的图像请求将始终由Web服务器提供服务。 - Punit S

Answer 2

HTML5 <picture> 解决方案或 JavaScript 解决方案（检测 WebP 支持）更好，因为获取网站速度更快（请求更少）。考虑到性能原因，像 React 或 Vue 这样的框架通过 JS 填充网站的动态片段，HTML 只是“页面骨架”，这使得所有资源都可以缓存以获得更好的性能（因此只需下载和更新 API）。 HTML 解决方案的缺点是在较旧的浏览器中，<picture> 可能会显示不符合预期。您可能还会发现 此 文章有帮助。

- Zydnar

---

我不明白如何使用<picture>减少请求，以确定支持的Accept头。https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values - AndrewHarvey

@AndrewHarvey 这取决于架构，但无论如何它都更快，因为服务器不必编译模板或在编译视图之间进行选择。 - Zydnar

没有编译模板，只是Web服务器选择要提供的图像格式。 - AndrewHarvey

Answer 3

如果对于您的应用程序有意义，我建议通过检查“接受”标头在服务器端检测它，因为它不依赖于支持<picture>标签，可以在这里进行咨询。大多数现代浏览器都支持它，但旧版本不支持。

我能想到的客户端执行的原因是因为它是静态应用程序或者您无法控制服务器。

- learn2day