首先明确说：WebP在Chrome浏览器里不需要服务器环境就能显示，也不需要引入任何额外文件，你遇到的问题大概率是代码结构有误或者文件路径/本身的问题，咱们一步步排查：

1. 你的代码存在关键缺陷 #

你写的<picture>标签缺少了最核心的 fallback <img>元素！<picture>只是一个用于提供多源图片的容器，浏览器最终还是要通过<img>来渲染图片的。没有这个标签，哪怕Chrome支持WebP，也不知道该怎么展示内容。

修正后的代码应该是这样的：

<!-- 直接使用img标签的写法 -->
<img src="img/img.webp" alt="描述你的图片">

<!-- 使用picture标签做兼容的正确写法 -->
<picture>
  <source srcset="img/img.webp" type="image/webp">
  <source srcset="img/img.png" type="image/png">
  <!-- 必须添加这个img作为最终 fallback -->
  <img src="img/img.png" alt="描述你的图片">
</picture>

2. 其他可能的原因排查 #

• 文件路径错误：检查你的HTML文件和img文件夹的相对位置。比如如果你的HTML文件在根目录，img文件夹也在根目录，那img/img.webp是对的；但如果HTML在某个子文件夹里，路径要改成../img/img.webp（往上退一级）。可以右键Chrome里的图片占位符，选择“检查”，看Network面板里图片的请求状态，如果是404，就是路径不对。
• WebP文件损坏：试着用Chrome直接打开WebP文件（把img/img.webp拖到Chrome窗口里），如果能显示，说明文件没问题；如果不能，重新导出一个正常的WebP文件。
• Chrome版本过旧：虽然现在几乎所有Chrome版本都支持WebP，但如果你的版本是2014年之前的（非常少见），可能会不支持，升级到最新版即可。

总结 #

不需要部署到服务器，也不需要额外引入库，只要修正<picture>的结构，确保文件路径正确、WebP文件完好，Chrome就能正常显示WebP图片啦。

内容的提问来源于stack exchange，提问作者echo