图片通常是頁面上体积最大的资源。图片没管好，最直接的後果是加载慢、首屏卡，間接還會影响机器對頁面的理解——抓取时看不到画面，只能看到占位符和缺失的文本。图片自查不需要多复杂的工具，把体积、命名、替代文本和加载方式四件事依次捋一遍，大部分問题自己就會浮出来。
一、先看体积和格式
同一張图，從设計稿直接導出可能是 3MB，压過之後只剩 200KB，肉眼几乎看不出差別。所以第一步不是換图，而是压缩。
- 上传前统一走一遍压缩，JPEG 质量一般控制在 75 到 85 之間，PNG 只在确實需要透明背景时使用。
- 照片類内容優先用 JPEG，图标和线條图優先用 SVG，插画類可以试试 WebP。
- 检查有没有被强行放大的图片：把 400px 宽的图拉到 1200px 展示，既模糊又浪費带宽。
- 普通配图尽量控制在 200KB 以内，首屏大图另算，但也要给它定一個明确上限。
二、文件名和存放位置
很多站点的图片文件名是 IMG_20240315_001.jpg，或者一長串哈希值。這種名字對人没有帮助，對机器也没有信息量。
- 文件名用简短英文或拼音，词與词之間用连字符，例如 server-room-backup.jpg。
- 避免中文文件名和空格，某些环境里會被轉义成乱碼，複製連結时也不好用。
- 按栏目分目錄存放，比如 /images/ops/、/images/news/，方便後續統計和清理。
- 图片不要和頁面文件混在同一层目錄里，時間一長會很难维護。
三、替代文本不要留空
alt 属性的作用有两個：图片加载失敗时告诉訪客這里原本是什么，以及让机器大致知道這張图在讲什么。
- 内容配图寫清画面主题，比如「机房机柜背面的走线示意」，不要寫成「图片」「配图1」。
- 纯装饰性图片可以留空 alt，但要確認它确實没有传递信息。
- 不要把關鍵詞硬塞進 alt，讀起来別扭，實际收益也有限。
- 图片下方的說明文字如果存在，尽量和 alt 互补，而不是原样重复一遍。
判断 alt 寫得好不好，有個简單办法：把图片全部關掉，只讀頁面上的文字，看内容是否還讲得通。
四、加载方式與尺寸声明
頁面上图片一多，加载顺序就成了体驗問题。给 img 寫上 width 和 height，可以让浏览器提前留出位置，避免内容加载過程中頁面来回跳動。
- 首屏之外的图片加 loading="lazy"，首屏主图不要懒加载，否則第一眼就是空白。
- 同一張图在不同屏幕下尺寸差別大时，用 srcset 给出多個版本，让浏览器自己挑。
- 不要用脚本延迟插入首屏图片，容易和渲染时机打架，反而拖慢首屏。
- 轮播图如果只是自動切換，注意別把十几張图全部立刻加载。
五、图片和抓取的關系
抓取图片资源同样會占用服務器和抓取時間。图片大面积 404、目錄被誤屏蔽，都會让頁面看起来缺了一块。
- 定期抽查图片是否返回 404，尤其是改版、換 CDN 之後。
- robots.txt 里不要顺手屏蔽图片目錄，除非确實不希望這些资源被訪問。
- CDN 開了防盗鏈或 UA 拦截时，確認一下是否把正常的抓取請求也挡在外面。
- 图片量大的站点，可以考虑單獨维護一份图片地址清單，方便排查。
六、一份可执行的图片自查清單
- 随机抽取首頁和三個内頁，統計图片總体积，找出最重的三張。
- 压缩這三張图，记錄压缩前後的体积變化。
- 检查文件名是否可讀，是否包含空格或中文。
- 逐張確認 alt 是否有意义，装饰图是否留空。
- 確認首屏图没有懒加载，首屏之外的图有懒加载。
- 抽查十張图的返回狀態，看有没有 404。
- 確認 robots.txt 和 CDN 規則没有誤伤图片目錄。
這套流程做完，通常一次只要半小时到一小时，但能省下後面很多排查時間。图片不是頁面的主角，却是最容易被忽视的基础设施之一。把它维持在可控狀態，比等到訪問變慢再回头找原因要轻松得多。