图片是站点里數量最大、也最容易被忽略的一類资源。它既影响頁面打開速度，也影响用戶在图片搜尋里能不能找到你。很多站点的問题不是图片太多，而是图片没人管：文件名是乱碼、alt 是空的、几 MB 的原图直接挂在列表頁、图床換域名之後舊地址全挂。這些事平时不疼，等到某天發現图片流量掉了、頁面變慢了，回头查就很費劲。
先看图片本身：文件名、格式與体积
上传之前花十秒钟看三件事，能省掉後面很多麻烦。
- 文件名：用简短的英文、數字或拼音，能看出图片大概是什么内容。避免 IMG_20240101_123456、未命名-1 這類名字，也避免直接使用中文文件名，编碼之後容易變成一串百分号。
- 格式：照片類内容優先 WebP 或 AVIF，图标和简單图形用 SVG，需要透明背景再用 PNG。格式選错，体积往往差好几倍。
- 体积：列表頁的缩略图不要直接調用原图，按展示尺寸單獨生成一档。原图可以保留在詳情頁或点击放大时再加载。
如果站点用了图床或 CDN，更換域名、迁移目錄时，要注意舊地址是否還能訪問。能保留就保留一段時間，确實要換的，用重定向把舊地址指向新地址，別让已经出現在搜尋结果里的图片地址直接變成死鏈。
alt 與图片周邊文字
alt 不是關鍵詞堆放区，它的第一作用是描述图片内容。寫法上可以注意几点：
- 一張图說明什么，就寫什么，能具体就具体，不要全站都是“产品图片”“示意图”。
- 纯装饰性的分隔线、背景图，alt 留空即可，但属性本身不要省掉。
- 同一頁面里多張相似的图，alt 不要完全一样，否則很难判断哪張對應哪個位置。
图片說明、图注、相邻段落的文字，都是判断图片主题的參考。把一張商品图放在一段介绍材质的文字旁邊，比單獨堆十個關鍵詞更有意义。反過来，如果一頁图很多但正文只有一句“以下是产品图”，图片和頁面的關联就很弱。
懒加载與首屏
懒加载能省带宽，但用错位置會伤体驗。首屏關键图片，比如 Logo、主图、首屏横幅，建议直接加载，不要加懒加载属性，否則用戶看到的第一眼可能是空白。
另外两個常见细节：
- 给图片寫上 width 和 height，或者用固定比例的容器，避免图片加载完成後頁面内容整体跳動。
- 如果图片列表是前端脚本渲染的，检查一下頁面初始 HTML 里有没有图片地址。只存在于脚本里的图片，抓取时可能拿不到。
图片搜尋與图片站点地图
图片想被图片搜尋發現，通常需要几個條件同时成立：地址稳定可訪問、所在頁面能被抓取、图片周围有能說明内容的文字。缺了任何一环，图片就只是一張挂在頁面上的图。
图片站点地图是可選項，用不用取决于站点的图片量。如果决定做，只放确實希望被展示的图片，別把全站缩略图、用戶头像、广告位素材一起塞進去。图片量大的站点，也可以按栏目拆分成多份地图文件，方便排查。
图片相關的調整，最好和頁面改版一样走一遍检查流程：改完之後看一看线上頁面，而不是只看後台的预览图。
防盗鏈、權限與失效图片
防盗鏈規則設定得過嚴，可能连正常的图片訪問一起挡掉，尤其是通過第三方頁面、App 内置浏览器打開时。規則收紧之後，建议用几種不同的来源實际訪問一次，確認展示正常。
失效图片同样需要清理。图片被刪除或改名之後，頁面上留下的是一個坏图标，用戶体驗不好，也不利于图片本身的展示。定期從訪問日誌或抓取日誌里筛一遍返回错誤狀態的图片地址，能替換的替換，确實不需要的就從頁面里去掉。
一次自查可以按這個顺序做
- 抽样打開几個主要栏目的列表頁和詳情頁，看首屏图片是否正常、是否有明顯加载延迟。
- 检查图片的 width/height 是否寫了，頁面滚動时有没有明顯跳動。
- 抽十到二十張图，看文件名、alt、周邊文字是否能說明這張图是什么。
- 確認首屏图片没有被懒加载，非首屏图片没有全部同步加载。
- 用不同的訪問来源測試防盗鏈規則，確認正常浏览不被誤伤。
- 從日誌里筛出错誤狀態的图片地址，安排替換或下架。
- 如果使用了图片站点地图，核對里面的地址是否還有效、是否都還需要保留。
图片這筆帳不复杂，但需要有人定期看。把上面這些点做成一份简單的检查表，每個季度或每次大改版後過一遍，通常就能避免大部分關于图片的問题：頁面變慢、图片不顯示、图片搜尋没流量，往往都出在這些最基础的环节上。