实用创作流程

商品图导出 WebP：核对文件与画质取舍

Ciyo 编辑团队2026年10月5日

抽象编辑插画；下文使用真实产品截图展示操作。

店主想缩小商品图文件，又不想改变已经确认的杯子。格式转换不同于重新生成图片：原图应保留不变，同时用候选导出展示取舍。

我们采用已有的虚构杯子图作为受控母版。它是合成编辑图片，不是真实商家摄影。Ciyo 获取原始字节，编码三个候选文件，并从实际文件制作检查板。下列结果只描述这张图片。

导出前记录母版

保留已确认的原图，检查尺寸、模式和透明度。图片在页面上看似透明，实际上可能含有不透明浅色背景；应依据文件数据选择格式。

本例 PNG 为 1024×1024 RGB，没有 alpha 通道，包含 1,105,072 字节。SHA-256 与按内容寻址的原始 URL 一致，编码后母版未变，因此 JPEG 无需先铺底色。

Ciyo 用 Pillow 创建无损 WebP、质量 85 的 WebP 和质量 90 的 JPEG，均保留原始尺寸。不同编码器的质量数字不能据此视为同等视觉质量。

若原图有透明度，应说明不透明导出如何处理。保留透明母版，并检查有意选择的铺底颜色，避免转换悄悄产生错误背景。

复制这段文件工作区提示词

逐字节使用这张现有商品 PNG，保留原图不变。另存无损 WebP、有损 WebP 质量 85 和 JPEG 质量 90，尺寸均不变。报告实际文件头格式、字节数、模式和 alpha。重新打开文件，比较无损解码像素与母版。制作带标签的对照板，各候选使用相同位置的真实裁切。不要生成新图片。

我们下载原始画布文件并独立解码。无损 WebP 的每个 RGB 像素都与母版一致。有损候选则不同：质量 85 的 WebP 最大通道差为 30，质量 90 的 JPEG 为 42。这些是本图的核对值，不是编码器总体质量排名。

本例有损 WebP 小很多，但只有可见变化可以接受，较小文件才有意义。应在顾客实际观看尺寸检查包装细字、颜色边界和纹理。

这张虚构图片的实测文件
文件	尺寸	字节数	解码像素与母版相同
PNG 母版	1024×1024	1,105,072	是
无损 WebP	1024×1024	627,352	是
WebP 质量 85	1024×1024	11,056	否
JPEG 质量 90	1024×1024	55,097	否

检查板包含橙色标签边缘的 72×72 裁切，以 3× 放大展示，每个裁切来自对应的保存文件。必须比较相同位置、相同尺度；改换裁切或显示尺寸会削弱判断。

板上的细节放大是明确标注的输出检查，与本文完整产品截图分开。它揭示局部变化；完整商品图则帮助判断这些变化在实际情境中是否重要。

Google 的 WebP 文档介绍了无损和有损编码，但格式能力并非你商店的实测结果。交付转换、缓存、布局和浏览器选择的图片，都可能改变顾客收到的内容。

集成后应检查下载资源和实际店铺页面。本例测量文件大小与像素，没有测加载速度、Core Web Vitals、转化率或跨浏览器店铺表现。

选择通过视觉标准的最小候选，同时保留原图与编码设置。文件名要明确，避免同事把实验性有损版本当成已确认的母版。

若商品细节必须准确，无损保留可能比更小的有损文件更合适。先用具有代表性的真实图片重复测试，再决定默认导出设置。

本例有损 WebP 更小，但结果取决于图片内容与编码设置，请测量自己的文件。

不是。格式与字节会变；本次测试中，解码后的 RGB 像素与母版相同。

不能。应另行测试实际交付图片与页面性能。

把真实母版放进 Ciyo，指定导出候选，检查细节后再验收交付文件。