很多站点运营者把注意力放在文字、栏目和收錄上，但真正拖慢首屏的，常常是几張没有處理過的图片。图片体积偏大、尺寸超出展示区域、该懒加载的没懒加载，既影响訪客体驗，也會让蜘蛛在渲染頁面时消耗更多资源。這篇自查清單围绕图片展開，不追求把所有图片压到最小，而是找到效果和速度之間的平衡点。
图片為什么容易成為瓶颈
图片同时占用带宽、内存和渲染時間。一張几 MB 的横幅，可能比整頁文字加脚本還大。尤其当列表頁缩略图、文章配图、产品图都直接上传原图时，頁面請求數不一定多，但传輸量會迅速上升。對蜘蛛来说，图片過大也會拖慢渲染，影响它對頁面主体内容的判断。
- 上传时未压缩，單張图几百 KB 到几 MB。
- 用小图展示却加载了原图，尺寸不匹配。
- 首屏關键图用了懒加载，導致迟迟不顯示。
- 图片缺少宽高属性，加载时引發布局跳動。
- 缓存策略不合理，重复訪問還在重新下载。
图片体积自查：從格式和尺寸開始
格式選擇
不同格式适合不同场景。照片、渐變图通常适合 WebP 或 AVIF 這類現代格式；图标、简單线條图可以用 SVG；需要透明背景且兼容性要求高时，PNG 仍可用，但要注意体积。不要為了统一而把所有图都存成同一種格式，按内容類型選擇更實际。
尺寸與压缩
先確認图片在頁面上實际顯示的最大宽度。如果内容区宽度是 800 像素，上传 3000 像素宽的图通常没有意义，除非用戶會点击放大。压缩时優先使用有损压缩工具，在肉眼可接受范围内降低质量。對于需要透明度的图，可以尝试調色板压缩或改用 WebP。
- 列表頁缩略图單獨生成小尺寸版本，不要直接調用原图。
- 為图片設定明确的宽度和高度，减少布局偏移。
- 检查是否有重复上传的相似图片，合並或刪除舊文件。
- 图片文件名和 alt 文本尽量描述内容，不要堆砌關鍵詞。
懒加载自查：不是所有图片都该延迟
懒加载的本意是推迟屏幕外图片的加载，减少初始請求。但如果把首屏可见图片也设成懒加载，浏览器可能要等脚本执行後才開始下载，反而拖慢最大内容绘制。自查时，先找出首屏区域内的關键图片，確認它們没有被延迟加载。
- 首屏主图、Logo、文章头图建议正常加载。
- 屏幕外的長列表图片、頁脚图片可以懒加载。
- 懒加载要提供占位尺寸，避免滚動时頁面跳動。
- 如果使用 JavaScript 懒加载，確認蜘蛛能获取到图片地址，而不是只看到占位图。
提醒：懒加载不是越多越好。關键图片延迟加载，可能让訪客和蜘蛛都以為頁面是空的。
响應式图片與缓存检查
响應式图片的目标是按设备宽度提供合适尺寸。常见做法是准备多個尺寸版本，让浏览器根據视口和像素密度選擇。自查时，可以抽查手机端是否加载了桌面端大图。如果只有一張大图，移動端用戶就會承担不必要的流量。
缓存方面，给图片設定較長的缓存時間，並通過文件名或版本參數在更新後失效。检查 CDN 是否缓存了舊图，更新後是否及时刷新。若發現訪客仍看到舊图，先確認源站文件已替換，再检查 CDN 缓存和浏览器缓存。
图片與蜘蛛抓取：別忽略可訪問性
蜘蛛渲染頁面时，图片也是頁面的一部分。图片地址如果被 robots.txt 挡住，或者依赖复杂脚本才插入，可能影响蜘蛛對内容的理解。但也不需要為了蜘蛛單獨做一套图片，保持正常的 HTML 图片引用和可讀的 alt 文本即可。
- 重要图片使用标准 img 标簽，而不是纯背景图。
- alt 文本描述图片内容，装饰性图片可以用空 alt。
- 避免用图片代替大段文字，尤其是标题和正文。
- 检查图片是否返回 200 狀態，不要出現大量 404 图片。
一份可执行的自查流程
- 打開几個代表性頁面，用浏览器開發者工具查看網絡請求，按体积排序。
- 找出最大的几張图片，確認它們是否在首屏、是否用了正确尺寸。
- 检查首屏图片有没有被懒加载，宽高属性是否完整。
- 抽查移動端加载的图片版本，是否比桌面端明顯偏大。
- 確認图片缓存头和 CDN 刷新策略，更新後是否生效。
- 检查图片 alt 文本、狀態碼和是否被 robots.txt 誤挡。
图片優化不需要一次做完。每次更新頁面时顺手處理几張，逐步替換舊图，比集中折腾更可持續。把图片体积、懒加载邊界和缓存策略纳入日常自查，頁面會更轻，蜘蛛抓取和渲染也會更顺畅。