WooCommerce移动端/桌面端加载全尺寸图片问题求助

环境配置 #

• Woocommerce
• Shoptimizer 主题
• CommerceKit Gallery
• EWWW Image Optimizer
• LiteSpeed 缓存插件

问题详情 #

1. Lighthouse 检测异常：移动端/桌面端均加载全尺寸图片（尽管存在更小适配尺寸），触发「图片尺寸适配」橙色警告；Largest Contentful Paint (LCP) 元素加载延迟，触发红色警告。
2. 图库设置：单产品页图库启用缩放功能，点击可通过灯箱查看全尺寸图片；采用内联占位图预加载，未使用LQIP。
3. 已尝试操作：手动修改加载图片尺寸后，大屏设备无法加载对应大尺寸图片，导致页面显示异常；Github上检索到同类问题但无有效解决方案。

当前图片输出代码 #

产品归档页图片代码 #

<picture>
  <source type="image/webp" data-srcset="image.jpg.webp">
  <img width="1920" height="1440" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAWgAQAAAACX6mN0AAAAAnRSTlMAAHaTzTgAAAFnSURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AxL6wABZkSIIAAAAABJRU5ErkJggg==" class="gallery-image lazyload" alt="" data-eio="p" 
  data-src="image.jpg.webp" decoding="async" data-srcset="image.jpg.webp 1920w, image-600x450.jpg.webp 600w, image-1024x768.jpg.webp 1024w, image-480x360.jpg.webp 480w, image-768x576.jpg.webp 768w, image-990x743.jpg.webp 990w, image-441x331.jpg.webp 441w" 
  data-sizes="auto" data-eio-rwidth="1920" data-eio-rheight="1440" />
  <noscript>
    <img width="1920" height="1440" src="image.jpg.webp" class="gallery-image" alt="" 
    srcset="image.jpg.webp 1920w, image-600x450.jpg.webp 600w, image-1024x768.jpg.webp 1024w, image-480x360.jpg.webp 480w, image-768x576.jpg.webp 768w, image-990x743.jpg.webp 990w, image-441x331.jpg.webp 441w" sizes="(max-width: 360px) 147px, (max-width: 1920px) 100vw, 1920px" data-eio="l" />
  </noscript>
</picture>

单产品图库主图代码（首图含fetchpriority="high"） #

<a class="swiper-slide-imglink" title="click to zoom-in" href="photo.jpg" itemprop="contentUrl" data-size="1920x1440">
  <img width="1920" height="1440" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="wp-post-image skip-lazy ewww_webp" alt="" title="photo" data-caption="" fetchpriority="high" decoding="async" 
  srcset="photo.jpg.webp 1920w, photo-600x450.jpg.webp 600w, photo-1024x768.jpg.webp 1024w, photo-480x360.jpg.webp 480w, photo-768x576.jpg.webp 768w, photo-990x743.jpg.webp 990w, photo-441x331.jpg.webp 441w" sizes="(max-width: 360px) 330px, (max-width: 1920px) 100vw, 1920px" 
  data-src-img="photo.jpg" 
  data-src-webp="photo.jpg.webp" data-eio="j" />
  <noscript>
    <img width="1920" height="1440" src="photo.jpg.webp" class="wp-post-image skip-lazy" alt="" title="photo" data-caption="" fetchpriority="high" decoding="async" 
    srcset="photo.jpg.webp 1920w, photo-600x450.jpg.webp 600w, photo-1024x768.jpg.webp 1024w, photo-480x360.jpg.webp 480w, photo-768x576.jpg.webp 768w, photo-990x743.jpg.webp 990w, photo-441x331.jpg.webp 441w" 
    sizes="(max-width: 360px) 330px, (max-width: 1920px) 100vw, 1920px" />
  </noscript>
</a>

单产品图库缩略图代码 #

