为什么Chrome不加载WEBP格式图片，而是渲染JPEG/PNG回退资源？

问题根因排查&解决方案 #

按优先级逐一验证即可定位问题：

• 检查Modernizr构建配置
  这是最高发的问题：自定义构建Modernizr时如果漏选了Webp检测项，Modernizr.webp会固定返回false，和实际浏览器支持情况无关。你可以替换为原生WebP检测逻辑，避免依赖第三方工具的配置问题：

function checkWebpSupport() {
  return new Promise((resolve) => {
    const testImg = new Image();
    testImg.onload = () => resolve(testImg.height === 2);
    testImg.onerror = () => resolve(false);
    testImg.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
  });
}

// 调用验证
checkWebpSupport().then(isSupported => {
  console.log(isSupported ? 'WebP supported' : 'WebP not supported');
});

• 检查Chrome环境异常
  1. 确认Chrome版本≥23，过低版本直接升级即可
  2. 禁用所有浏览器扩展，开启无痕模式测试：部分篡改请求头、广告拦截类扩展会移除请求头中的image/webp标识，导致浏览器按不支持WebP处理
  3. 不要用file://协议打开本地页面测试：部分Chrome版本在本地文件协议下对WebP的支持存在异常，建议用本地静态服务（如npx serve、vscode Live Server插件）启动站点测试
• 检查服务器响应配置
  打开DevTools网络面板，查看WebP资源的响应头：Content-Type必须为image/webp，如果返回application/octet-stream等错误类型，Chrome会判定资源不合法，触发回退逻辑，需要调整服务器的MIME类型配置。
• 检查代码语法细节
  你给出的<picture>标签示例语法正确，排查实际业务代码是否存在type="image/webp"拼写错误、srcset属性名写错、WebP资源地址拼写错误等低级问题。

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