Picovert

WooCommerce图片尺寸指南：产品、缩略图和图库

Picovert 团队2026-04-065 分钟阅读

WooCommerce 商店依靠图片销售产品 — 模糊或过大的图片会同时损害转化率和页面速度。 WooCommerce 自动处理图片裁剪和调整大小，但只有从一开始就以正确的尺寸和文件大小 上传图片才能运作良好。本指南涵盖了商店中每种图片类型所需的确切尺寸。

WooCommerce 如何处理图片

WooCommerce 从每次上传生成多种图片尺寸：

  • 单品图片：显示在产品详情页的大图
  • 产品缩略图：用于产品列表、购物车和相关产品的小图
  • 产品目录图片：用于商店、分类和存档页面的中等图片

这些尺寸在 WooCommerce → 设置 → 产品 → 显示 中设置。WordPress 也会生成自己的 图片尺寸，所以服务器上每张图片最终会有 5–10 个副本 — 这就是从一开始就使用尺寸正确的 原始图片的原因。

推荐的 WooCommerce 图片尺寸

  • 产品主图（单品页面）：最小 800×800 px，推荐 1000×1000 px（正方形）。 大多数 WooCommerce 主题使用正方形或近似正方形的产品图片。上传展示尺寸 2× 的图片以获得 视网膜清晰度 — 1000 px 在以 500 px 展示时看起来清晰
  • 目录 / 商店页面图片：600×600 px 至 800×800 px。这是产品网格中显示的 图片。正方形图片在产品间提供一致的布局 — 避免在目录中混用横向和纵向图片
  • 缩略图（购物车、相关产品）：150×150 px 至 300×300 px。 小而快；每张保持在 30 KB 以下
  • 产品图库图片：可缩放灯箱用 1000×1000 px。WooCommerce 缩放功能需要 更大的源图片 — 以 1200×1200 px 上传为缩放功能提供余量
  • 分类横幅 / 头图：根据主题，1200×400 px 至 1920×600 px。 这些是宽横向图片；将关键内容居中以避免在小屏幕上被裁剪

文件格式和质量

  • JPEG：用于所有产品摄影 — 服装、电子产品、食品、生活方式照片。 以 80–85% 质量导出。85% JPEG 质量的 1000×1000 产品照片应为 80–150 KB
  • PNG：仅在需要透明背景时使用 — 白色或自定义背景的独立产品照片。 PNG 产品图片通常是同等 JPEG 的 3–5 倍大；使用图片压缩来减小文件大小
  • WebP：现代主题和页面构建器支持 WebP；在相同质量下比 JPEG 小 25–35%。如果您的主题和 CDN 支持，请在上传前将 JPEG 产品图片转换为 WebP
  • 避免 TIFF、BMP、HEIC：这些格式未针对网络交付优化，会显著增加 加载时间

文件大小目标

  • 产品主图：每张图片 200 KB 以下。1000×1000 JPEG 目标 80–150 KB
  • 目录图片：每张 100 KB 以下
  • 缩略图：每张 30 KB 以下
  • 图库图片：每张 200 KB 以下 — 有 5 张图库图片的产品页面总重量不超过 1 MB

大图片是 WooCommerce 页面缓慢的最常见原因。Google PageSpeed Insights 会对超过 200 KB 的图片发出警告 — 商店速度慢会在客户看到产品之前就让他们离开。上传前请使用图片压缩。

宽高比：为什么正方形效果最好

WooCommerce 主题期望产品间有一致的图片尺寸。如果一个产品图片是 800×600（横向）， 另一个是 600×900（纵向），WooCommerce 会将两者都裁剪为正方形，可能会裁掉照片的 重要部分。

  • 上传前将所有产品图片拍摄或裁剪为 1:1 正方形比例。这让您对缩略图和目录中 显示的内容拥有最大控制权
  • 使用图片裁剪将产品照片转换为正方形，在所有边用等量 空白将产品居中
  • 对于服装或高挑产品，如果您的主题支持非正方形图片，4:5 比例（800×1000 px）也可以 使用 — 查看主题文档了解预期比例

更改尺寸后重新生成缩略图

如果您在上传产品后更改了 WooCommerce 图片尺寸，现有图片不会自动更新。 您需要重新生成缩略图：

  • 安装免费的 Regenerate Thumbnails 插件，在更改图片尺寸设置后运行
  • 或使用 WP-CLI：wp media regenerate --all
  • 在大型商店中重新生成缩略图可能需要几分钟 — 在非高峰时段运行

分步指南：准备 WooCommerce 产品图片

  1. 以 1200×1200 px 或更大尺寸拍摄或获取产品图片。正方形图片可防止 WooCommerce 意外裁剪
  2. 在所有边用等量空白将产品居中，裁剪为 1:1 正方形比例。 一致的空白打造专业的目录外观
  3. 主产品图片和图库调整大小至 1000×1000 px，或仅目录图片 调整至 600×600 px
  4. 产品图片压缩至 150 KB 以下。使用 80–85% JPEG 质量 或转换为 WebP 以获得更小的文件
  5. 将优化后的图片作为 WooCommerce 产品图片上传。在产品编辑器中将图库图片 添加为附加产品照片

WooCommerce 图片尺寸快速参考

  • 产品主图：1000×1000 px，JPEG 80–85%，150 KB 以下
  • 目录图片：600×600 px 至 800×800 px，100 KB 以下
  • 缩略图：150×150 px 至 300×300 px，30 KB 以下
  • 图库（可缩放）：1200×1200 px，200 KB 以下
  • 分类横幅：1200×400 px 至 1920×600 px，JPEG
  • 比例：所有产品图片使用 1:1 正方形