有个做文具出口的客户抱怨首页慢，打开一看，首屏横幅是业务员用手机拍完直接传的原图，一张八兆，整页加起来将近三十兆。海外买家网络再好也得等好几秒，询盘自然少。网页前端开发里，图片永远是最重的负担，也是最值得花心思的地方，这一课值得每个管网站的人补上。
格式怎么选
现在的主流答案是WebP：同画质体积比JPG小三成上下，主流浏览器全部支持，新站没理由不用。更新的AVIF还能再小一截，适合对画质要求高的首屏大图，做兼容降级就行。需要透明背景的标志类图用PNG，小图标干脆用SVG，无限放大不糊还只有几KB。那句老话该更新一下了：别再用JPG硬扛所有场景，更别用PNG装照片，体积差着好几倍。选格式的原则就一句话：新站从WebP起步，老站换图时顺手转格式，一张省三成，全站累计就是一大截，产品图多的站点收益尤其明显，几千张图加起来省出的流量相当可观。
尺寸与占位
第二件事是别用一张图走天下。手机屏幕宽度不到电脑的一半，给手机端推两千像素的大图纯属浪费，按设备下发不同尺寸的图，流量和速度同时受益。另外每张图都要写好宽度和高度占位，图片加载时页面不会跳来跳去，这个细节直接影响测速分数，也影响访客的手感。
- 首屏之外的图全部懒加载，滚到哪里加载到哪里；
- 缩略图用小图，点开详情再换大图，别让列表页背着详情页的重量；
- 产品图统一压到一百五十KB以内，横幅图控制在三百KB以内。
那个文具客户的站按这套规矩整理完，整页体积从三十兆降到两兆出头，首屏时间从五秒多压到一点四秒，当月广告转化率就动了。顺手教团队一招自查：把首页另存到桌面看看总体积，超过五兆就该收拾图片了，这个土办法不需要任何工具。
给上传环节立规矩
图片课的最后一段是管理问题。后台上传入口加自动压缩和格式转换，业务员传多大的原图都自动处理；再给团队定一条铁律：产品图统一按最大宽度两千像素导出后再上传。规矩立住，速度才守得住，网页前端开发的优化成果，一半靠代码，一半靠习惯。
两条建议：后台先检查图片上传有没有自动压缩，没有的让开发商补上，这是几十块的活儿；每月用测速工具跑一次首页，图片体积是最容易悄悄反弹的项目，盯住它。比格网络交付的站点都内置了这套图片处理流程，客户传图不用操心格式和大小。
