一位做厨房电器的客户给我发来两张截图：同一张产品图，电脑上清晰饱满，手机上却裁得只剩半个机身，另一张干脆糊得能数清压缩块。他问我：是不是美工图片处理得不行？我说图没问题，问题在图片自适应这套机制上。后来他把网站后台打开给我看，果然，所有产品图传的都是原图。
大图塞小屏，三个坑一起踩
不少网站的图就是一张两三千宽的原图直接放进页面，靠浏览器自己缩。这么干有三个代价：手机要下载一整个大图，流量和时间都浪费在显示不出来的部分；浏览器压缩得糙，细节全糊；比例不对时，要么留难看的空白，要么被裁掉关键部位。客户看不到你产品的全貌，这买卖就已经输了一半。更麻烦的是速度，一张大图能把整个页面的加载拖慢好几秒，客户根本等不到看清。
正确的图片自适应做法
- 多尺寸输出：同一张图按设备生成小中大几档，手机加载小图，大屏用高清版，程序自动判断，不用人工干预。
- 懒加载：首屏之外的图片，用户滚到哪加载到哪，首屏速度立竿见影。
- 统一比例：产品图统一按4:3或1:1裁切，用白底加留白表现不同尺寸的产品，比强行裁切好看得多。
- 压缩：上传前统一压缩到合理体积，页面整体速度能快一半。
还有个常被忽略的点：参数表、认证证书这类文字性图片，在手机上会小到读不清。能改成文字的就改成文字，必须用图的，点开要能放大。放大功能要做顺滑，捏合缩放卡顿的话，不如直接弹出高清大图，操作越少越好。
改图之前，先理顺上传习惯
很多问题出在源头：业务员图省事，直接把相机原图传进后台，一张图十几兆。后台可以限制上传尺寸并自动压缩，从制度上堵住。这件事一次设置永久受益，很多团队嫌麻烦不做，图就永远乱下去，改多少版设计都白搭。再配一个图片命名规则，产品型号加编号，日后找图维护都省事。
自查方法很简单：用自己的手机打开网站，看首屏图片有没有秒开、产品图有没有变形，再换台平板过一遍。要是问题一堆，找比格网络这类团队做一次移动端体检，他们在响应式网站设计里处理图片自适应有一套成熟流程，改起来不伤筋动骨。
