商品图片是顾客认识商品的主要方式。在 SHOPLINE 网上商店上传图片时，图片的尺寸、格式与色彩设置会影响前台显示的清晰度与色彩。本文说明各类图片的建议规格，以及上传失败、色差或模糊时的处理方式。
开始前请注意：SHOPLINE 的商品、商品分类与网上商店页面支持 JPG、PNG、GIF 三种图片格式，单张图片的文件大小不得超过 10 MB。
一、商店图片的建议尺寸与格式
商店图片的建议尺寸会根据图片放置位置而有所不同。以下分别按照图片高度、图片宽度与图片格式进行说明。
1. 图片高度
建议全店所有图片的高度小于 3000px（像素）。
2. 图片宽度
SHOPLINE 图片的建议宽度会根据图片放置位置而不同，主要分为商品与商品分类图片、网上商店页面图片两类。
商品与商品分类图片的建议宽度
- 商品图片：建议宽度 750px
- 更多商品图片：建议宽度 800px
- 商品分类的横幅图片：建议宽度 2000px 至 3000px
网上商店页面图片的建议宽度
A. 高级页面、文字页面与商品描述的图片
- 高级页面的一般单张图片：建议宽度 1200px 至 2000px
- 高级页面“全宽图片模式”的横幅图片：建议宽度 2000px 至 3000px
- 文字页面与商品描述中，通过网址嵌入的图片：建议宽度 1000px 至 2000px
B. 使用新版编辑器创建的高级页面图片
如果高级页面是使用新版编辑器创建的，请根据桌面版与手机版，分别准备以下比例与尺寸的图片。
| 图片比例 | 桌面版建议尺寸 | 手机版建议尺寸 |
|---|---|---|
| 横向长方形（2：1） | 2000 × 1000px | 1080 × 540px |
| 纵向长方形（3：4） | 1500 × 2000px | 810 × 1080px |
| 正方形（1：1） | 2000 × 2000px | 1080 × 1080px |
＊注意：部分设计模板另有图片建议尺寸，请点击 商店模板 查看各模板的说明。
3. 图片格式
商品、商品分类与网上商店页面的图片都支持 JPG、PNG、GIF 三种格式。
＊注意：部分浏览器在选择文件时，无法选择 GIF 或 PNG 文件。如遇此情况，请直接将图片拖动到图片处理区域（下图虚线框内的范围）完成上传。
二、图片为什么上传失败？
图片上传失败最常见的原因有两个：文件大小超过上限，或 GIF 动图的帧数过多。请按照以下项目逐一检查。
1. 图片文件是否超过 10 MB？
单张图片的文件大小上限为 10 MB。如果图片超过 10 MB，将无法上传，请将文件缩小至 10 MB 以下后再重新上传。
2. GIF 可以正常打开却无法上传，该怎么办？
GIF 动图是由多张静态画面依次播放组成，每一张画面称为一个帧（frame）。如果 GIF 能在电脑上正常打开，却无法上传到网上商店后台，请检查 GIF 的帧数是否过多。帧数上限会因 GIF 尺寸而不同：
- 尺寸约 1920 × 1000px 的 GIF：帧数最多 20 张
- 尺寸约 800 × 400px 的 GIF：帧数最多 120 张
您可以使用第三方工具 ezgif 制作 GIF，或检查 GIF 的帧数。
三、图片上传后出现色差或模糊，该如何处理？
图片上传到网上商店后台后，如果颜色与原始文件不同或画面模糊，通常与图片的色彩模式、色彩配置文件、图片宽度或原始文件类型有关。请根据以下四种情况进行检查。
1. 图片的色彩模式是否为 CMYK？
CMYK 是印刷使用的色彩模式，网页显示则使用 RGB 色彩模式。如果您的图片是 CMYK 色彩模式，请先在图片编辑软件中转换为 RGB，再上传至后台（参考下方截图）。
2. 色彩配置文件不一致造成色差，该如何转换保存？
色彩配置文件（color profile）是图片文件中用于定义颜色显示方式的设置。由于显示设备与制作图片的方式不同，图片可能出现色差。如果发生色差，请使用图片编辑软件重新转换保存图片的色彩配置文件，使图片在不同设备上显示一致的颜色。以下分别说明 Photoshop 与第三方免费工具 Fotor 的操作方式，请任选其一使用。
A. 使用 Photoshop 转换保存色彩配置文件
a. 前往“编辑”>“转换为配置文件”，将配置文件转换为 sRGB。
b. 前往“文件”>“导出”>“存储为 Web 所用格式”，勾选“优化”与“嵌入色彩配置文件”，质量选择最佳（100%），再保存输出。
B. 使用 Fotor 转换保存图片
a. 注册或登录 Fotor 后，点击“导入图片”，选择要处理的图片，再根据需要编辑、调整图片颜色等项目。
b. 点击“保存”，选择文件格式，质量选择“高清”后下载。
3. 图片宽度是否低于建议尺寸？
如果图片宽度低于建议宽度，上传后可能显示模糊。请对照本文中各类图片的建议宽度，重新准备图片。
4. 图片中有大量文字或线条，该如何处理？
如果图片中有大量文字或线条，建议直接从原始设计文件转换保存，例如将 PSD 文件（Adobe Photoshop 文件）或 AI 文件（Adobe Illustrator 文件）转换保存为 PNG 文件后再上传，以获得最佳的呈现效果。
四、名词解释
| 名词 | 说明 |
|---|---|
| px（像素） | 图片尺寸的单位，例如宽度 750px 代表图片宽度为 750 个像素。 |
| CMYK／RGB | CMYK 是印刷使用的色彩模式；RGB 是屏幕与网页显示使用的色彩模式。 |
| sRGB | 一种网页常用的 RGB 色彩配置文件。 |
| 色彩配置文件（color profile） | 图片文件中用于定义颜色显示方式的设置。 |
| 帧（frame） | 组成 GIF 动画的每一张静态画面。 |
延伸阅读
最后更新时间：2026 年 11 月 13 日
评论