访客打开企业官网，首页主视觉迟迟不显示，往下滚动时图片还一张接一张地蹦出来。遇到这种情况，不少人的第一反应是服务器配置不够，于是升级带宽、换更贵的机型，结果单张图片依然是几百KB甚至几MB，打开速度并没有实质变化。问题往往不在服务器，而在图片自身——文件太大，加上浏览器每次访问都得重新下载。这是两个独立的问题，需要分开处理，而且先后顺序有讲究。
压缩与缓存，各自解决什么
图片压缩针对的是文件体积，让单次传输的字节数降下来。浏览器缓存针对的是重复请求，让用户第二次访问时直接读取本地副本，不再向服务器要一遍。只压缩不缓存，用户每次进页面还是得重新下载，只不过每张图小了一点；只缓存不压缩，首次访问照样慢，而且缓存文件本身也占用户设备空间。两者是配合关系，不是二选一。
压缩的执行顺序：尺寸→格式→质量
第一步，先确定图片的实际展示尺寸。很多官网上传的图片宽达两三千像素，实际显示区域只有几百像素宽，浏览器再把它缩回来，多出来的像素全浪费了。判断标准很直接：按页面在桌面端和移动端的最大显示宽度来准备素材。一般内容配图控制在1200像素以内，列表缩略图控制在400像素以内。
第二步，选对格式。照片类内容适合压缩效率更高的现代格式；图标、线条类图形适合矢量或无损格式。如果团队对格式兼容性没把握，可以保留一份通用格式作为兜底。
第三步，才是控制压缩质量。质量参数不是越低越好，压到人物皮肤出现色块、文字边缘发虚就过头了。建议在常用工具里从较高画质开始逐档下调，对比原图看不出明显差异时即可停手。压缩后的单张图片，普通内容图控制在200KB以内比较稳妥，首屏大图尽量不超过300KB。
缓存策略怎么配
静态图片属于不常变动的资源，可以设置较长的缓存时长，让浏览器在有效期内直接使用本地副本。但这里有个常见问题：图片更新后用户看到的还是旧图，原因是文件名没变，浏览器认为缓存仍然有效。解决办法是给图片文件名加上版本标识，比如在文件名或路径中带上一段版本号，图片一改就换新名字，旧缓存自然失效。这样既能享受长缓存带来的速度，又不会出现内容不更新的尴尬。
上线前用一张检查表逐项确认
第一项，首屏出现的图片是否都控制在合理体积内，有没有漏掉某张大图。第二项，服务器返回的缓存头是否已经配置，静态资源有没有拿到较长的有效期。第三项，用手机实际打开页面，在正常网络下观察首屏出现时间，注意不是看电脑上的模拟器。第四项，刷新一次页面，确认图片是否走了缓存而不是重新下载。第五项，检查图片文件名是否带版本标识，避免后续更新时踩坑。这五项过一遍，大部分加载慢的问题都能定位到具体环节。
日常维护中图片会持续增加，建议定期复查
官网上线后内容会不断补充，图片总量只增不减，几个月后可能又出现加载变慢。建议在例行维护中固定检查几件事：新增图片是否按尺寸规范处理过，缓存头有没有被后续改动覆盖，移动端首屏表现是否仍然正常。it数运在网站维护中的检查思路也是类似的，把图片体积、缓存配置和实际访问表现放在一起看，而不是等到用户反馈慢才回头排查。图片优化不是一次性工作，把它纳入日常维护清单，官网的打开体验才能长期稳定。
