从 1688 或供应商那里下载的商品详情页，经常是一张几千甚至上万像素高的长图。把它直接用于其他商品后台、独立站或跨境素材库时，常常需要先拆成多张图片。
最简单的做法是按照固定高度机械裁剪，但这样很容易把标题切成上下两半、把参数表从中间断开，甚至把商品主体拦腰切断。真正实用的详情页切图，不只是“每隔 1200 像素切一刀”，还要检查切点落在了什么位置。
本文介绍怎样把 1688 详情页长图自动切成多张图片，并尽量避开文字、商品主体和关键信息区域。
为什么 1688 详情页需要切图？
一张完整长图适合在供应商页面连续展示，但进入新的内容工作流后，分段图片通常更容易上传、翻译、检查和复用。
| 使用场景 | 为什么需要切图 |
|---|---|
| 跨境商品详情页 | 将中文长图拆成便于翻译和重新排序的内容模块 |
| 独立站产品页 | 按卖点、参数、场景和说明分段上传，便于页面管理 |
| 多语言图片制作 | 分片后逐段翻译和验收，比整张超长图更容易发现问题 |
| 社交媒体素材 | 从详情页中提取单独的卖点图、参数图和场景图 |
| 团队素材库 | 将一张长图拆成可单独命名、检索和复用的图片 |
| 上传尺寸受限 | 避免超长图片因高度、体积或后台限制无法上传 |
切图的目的不是破坏原详情页，而是把长图重新整理成更容易使用的内容单元。
固定高度切图为什么容易出问题？
1688 详情页通常由多个模块连续拼接而成，例如品牌区、主卖点、场景图、参数表、细节图、使用步骤和售后说明。每个模块的高度并不相同，切线如果只由固定数字决定，就可能落在内容正中间。
| 机械切图的常见问题 | 结果 |
|---|---|
| 切线穿过标题或卖点文字 | 上下两张图都无法单独阅读 |
| 切线穿过商品主体 | 商品被分成两半，画面不完整 |
| 参数表被拆开 | 表头和数据分离，容易产生理解错误 |
| 步骤图被打断 | 操作顺序和说明无法对应 |
| 在渐变或纹理中间切开 | 两张图单独使用时边缘显得突兀 |
| 每张切片高度完全一致 | 形式整齐，但内容边界不合理 |
因此，目标高度应该被理解为“希望每张图片大约多高”，而不是必须一像素不差的绝对切线。
什么是智能切点？
智能切点是在目标高度附近寻找更适合断开的区域，例如留白、色块分隔、背景变化较少的位置。它的作用是降低切断文字和主体的概率，让输出结果更接近人工观察后的分段。
不过，详情页版式差异很大，任何自动方法都不能保证每一刀绝对正确。最稳妥的流程仍然是：
设定目标高度 → 开启智能切点 → 查看预览线 → 必要时调整高度 → 再导出切片
如何自动切分 1688 详情页长图？
第一步：准备原始长图
优先使用清晰、完整且没有重复压缩的详情页长图。妙言小智长图切图工具支持 JPG、PNG 和 WebP 等常用图片格式。
如果图片体积或像素特别大，浏览器处理时可能占用较多内存。可以先保留原图备份，再根据用途决定是否压缩。
第二步：上传到长图切图工具
打开妙言小智长图切图工具，上传需要拆分的 1688 商品详情页。
图片会在浏览器本地完成预览、切片和导出，不需要把未公开的商品素材上传到服务器。
第三步：设置目标切片高度
可以从 1000、1200、1500 或 2000 像素等高度开始测试。具体选择取决于长图宽度、内容密度和后续用途，并不存在适用于所有详情页的唯一数值。
| 长图内容 | 可尝试的目标高度 | 选择思路 |
|---|---|---|
| 文字和参数较密集 | 1000–1200px | 切片较短，更方便逐段检查和翻译 |
| 常规商品详情页 | 1200–1500px | 在切片数量和内容完整度之间取得平衡 |
| 场景图和大幅展示图较多 | 1500–2000px | 减少将大画面拆得过碎 |
| 需要社媒或独立复用 | 根据模块调整 | 优先保证每张切片能独立表达一个主题 |
这些数值只是操作起点，不是平台强制标准。最终仍应以预览中的内容边界为准。
第四步：开启智能切点并检查预览
开启智能切点后，工具会在目标高度附近微调切线。重点检查：
- 切线是否穿过标题、段落或参数数字；
- 商品主体、人物和配件是否保持完整；
- 表格、步骤图和对比图是否被拆开；
- 切片开头和结尾是否有明显残缺内容；
- 每一张图能否单独理解。
如果某条切线位置不理想，可以修改目标高度后重新预览，而不是直接接受第一次结果。
第五步：开始切图并下载
确认切线后开始处理。结果生成后，可以逐张检查和下载，也可以根据页面提供的下载方式整理全部切片。
建议按照原详情页顺序命名，例如：
product-a-01-brand.webp
product-a-02-benefit.webp
product-a-03-parameter.webp
product-a-04-detail.webp
product-a-05-instruction.webp
清晰的编号和内容名称有助于后续翻译、上传和团队协作。
详情页应该先翻译还是先切图？
两种方式都可以，但适用场景不同。
| 工作方式 | 更适合的情况 | 注意事项 |
|---|---|---|
| 先切图，再翻译 | 长图过高、模块清晰、需要逐段审核 | 要保持切片顺序，避免漏翻 |
| 先翻译整张长图，再切图 | 希望统一处理整页术语和版面 | 翻译后文字长度变化，切点需要重新检查 |
| 原图和译图同时切片 | 需要逐张做前后对照验收 | 两个版本应使用相同编号和顺序 |
如果只有 JPG、PNG 或 WebP 成图，没有 PSD，可以先参考1688 长详情页多语言翻译方法，再决定是整图翻译还是分片翻译。
切图以后怎样重新拼成长详情页？
切图后的模块可能还需要重新排序、删减或组合。例如把中文供应商详情页中的品牌介绍删除，将核心卖点、参数和场景图重新组成新的详情页。
这时可以使用妙言小智电商长图拼接工具，按顺序添加处理后的图片，设置画布宽度和间距，再导出新的连续长图。
完整工作流可以是：
下载供应商长图 → 智能切图 → 删除不需要的模块 → 翻译或修改 → 调整顺序 → 重新拼成长图
导出前检查清单
- 长图是否完整上传，没有缺失顶部或底部内容；
- 切线没有穿过商品主体、人物或重要配件；
- 标题、参数表和操作步骤没有被拆成上下两半；
- 每张切片开头和结尾都相对自然；
- 切片顺序与原详情页一致；
- 图片格式和清晰度满足后续使用需要；
- 文件名包含商品、序号和内容类型；
- 多语言版本与原图切片能够一一对应；
- 超大图片处理后没有出现空白或导出失败；
- 正式上传前已经在目标页面预览实际展示效果。
常见问题 FAQ
1. 1688 详情页长图可以直接自动切成多张吗？
可以。上传长图后设置目标高度，开启智能切点并检查预览线，确认后即可生成多张切片。
2. 智能切图能保证不切断文字吗？
不能绝对保证。智能切点可以在目标高度附近寻找更适合的位置，降低切断文字和主体的概率，但不同详情页结构差异很大，导出前仍需人工查看预览。
3. 详情页切片高度设置多少合适？
可以从 1000、1200、1500 或 2000 像素开始测试。文字密集的页面适合较短切片，大幅场景图较多时可以适当增加高度。最终应以内容完整度为准。
4. 切图会降低图片清晰度吗？
切图本身不会主动缩放原图，只是按纵向区域导出。JPG 和 WebP 会受到编码质量影响，PNG 更适合保留清晰边缘。正式使用前建议检查导出结果。
5. 超长详情页为什么切图失败？
超大像素图片会占用较多浏览器内存。如果处理失败，可以关闭其他占用内存的页面，适当降低图片尺寸，或先把长图分成两段后再处理。
6. 切图会把图片上传到服务器吗？
当前长图切图、预览和导出在浏览器本地完成，图片不会离开你的电脑。
7. 图片翻译前切图好，还是翻译后切图好？
长图过高或需要逐段审核时，可以先切图再翻译；希望统一处理整页术语时，可以先翻译再切图。无论采用哪种方式，都要在文字和版面变化后重新检查切点。
8. 切好的图片还能重新拼成长图吗？
可以。删除不需要的模块、完成翻译或调整顺序后，可使用电商长图拼接工具重新生成连续详情页。
总结
1688 详情页长图切图的关键不是“切得一样高”，而是尽量让每张切片保留完整的文字、商品和信息模块。合理设置目标高度、开启智能切点并认真检查预览，可以显著减少机械裁剪造成的内容断裂。
现在可以打开妙言小智长图切图工具，上传一张详情页长图，先从 1200 或 1500 像素开始预览，再根据实际内容调整切点。