Optimize Product Images for Amazon, Shopify, and the Web
Optimize Product Images for Amazon, Shopify, and the Web
针对亚马逊、Shopify 及网页环境优化产品图片
Product Images Need to Work for Marketplaces and the Web If you sell on Amazon or Shopify, image optimization is not just a performance task, it is also a requirements task. Amazon cares about white backgrounds, square dimensions, and JPEG output. Shopify cares about storefront clarity, fast load times, and consistent product presentation. Then your own site still needs responsive image delivery, modern formats, and smaller files for Core Web Vitals. This guide covers the broad image optimization workflow behind all of those requirements: format selection, compression, responsive delivery, and automation. If you want the marketplace-specific implementations, start with Optimize Product Image for Amazon or Optimize Product Image for Shopify, then come back here for the deeper optimization framework. 产品图片必须同时满足电商平台和网页的需求。如果你在亚马逊或 Shopify 上销售商品，图片优化不仅是性能优化的任务，更是合规性要求。亚马逊关注白色背景、方形尺寸和 JPEG 输出；Shopify 关注店面清晰度、加载速度和产品展示的一致性。此外，你自己的网站还需要响应式图片交付、现代格式以及更小的文件体积，以满足核心网页指标（Core Web Vitals）。本指南涵盖了满足上述所有要求背后的广泛图片优化工作流：格式选择、压缩、响应式交付和自动化。如果你需要针对特定平台的实现方案，请先阅读《针对亚马逊优化产品图片》或《针对 Shopify 优化产品图片》，然后再回到这里深入了解优化框架。
Images Are the Heaviest Part of the Web The median web page transfers over 2 MB of images. For media-heavy sites — e-commerce, real estate, travel, news — that number climbs to 5-10 MB. On a 4G mobile connection, that’s 3-8 seconds of loading just for images. Google measures this. Largest Contentful Paint (LCP) — the time until the largest visible element renders — is a Core Web Vital that directly affects search ranking. For most pages, the largest element is an image. Slow images mean lower rankings, higher bounce rates, and fewer conversions. Image optimization isn’t a nice-to-have. It’s the single highest-impact performance improvement for most websites. This guide covers the complete workflow: choosing formats, compressing effectively, sizing for different screens, and building automated pipelines. 图片是网页中最沉重的部分。平均网页传输的图片大小超过 2 MB。对于媒体密集型网站（如电商、房地产、旅游、新闻），这一数字会攀升至 5-10 MB。在 4G 移动网络连接下，仅加载图片就需要 3-8 秒。谷歌对此有明确的衡量标准。最大内容渲染时间（LCP）——即最大可见元素渲染所需的时间——是一项直接影响搜索排名的核心网页指标。对于大多数页面，这个最大元素通常就是图片。图片加载缓慢意味着排名下降、跳出率升高以及转化率降低。图片优化并非“锦上添花”，而是大多数网站性能提升中影响最大的一环。本指南涵盖了完整的工作流：选择格式、有效压缩、针对不同屏幕调整尺寸以及构建自动化流水线。
Image Formats: Choosing the Right One Four formats dominate the web. Each has a specific use case. 图片格式：选择合适的格式。目前网页上主要有四种主流格式，每种都有其特定的应用场景。
JPEG The workhorse of web images since 1992. Lossy compression with a quality parameter (1-100) that controls the size-quality tradeoff. Universal browser support. Use for: photographs, complex images with many colors, images where a small quality loss is acceptable. Quality guidelines: 80-90 for hero images, 70-80 for thumbnails and cards, 60-70 for background images. Limitations: no transparency, no lossless mode, compression artifacts visible at low quality settings (blocky patterns around edges). JPEG：自 1992 年以来网页图片的中流砥柱。采用有损压缩，通过质量参数（1-100）控制体积与质量的平衡。拥有通用的浏览器支持。适用于：照片、色彩复杂的图片，以及允许轻微质量损失的场景。质量建议：首屏大图 80-90，缩略图和卡片 70-80，背景图 60-70。局限性：不支持透明度，无无损模式，低质量设置下会出现压缩伪影（边缘出现块状图案）。
PNG Lossless compression. Supports transparency (alpha channel). Files are significantly larger than JPEG for photographs. Use for: screenshots, graphics with sharp edges and text, images requiring transparency, icons and logos. Limitations: large file sizes for photos (3-5x larger than equivalent JPEG), no lossy mode for size reduction. PNG：无损压缩。支持透明度（Alpha 通道）。对于照片而言，文件体积远大于 JPEG。适用于：截图、边缘锐利的图形和文字、需要透明度的图片、图标和 Logo。局限性：照片文件体积过大（是同等 JPEG 的 3-5 倍），没有用于减小体积的有损模式。
WebP Developed by Google, now supported by 97%+ of browsers. Offers both lossy and lossless modes, plus transparency. 25-34% smaller than JPEG at equivalent quality. Use for: everything on the web where browser support isn’t a concern. WebP should be your default format. Quality guidelines: 80-85 for general web images, 75 for thumbnails, 85-90 for hero images. Limitations: slightly less saturated colors than JPEG at very low quality settings, some older tools don’t support it. WebP：由谷歌开发，目前 97% 以上的浏览器支持。提供有损和无损模式，并支持透明度。在同等质量下，比 JPEG 小 25-34%。适用于：所有无需担心浏览器兼容性的网页场景。WebP 应作为你的默认格式。质量建议：通用网页图片 80-85，缩略图 75，首屏大图 85-90。局限性：在极低质量设置下，色彩饱和度略低于 JPEG，部分旧工具不支持。
AVIF The newest contender. Based on the AV1 video codec. 50% smaller than JPEG in many cases. Supports transparency, HDR, and wide color gamut. 92%+ browser support. Use for: hero images and product photos where maximum compression matters. Best results on photographic content. Quality guidelines: 65-75 for general use (AVIF maintains quality at lower numbers than JPEG), 75-80 for hero images. Limitations: slower to encode than WebP, slightly less browser support, some edge cases with very detailed textures. AVIF：最新的竞争者。基于 AV1 视频编码。在许多情况下比 JPEG 小 50%。支持透明度、HDR 和广色域。92% 以上的浏览器支持。适用于：对压缩率要求极高的首屏大图和产品照片。在摄影内容上表现最佳。质量建议：通用场景 65-75（AVIF 在较低数值下仍能保持质量），首屏大图 75-80。局限性：编码速度比 WebP 慢，浏览器支持度略低，在处理极细致纹理时存在一些边缘情况。
The Decision Framework For most websites, the hierarchy is: Serve AVIF when the browser supports it (hero images, product photos); Fall back to WebP for broad compatibility; Fall back to JPEG for legacy contexts (email, old systems); Use PNG only when you need lossless quality or transparency. Implement this with the <picture> element.
决策框架：对于大多数网站，优先级如下：当浏览器支持时优先提供 AVIF（首屏大图、产品照片）；回退到 WebP 以实现广泛兼容；在旧环境（邮件、老旧系统）中回退到 JPEG；仅在需要无损质量或透明度时使用 PNG。通过 <picture> 元素实现：
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Hero image" width="1200" height="800">
</picture>Compression: Finding the Quality Sweet Spot Compression quality has diminishing returns. The difference between quality 100 and quality 90 is invisible to most viewers. The file size difference is 40-60%. The Quality Curve At quality 100, you’re storing nearly every pixel perfectly. At quality 90, you’re losing imperceptible detail. At quality 80, most viewers can’t tell the difference from the original. Below quality 60, artifacts become visible — blocky patterns in JPEG, color banding in WebP. 压缩：寻找质量的最佳平衡点。压缩质量存在边际效应递减。对于大多数观众来说，质量 100 和 90 之间的差异是不可见的，但文件大小差异却高达 40-60%。质量曲线：在质量 100 时，你几乎完美地存储了每个像素；在质量 90 时，你丢失的是肉眼无法察觉的细节；在质量 80 时，大多数观众无法分辨出与原图的区别。低于质量 60 时，伪影开始显现——JPEG 会出现块状图案，WebP 会出现色彩断层。
The practical sweet spots by format: 各格式的实用最佳平衡点：
| Format | High quality | Standard web | Thumbnails | Background |
|---|---|---|---|---|
| JPEG | 90 | 80-85 | 70-75 | 60-70 |
| WebP | 90 | 80-85 | 75 | 65-70 |
| AVIF | 80 | 65-75 | 60-65 | 50-60 |
AVIF maintains visual quality at lower numbers than JPEG and WebP — a quality 70 AVIF often looks as good as a quality 85 JPEG. AVIF 在较低数值下仍能保持视觉质量——质量 70 的 AVIF 通常看起来与质量 85 的 JPEG 一样好。
Compress to a Target File Size Sometimes the requirement isn’t “quality 85” — it’s “under 500KB.” Email attachment limits, mobile app asset budgets, CMS upload restrictions. The Iteration Layer’s Image Transformation API has a compress_to_size operation that handles this.
压缩至目标文件大小：有时需求不是“质量 85”，而是“小于 500KB”。这常见于邮件附件限制、移动应用资源预算、CMS 上传限制等场景。Iteration Layer 的图片转换 API 提供了 compress_to_size 操作来处理此需求：
(Code example omitted for brevity)
The operation uses a quality-first strategy: it reduces JPEG quality from 85 down to 50. If the image is still over the target, it reduces dimensions. Quality-first preserves visual quality better than dimension-first because quality reduction removes imperceptible detail, while dimension reduction removes visible content. 该操作采用“质量优先”策略：它首先将 JPEG 质量从 85 降低到 50。如果图片仍然超过目标大小，则会缩小尺寸。“质量优先”比“尺寸优先”更能保留视觉质量，因为降低质量移除的是不可见的细节，而缩小尺寸则会移除可见的内容。
Resizing: Never Serve Larger Than Display Size A 4000x3000 photo displayed at 800x600 wastes 96% of its pixels. 调整尺寸：永远不要提供大于显示尺寸的图片。一张 4000x3000 的照片如果以 800x600 显示，就浪费了 96% 的像素。