很多站点排查性能問题时，第一反應是看服務器和資料库，却忽略了頁面上体积最大的资源。图片常常是單頁体积的主要来源，一張没有压缩的首頁大图，可能比整站脚本加起来還重。图片問题不會让站点报错，但會持續消耗带宽、拖慢渲染，也让抓取工具在下载资源时花掉不必要的時間。
图片自查要解决什么問题
目标不是把图片压到模糊，而是让每張图以合适的大小、合适的格式，出現在合适的位置。判断标准可以归纳成三句话：体积是否必要、尺寸是否匹配、加载是否分優先級。
一、体积與格式
常见問题
- 直接使用设計稿導出的原图，單張動辄一两兆。
- 所有图片统一格式，照片、图标、透明图不做区分。
- 缩略图仍指向原图地址，只是用 CSS 缩小顯示。
處理思路上，照片類内容可以優先考虑 WebP 或 AVIF，並在服務端或 CDN 层保留回退格式；图标和简單图形優先用 SVG；确實需要透明通道的位图再考虑 PNG。压缩时保留肉眼可接受的画质即可，不确定就做一次對比測試，而不是凭感觉一刀切。
二、尺寸與顯示区域
图片的實际像素宽度應当接近它在頁面上的最大顯示宽度，考虑高分屏时通常放大到两倍以内即可。
- 列表頁缩略图不要复用詳情頁大图。
- 用 CSS 缩放代替生成新尺寸，會浪費带宽，也可能带来布局抖動。
- 為图片容器设定宽高比，避免加载完成後頁面整体跳動。
三、加载方式
- 首屏關键图片正常加载，必要时配合预加载提示。
- 首屏以下的图片使用懒加载，减少初始請求數。
- 非首屏、非關键的装饰图可以延迟到用戶接近时再請求。
- 图片地址尽量保持稳定，不要频繁更換目錄或參數结构。
懒加载不是越多越好。首屏图片被懒加载，用戶看到的就是一片空白；把關键图片排除在懒加载之外，是自查里最容易被忽略的一步。
四、命名、替代文本與结构
图片同样會出現在搜尋结果和结构化資料里，因此基础信息值得規范。
- 文件名：用有意义的英文短语，避免無信息命名。
- alt 文本：描述图片内容，装饰性图片留空即可，不要堆關鍵詞。
- 周邊文本：图片旁邊的标题和說明，往往比 alt 更能說明上下文。
- 图片站点地图：重要图片較多时，可以在站点地图中單獨列出。
五、一次可执行的自查清單
- 導出全站頁面中体积最大的二十張图片，按大小排序列出。
- 逐張確認：是否有更合适的格式、能否压缩、是否存在更小的尺寸版本。
- 检查首屏图片是否被懒加载，是否設定了宽高比。
- 抽查图片 alt 與文件名，確認没有關鍵詞堆砌和批量重复。
- 確認图片目錄或 CDN 的缓存头設定合理，替換後能正常生效。
- 改完後记錄一组前後對比資料，作為後續調整的基准。
结语
图片優化没有终点，也不需要一次做完。先處理体积最大、出現频率最高的那几張，收益通常最明顯。把這項工作纳入内容發布流程，比事後集中抢救更省力。