做电商选品和代发这几年我几乎天天泡在1688上。最让人头疼的往往不是找款而是把商品图干净利落地存下来——右键另存为存下来的是拼接长图想截个细节图又糊得没法用手机上看中一款还得一张张截图。这篇文章就把我实际用下来最顺手的几条存图路子整理出来分电脑端和手机端从零插件的手工方法到效率翻倍的批量工具都会讲到不管你是刚入行的新手卖家还是管着十几个店铺的老运营照着操作基本都能直接上手。1. 先搞懂1688的图片保护机制才知道该从哪里下手很多人一上来就抱怨1688的图根本没法存其实不是没法存而是平台的图片展示逻辑跟普通网站不一样。你得先知道它在哪里设了门槛才能绕过去。1.1 主图拼接你右键存下来的根本不是单张商品图1688PC端的商品主图区域前端展示的根本不是五张独立图片而是把五张图拼成了一张长图或者用CSS雪碧图的方式渲染。你按下图片另存为存下来的是这一整张拼接后的长条。这给做选品表的人添了大麻烦五张图挤在一张文件里想单独用第二张细节图还得自己切图。平台这么干主要是两个原因一是防止同行用爬虫一键抓取主图二是减少图片请求数量提升页面加载速度。理解了这一点你就能明白为什么右键保存这条路在PC端基本是死的。真正的突破口是找到渲染背后单独的图片地址而不是去跟拼接后的成品较劲。1.2 背景图渲染与懒加载页面结构里的隐形图片另一个惯用手段是把商品主图做成CSS背景图也就是用background-image属性加载而不是传统的img标签。浏览器右键菜单对背景图默认没有图片另存为选项这就是为什么你对着主图狂点右键菜单里只有在新标签页中打开图片不可用或者干脆什么都没有。还有就是懒加载机制。1688的商品列表和详情页里图片是滚动到可视区域才真正请求下载的。你要是打开页面直接抓图抓到的往往只有第一屏的内容往下滚了多少图才加载了多少。做批量提取的时候如果没把页面从头滚到尾提取结果一定会漏图。这两个坑叠加在一起导致很多通用型网页图片下载工具在1688上失灵不是工具不好是它不知道页面里还存在背景图和未加载的占位符。1.3 URL里的尺寸参数小图、大图和原图的规律阿里系图片CDNimg.alicdn.com有个特点同一张原始图片会根据展示场景生成不同尺寸的缩略版本。你在页面上看到的图片地址往往带着类似_430x430q90.jpg或_350x350.jpg这样的尺寸后缀这是CDN生成的指定宽高版本。直接右键保存这种地址拿到的就是压缩后的展示图。处理思路也不复杂把这个尺寸参数去掉或者改成更大的尺寸值比如_750x750、_1000x1000再重新请求CDN通常会返回对应尺寸的版本很多情况下能直接拿到接近原图的清晰度。这是阿里系图片服务公开的规则不算什么黑科技。需要注意的是URL格式会随平台改版而变化参数位置不固定所以关键不是死记格式而是养成看到缩略图URL先改参数试试的习惯。2. 原生方法不吃插件开发者工具手动提取商品图如果你想完全不用第三方插件也不想装乱七八糟的软件浏览器开发者工具就是最可靠的武器。虽然第一次操作有点繁琐但熟练之后一分钟内也能搞定一张商品的主图全家福。2.1 从Elements面板找到隐藏的背景图地址以Chrome浏览器为例打开商品详情页后按F12打开开发者工具点击左上角的选择器图标然后把鼠标悬停在主图区域上。这时候Elements面板会自动高亮当前选中的DOM节点仔细看右侧的Styles选项卡找到background-image那一行里面url(...)括号里的地址就是当前这张主图的真实请求地址。注意因为鼠标悬停会切换主图这个背景图会跟着变所以你要看哪张图就把鼠标移到对应的缩略图上再去Elements面板里刷新一下样式。整个过程有点像是用开发者工具当放大镜逼它把藏起来的图交出来。找到地址后浏览器地址栏直接打开就能看到一张干干净净的单图再右键保存即可。2.2 从Network面板过滤出高清原图如果想更快还可以用Network面板。打开开发者工具切换到Network标签刷新商品页面然后在类型筛选里点Img资源管理器里会列出页面加载过的所有图片请求。找文件名里带item_pic或者商品ID特征的点开看预览图尺寸大、清晰的通常就是主图原地址。之前说过URL里带尺寸后缀的问题在Network面板里记得点中某个图片请求在Headers里查看完整的请求地址如果发现430x430这类参数在开发者工具里双击地址改成800x800试试Response区域会直接变化说明服务器返回了更大尺寸的图。这个技巧在处理看着是高清图、存下来却很糊的问题时特别管用。2.3 详情页的图其实可以直接另存为很多新手不知道1688的商品详情页图片就是往下滑看到的大段介绍图、细节图、尺码表是普通的img标签直接右键另存为完全没问题没有拼接也没有禁用。因为这些图本身就是由供应商上传到详情页内容里的平台对详情页的防盗措施没那么强。所以如果你的核心诉求是把这款产品的细节图和文字说明都留着直接拉到详情页中间一张张右键保存就行。我平时做选品对比表时主图用开发者工具提取细节图直接详情页另存为配合起来效率还可以。唯一要注意的是详情页也是懒加载的得先把页面滚动到底部让所有图片都加载出来之后再操作。2.4 用一段书签脚本把取图效率提上去嫌手动一个个找太慢可以把取图逻辑写成一段小脚本保存为浏览器书签。以后打开任意1688页面点击这个书签脚本自动扫描页面上所有img标签和背景图把提取到的图片地址显示出来复制即可。这就是常说的bookmarklet书签小工具。下面是能直接用的版本javascript:(function(){ var urls {}; var imgs document.querySelectorAll(img); for (var i 0; i imgs.length; i) { var u imgs[i].currentSrc || imgs[i].src; if (u u.indexOf(data:) ! 0) urls[u] true; } var all document.querySelectorAll(*); for (var j 0; j all.length; j) { var bg window.getComputedStyle(all[j]).backgroundImage; if (bg bg ! none) { var m bg.match(/url\([]?(.*?)[]?\)/); if (m) urls[m[1]] true; } } var out Object.keys(urls); if (out.length 0) { alert(未提取到图片); } else { console.log(out.join(\n)); alert(已提取 out.length 个图片地址请打开控制台查看和复制); } })();保存方法在浏览器里新建一个书签名称随意比如提取页面图片地址栏粘贴上面整段代码。以后在任何商品页点击这个书签控制台里就会列出页面加载过的所有图片地址。再配合批量复制和一个图片批量下载/嗅探场景的扩展效率能提升不少。这段脚本纯粹在本地运行不用安装任何后台服务安全性是可控的。3. 图片提取插件与批量工具效率与坑并存手动方法适合偶尔存几张但如果你是每天都要看几十款款的选品专员或者要给整个店铺做素材库就必须上批量工具了。3.1 浏览器图片提取类扩展的工作原理现在Chrome和Edge的应用商店里有很多图片提取图片下载助手类的扩展。它们的核心原理很简单解析当前页面的DOM结构把所有img元素和背景图中符合尺寸阈值的图片URL提取出来然后一键批量下载。听起来很万能但淘宝系页面恰恰是它们的弱项。因为前面说过1688的主图大量使用背景图和懒加载很多通用型扩展扫描时看到的是没加载出来的占位元素提取到的URL无效。有些扩展也不熟悉阿里CDN的尺寸参数存下来一堆缩略图小文件。所以用这类工具时识别能力和URL预处理能力比能不能提取更重要。建议优先选支持自定义过滤规则可以一键去除尺寸参数后缀的扩展而不是单纯追求能扫出多少张图。3.2 四种常见存图方式的横向对比下面这张表是我在实际工作中对几种存图方式的使用感受供参考方式上手难度单图速度批量能力适用场景右键另存为最低慢无偶尔存一张不挑图开发者工具提取中等中等无需要高清晰度单图时书签脚本控制台中等快中收集整页图地址列表图片提取扩展批量下载低快强一次存几十张选品图实际使用中我的习惯是右键看详情页大图、书签脚本取主图列表、批量下载丢给扩展。三种手段组合起来基本覆盖了所有场景。3.3 使用插件时必须避开的三个坑第一个坑是扩展下载了一堆无关图。产品详情页里除了商品图还有首页推荐、侧边栏广告、品牌Logo等一堆杂图。解决方法很简单先开启扩展的当前标签页提取功能不要在整站范围提取过滤规则里设置最小宽度和高度比如只保留大于500像素的图片。第二个坑是提取到的URL没带上协议头。有些扩展显示的地址是//img.alicdn.com/...这种少了一个https:的格式直接复制当链接打不开或者被某些图片查看器拒绝。注意手动补全。第三个坑是权限问题。安装任何扩展前建议看一下它申请的权限凡是要求读取所有网站数据的你就要权衡一下一个存图工具真的需要读取你在所有网站上的数据吗我们存的是商品图不是把自己账号信息也搭进去。这个隐私意识还是要有的。4. 手机端与采购群场景移动办公怎么高效存图电脑前存图只是基础操作真正考验人的是手机上看款、群里发图那种场景。给你发个链接让你看下这个款结果你手机上连原图都保存不了就很被动。4.1 1688 APP里的保底操作1688官方APP的图片保存限制在不同版本里变过好几次。现在的常规情况是商品详情页里的主图长按后部分版本会弹出保存到相册的选项但有的版本只有分享图片而不让直接保存。更普遍的问题是平台为了防搬运会把主图区域做成轮播模式你保存下来的可能是某一帧的截图而不是原图。我的建议是不要把官方APP当作存图主力工具它只能作为临时查看用的终端。真正需要图的时候用手机浏览器打开网页版按下一段说的方法操作成功率更高。4.2 手机浏览器里提取商品图的路径手机浏览器Chrome、Safari、Edge也支持请求桌面版网站在1688商品页切换成桌面版后整个页面布局会和电脑上一样然后你就可以用长按图片识别或者内置的网页图片保存功能来取图。当然最稳妥的还是复制商品链接在电脑端用开发者工具提取一遍高清原图。还有一个小技巧很多商品主图链接被拼接成长图后APP里点开大图再截图清晰度也会丢失。但如果你把商品链接用手机浏览器打开触屏版页面触屏版的主图往往是独立的img标签长按就能保存单张图。这是很多老采购员日常在用的办法操作方法就是在浏览器菜单里切换无图模式或简版页面触发的逻辑。不同时期、不同机型的呈现会有差异但值得试试。4.3 采购群和临时沟通里的批量保存如果是微信或钉钉采购群里直接发的商品图那就简单多了——点开大图长按保存系统会保留原画质。怕的是别人发你一个压缩包这里面可能有几张被微信压缩过的图清晰度已经损失了这才是真正的坑。我的习惯是遇到这种批量发图的情况第一时间让对方发到网盘或者用在线文件夹分享这样拿到的才是原始大图。如果已经在群聊里了那也没办法补救只能一张张保存。另外如果在群里看到一张特别满意的竞品图建议顺手保存到自己的素材云盘里并做好备注。这一步虽然简单但后期要用的时候会很感激当时多按的那一下。5. 存图后的素材管理命名、归档与授权边界图存下来了接下来就是管理。很多人的电脑桌面就是大型图片停车场真要找图的时候比没存还痛苦。这一节聊聊存图之后的整理工作以及存图时必须想清楚的版权问题。5.1 按供应商与商品维度建目录我一直用的目录结构是分类/供应商/商品ID_商品名例如选品库/ 家居/ 厂家A_编号123_懒人沙发/ 主图_01.jpg 主图_02.jpg 细节图_记录01.jpg 报价截图.png这样做的好处是每次要跟供应商对款式或者做采购单直接把对应文件夹打包发过去就行不会出现图找到了但不知道是哪家的这种尴尬。分类层级控制在两级以内太深了反而不好记。5.2 命名规范决定你三个月后还能不能找到图命名这块强烈建议统一格式用供应商简称_货号_图序来命名比如恒达_HD3301_01.jpg。货号在供应商那儿就是商品身份证你命名里带上它后续搜索、对单、做数据表都方便。日常命名时顺手做这几件事第一删掉下载文件里默认的乱码数字序号第二把同款式不同角度的图用01、02、03排好第三重要图片另外加一个标签比如已确认报价无现货待问。花不了几秒钟却能避免几个月后的返工。5.3 商用之前先确认图片来源与授权这一条必须单独说清楚。保存1688商品图做内部参考、学习分析一般问题不大但如果要把图直接用到自己的店铺、详情页、宣传物料里就必须考虑版权了。1688上的图有的是供应商自己拍的版权在商家有的是工厂提供给分销商的授权图和数据包。对于后者分销商在授权范围内的使用是合规的但你得确认自己的账号有没有代理或分销的权限。直接复制同行或者别家的图来用哪怕只是改了背景一旦被图片来源方投诉或举证平台会判定为盗图轻则下架链接重则扣分封店。所以安全的路径只有两条要么和供应商确认能不能用、让供应商开授权要么自己重新拍照修图。存图不意味着可以随便用这一点每个电商人都要有数。我的个人操作体会是1688存图这件事刚入门时觉得平台好像处处跟你对着干其实本质上只是它的展示机制比较特殊。摸清楚原理之后用开发者工具拿原图、用书签脚本列地址、用扩展批量下载基本能覆盖所有日常场景。最后再说个小技巧把自己常用的一套文件夹目录做成模板每开发一款新品就直接复制一份命名、归档、找图都快很多。希望这些方法能帮你把每天选品存图的时间从半小时压缩到十分钟以内。