很多站点的问题不是内容不够,而是图片把页面撑得太重。首屏一张未经压缩的原图,可能比整页 HTML、CSS、JS 加起来还大。访客等得久,蜘蛛抓取时也要多花时间下载这些资源,抓取配额被大量图片占掉,正文页面的更新反而排在后面。图片自查不需要多高级的工具,关键是定期做、按清单做。
先弄清图片在站点里承担什么
站内图片大致分三类:内容图,也就是正文里必须看到的图;装饰图,比如图标、背景、分隔线;还有运营图,比如首页 banner 和活动图。三类的要求不一样。内容图要在清晰度和体积之间取平衡,装饰图应该尽量用 SVG 或纯 CSS 实现,运营图则要控制数量,别让首屏挤满大图。
逐项自查清单
体积与格式
- 单张内容图尽量控制在 200KB 以内,装饰图控制在几十 KB。
- 照片类用 WebP 或 AVIF,图标和线条图用 SVG,别把矢量图导出成几兆的 PNG。
- 保留原始图以备改版,但上线目录只放压缩后的版本。
- 检查是不是把设计稿的高清大图直接传了上去,实际展示根本用不到那个尺寸。
尺寸与显示
- HTML 里写明宽高或者宽高比,避免图片加载完成后页面整体跳动。
- 确认上传尺寸和展示尺寸接近,别用样式把两千像素宽的图缩到三百像素显示。
- 多端展示用 srcset 和 sizes,让手机不要下载桌面尺寸的图。
- 首屏之外的图片加懒加载,首屏主图不要懒加载,否则首屏反而变慢。
文件名与路径
文件名建议用有意义的英文或拼音加短横线,避免出现相机默认名和带括号的副本名。路径要尽量稳定,图片换目录时补上重定向,否则老页面和外部引用会一起失效,页面上出现成片裂图。
替代文本
alt 不是堆关键词的地方。内容图写清楚图里是什么,装饰图留空即可。图片加载失败或者网络慢时,alt 是访客唯一能看到的说明,也是判断这张图该不该留的依据。
缓存与分发
- 给图片目录设置较长的缓存时间,更新时用文件名带版本号的方式,别靠手动刷缓存。
- 确认 CDN 回源正常,避免源站已经换了图、CDN 还在发旧图。
- 检查是否存在图片地址返回错误状态:页面能打开但图裂,容易被访客当成站点质量问题。
用日志和抓取结果反查
服务器日志里能看到蜘蛛抓了哪些图片、返回了什么状态码。如果发现大量图片请求返回错误或经过多级跳转,说明有历史路径没处理好,可以整理成一份待修清单。另一个办法是随机抽几篇内容较长的页面,用浏览器的网络面板按体积排序,排在最前面的几个文件往往就是问题所在。
图片优化的目标不是越小越好,而是在清晰度和加载速度之间找一个能长期维持的平衡点。
几个常见误区
- 以为压缩过一次就一劳永逸,实际上每次换图都要重新走一遍流程。
- 只处理了首页,栏目页和内页还在用原图。
- 把所有图片交给第三方图床,结果对方限速或改规则,页面成片裂图。
- 只顾体积,把关键细节压成一团模糊,反而影响阅读体验。
落地节奏
- 先统计一次全站图片总量和总体积,作为基线,之后有对比才有意义。
- 优先处理首页、栏目页首屏和高流量内容页的图片。
- 把尺寸、命名、alt、懒加载写进上传规范,交给编辑执行。
- 每季度抽检一次,重点看新上传的图和改版后遗留的旧图。
图片自查属于那种做一次看不出太大变化、但长期不做会持续失血的工作。把它变成发布流程里的一环,比事后一次性大清理更省力,也更不容易反弹。