电商和网页配图该选什么格式和尺寸？一套能落地的选法

同一张商品图，传主图被要求正方形、上详情页要竖长图、发网页 banner 又是宽幅，格式还各有讲究——选错了不是被平台打回，就是加载慢、显示糊。这篇按四步走，把电商和网页配图的格式与尺寸一次理清，最后说说图叮能替你省下哪几步。

先按用途定尺寸，再按内容定格式，顺序反了容易返工

第1步：先按用途定尺寸

不同位置有不同规格，先对号入座。电商平台主图多数要求正方形，常见 800×800 像素起步，建议做到 1200×1200 像素，给放大看细节留足空间；详情页多是竖向长图，宽度常见 750 像素上下，长度按内容排，别一张拉到好几千像素高；网页 banner、首图则偏宽幅，具体看你用的模板。这里有个容易被忽略的点：现在手机屏幕多是高分屏，同样的位置实际会用到两倍像素来显示才不糊，所以给网页出图时，宁可按显示尺寸的一到两倍来做原图。定尺寸还有个原则：宁可原图大一点再往下缩，别拿小图硬往上放大——放大会糊。尺寸这关先过了，格式和压缩才好谈。

第2步：按图片内容定格式

尺寸定完，看这张图是什么内容再挑格式。商品照片、场景图，用 JPEG 或 WebP，体积小、加载快；需要透明背景的主体图，比如要垫不同底色的产品，用 PNG，或者支持透明的 WebP；网页里想再省流量、加载再快些，优先 WebP，同画质通常比 JPEG 小两三成。别一股脑全存成 PNG——照片存 PNG 只会白白变大，把页面拖慢，得不偿失。内容决定格式，这句话值得贴在显示器边上。

第3步：压到合适体积，守住清晰

尺寸和格式都定了，再压体积。商品图上传前，照片类压到质量 80 上下，肉眼基本无损，体积能降不少。详情长图尤其要盯——一张竖图动辄好几 MB，一个详情页七八张摞下来就是几十 MB，客户往下滑页面就卡，人还没看完就走了。有个数字可以当参照：单张控制在 300KB 到 800KB 之间，多数网页和平台都能顺滑加载。压完把图放大到 100% 看关键部位：产品的材质纹理、文字、logo 边缘清不清楚。宁可多导一版对比着看，也别图快一次压太狠，狠过头就得从头重来，反倒更慢。

双十一前，做家居的阿棠上了一批新品，主图全传的 3000 像素、5MB 的大 PNG，页面加载慢得客户直接退出。我帮她把主图统一改成 1200×1200 像素、JPEG 质量 82，透明素材才留 PNG，单张从 5MB 压到 600KB 左右。当天页面打开速度肉眼快了一截，跳出的人明显少了。格式和尺寸不是小事，它直接决定有没有人愿意等着把图看完。

第4步：让图叮替你省几步

配图里最花时间的两件事，图叮能接。要换底色、做纯白主图，图叮一键抠图把主体抠出来、导出透明 PNG，垫上底色就行；主图尺寸比例不对、想把竖图补成方图，图叮图像扩展能顺着画面把边缘补出来，不用重新构图重拍；原图不够清晰，高清放大和材质高清修复来补。图叮网页版在浏览器打开就能用，也有 Photoshop 插件版，都不用下载安装。处理完导出常见格式，具体选项以官网为准。

举个日常会碰上的组合拳：手里一张竖着拍的产品图，平台主图却要正方形。以往得重新构图甚至重拍，现在的路子是先用一键抠图把产品抠出来，再用图像扩展把左右两侧顺着背景补齐，凑成 1200×1200 像素的方图，最后按前面几步压好体积导出。三个动作串下来，一张不合规的竖图就变成能直接上架的方形主图，省掉了约拍的来回。这类活儿单看每一步都不难，串成顺手的流程，才是真正省时间的地方。

最后自查一条：把做好的图放到它真正要出现的地方看——主图丢进平台预览，banner 放到网页里。尺寸不被裁、加载不卡、放大不糊，这套就走通了。阿棠现在每批图上架前，都先在手机上把详情页从头滑到尾，卡不卡一目了然。