<picture>标签中WebP降级图片为何被加载？如何优化？

你的问题核心是标准<picture>标签在某些场景下触发了WebP和PNG的同时加载，这可能是浏览器预加载机制、扩展干扰或特殊渲染逻辑导致的。以下是两种可靠的解决方案，确保仅在浏览器不支持WebP时才加载降级图片：

方案一：JavaScript检测WebP支持，动态设置图片源 #

通过检测浏览器对WebP的兼容性，再为图片设置对应资源，从根源避免冗余加载：

// 检测浏览器是否支持WebP格式
function supportsWebP() {
  return new Promise((resolve) => {
    const testImg = new Image();
    testImg.onload = () => resolve(testImg.width === 1);
    testImg.onerror = () => resolve(false);
    // 1x1像素的WebP测试图base64编码
    testImg.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  });
}

// 初始化页面中的WebP兼容图片
async function initWebPImages() {
  const targetImages = document.querySelectorAll('.webp-compatible-img');
  for (const img of targetImages) {
    const webpSrc = img.dataset.webpSrc;
    const fallbackSrc = img.dataset.fallbackSrc;
    const isSupported = await supportsWebP();
    img.src = isSupported ? webpSrc : fallbackSrc;
  }
}

// 页面加载完成后执行初始化
window.addEventListener('load', initWebPImages);

对应的HTML结构：

<img 
  class="webp-compatible-img" 
  data-webp-src="image.webp" 
  data-fallback-src="image.png" 
  width="500" 
  height="500" 
  loading="eager" 
  alt="text"
>

方案二：优化<picture>标签，延迟设置降级图片源 #

若偏好使用<picture>结构，可通过空初始src配合JS，仅在不支持WebP时填充降级地址，避免预加载触发：

<picture>
  <source type="image/webp" srcset="image.webp">
  <img 
    src="" 
    data-fallback-src="image.png" 
    width="500" 
    height="500" 
    loading="eager" 
    alt="text"
    class="webp-fallback-img"
  >
</picture>

<script>
async function setFallbackImages() {
  const isWebPSupported = await supportsWebP();
  if (!isWebPSupported) {
    document.querySelectorAll('.webp-fallback-img').forEach(img => {
      img.src = img.dataset.fallbackSrc;
    });
  }
}
setFallbackImages();
</script>

补充说明 #

标准<picture>标签规范中，浏览器应仅加载第一个匹配的资源，不会同时加载<img>的src。若你遇到同时加载的情况，大概率是浏览器预加载机制或第三方扩展的干扰，上述JS方案可以彻底规避这类问题，确保仅加载所需的图片资源，有效减少页面体积，提升测速工具评分。

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