<div thumbsSlider="" class="swiper-container cg-thumb-swiper cg-thumbs-4 cg-thumbs-count-5">
  <ul class="swiper-wrapper flex-control-nav" itemscope itemtype="http://schema.org/ImageGallery">
    <li class="swiper-slide " itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" data-variation-id="40475" data-index="0">
      <picture>
        <source type="image/webp" data-srcset="photo.jpg.webp">
        <img width="1920" height="1440" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAWgAQAAAACX6mN0AAAAAnRSTlMAAHaTzTgAAAFnSURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AxL6wABZkSIIAAAAABJRU5ErkJggg==" class="wp-post-image lazyload" alt="" title="photo" data-caption="" decoding="async" data-eio="p" 
        data-src="photo.jpg.webp" 
        
        data-srcset="photo.jpg.webp 1920w, photo-600x450.jpg.webp 600w, photo-1024x768.jpg.webp 1024w, photo-480x360.jpg.webp 480w, photo-768x576.jpg.webp 768w, photo-990x743.jpg.webp 990w, photo-441x331.jpg.webp 441w" 
        
        data-sizes="auto" 
        data-eio-rwidth="1920" data-eio-rheight="1440" />
        <noscript>
          <img width="1920" height="1440" src="photo.jpg.webp" class="wp-post-image" alt="" title="photo" data-caption="" decoding="async" 
          
          srcset="photo.jpg.webp 1920w, photo-600x450.jpg.webp 600w, photo-1024x768.jpg.webp 1024w, photo-480x360.jpg.webp 480w, photo-768x576.jpg.webp 768w, photo-990x743.jpg.webp 990w, photo-441x331.jpg.webp 441w" 
          
          sizes="(max-width: 360px) 75px, (max-width: 1920px) 100vw, 1920px" 
          
          data-eio="l" />
        </noscript>
      </picture>
    </li>

修复方案 #

1. 修正sizes属性逻辑 #

当前sizes设置（如(max-width: 1920px) 100vw）会让浏览器判定图片需占满视口，优先加载全尺寸图。需根据实际布局调整：

• 归档页图片：若为3列布局，修改为(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 25vw（根据实际列数调整）
• 单产品主图：若容器限制为1200px宽，修改为(max-width: 1200px) 100vw, 1200px
• 缩略图：直接设为固定显示宽度，如sizes="75px"（匹配缩略图容器尺寸）

2. 调整CommerceKit Gallery图片输出尺寸 #

通过钩子强制替换图库输出的图片尺寸，避免默认输出全尺寸：

// 修改单产品图库图片输出尺寸
add_filter('woocommerce_single_product_image_thumbnail_html', 'custom_cg_gallery_image_size', 10, 2);
function custom_cg_gallery_image_size($html, $attachment_id) {
    // 替换为你需要的尺寸，比如默认的'woocommerce_single'或自定义尺寸
    $image_size = 'woocommerce_single';
    $image_data = wp_get_attachment_image_srcset($attachment_id, $image_size);
    $image_sizes = wp_get_attachment_image_sizes($attachment_id, $image_size);
    
    // 替换原代码中的srcset和sizes规则
    $html = preg_replace('/srcset=".*?"/', 'srcset="'.$image_data.'"', $html);
    $html = preg_replace('/sizes=".*?"/', 'sizes="'.$image_sizes.'"', $html);
    
    return $html;
}

同时在Woocommerce设置→产品→显示中，设置「产品图片」的尺寸为合适值（如1200x900），确保系统生成对应尺寸的图片文件。

3. 优化LCP元素加载 #

• 保留主图的fetchpriority="high"属性，但确保其加载的是适配容器的尺寸，而非全尺寸。
• 检查EWWW Image Optimizer设置，确保所有生成的图片尺寸都同步生成WebP格式，避免浏览器 fallback 到体积更大的JPG。
• 确认LiteSpeed懒加载设置：主图保留skip-lazy类（禁止懒加载），缩略图可正常懒加载，但需保证sizes属性正确。

4. 解决大屏设备显示异常 #

修改尺寸后，确保Woocommerce生成了足够大的图片尺寸（如1920x1440），并在sizes规则中保留大屏适配逻辑，例如：

sizes="(max-width: 1200px) 100vw, 1920px"

这样大屏设备会加载不超过1920px的适配尺寸，同时保证灯箱仍能调用全尺寸原图。

5. 验证修复 #

修改后用Lighthouse重新检测，同时在手机、平板、桌面大屏等不同设备测试：

• 图片显示是否清晰无拉伸
• 灯箱是否能正常加载全尺寸图
• LCP延迟和图片尺寸适配警告是否消除

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