很多站点在内容和结构上做了不少工作，却很少認真看過图片。图片是頁面里平均体积最大的一類资源，也是最容易長期堆积、逐渐失控的部分。改版一次加一批图，活動結束没人清理，几年下来目錄里躺着几千個用不上的文件。這篇整理一套日常就能做的媒体资源自查流程，不需要重构，也不需要動模板底层。
為什么把图片單獨拎出来检查
图片問题通常有三個特点：一是不容易在頁面上被察觉，缩略图看起来都正常；二是影响面广，一張图可能同时出現在列表頁、詳情頁和推荐位；三是修复成本低，压缩、改名、补 alt 基本不需要開發排期。正因為如此，它属于投入产出比較高的运营動作。
体积與格式：先看一眼總量
打開浏览器開發者工具的網絡面板，按体积排序，看看排在最前面的十個請求是什么。多數站点會發現，前几名清一色是图片。
- 單图体积：正文插图控制在合理区間，超過一定尺寸的原图直接上传，往往就是主要负担。
- 格式選擇：照片類适合有损压缩格式，图标和纯色图形适合矢量或無损格式，带透明通道的图要区分场景。不必追求最新格式，優先保證兼容。
- 尺寸匹配：列表頁展示的是缩略图，就不要用原始大图靠 CSS 缩小，浏览器實际下载的仍是完整文件。
- 响應式：同一張图在手机和桌面端有不同的展示宽度，若條件允许，用不同尺寸的源文件而不是一份通吃。
命名、替代文本與目錄结构
图片文件名既是给系統看的，也是给维護者看的。類似 IMG_20230417_001.jpg 這種命名，半年後自己都分不清是哪張。建议用简短、可讀、语义清晰的英文或拼音命名，保持全站風格一致，避免同义词混用。
替代文本不是给搜尋引擎凑字數的，它的第一用途是無障碍和图片加载失敗时的兜底說明。寫法上描述图片内容即可，不必堆關鍵詞，也不必每張图都强行加。装饰性图片留空更合适。
目錄结构上，建议按业務模块或時間归档，而不是全部堆在同一個 upload 目錄里。分目錄的好處是迁移、清理和排查都更容易定位。
懒加载與首屏图片
懒加载能顯著减少首屏請求，但用错地方會适得其反。首屏可见区域的图片應当正常加载，甚至提高優先級；屏幕外的图片再延迟加载。常见错誤是把首屏主图也加上懒加载属性，结果用戶看到的是一片空白，然後图片才慢慢浮現。
另外，图片没有设定宽高时，加载完成會導致頁面内容跳動。给图片容器预留尺寸，或在标簽上寫明宽高比例，這類细节對阅讀体驗的影响其實比想象中大。
失效图片與外部引用
图片失效往往發生在几種情况：图床更換、文件被誤删、路径大小寫在服務器上不敏感但在其他环境下敏感、引用的站外图片被對方下线或加了防盗鏈。
- 定期掃描頁面中的图片地址，检查返回狀態，把失效項列成清單逐條處理。
- 站外引用的图片尽量落地到自己的服務器或對象存储，避免對方調整策略後连带影响自己的頁面。
- 图片的协议寫法保持一致，避免在 HTTPS 頁面里混入不安全的资源引用。
清理與归档
清理是整套流程里最容易拖延的一环。可以先做低風險的動作：把確認不再使用、且没有被任何頁面引用的文件移到归档目錄，观察一段時間，確認没有異常再刪除。刪除前保留一份备份，刪除记錄寫進變更日誌，方便回溯。
需要提醒的是，判断“没人用”不能只靠感觉。列表頁配置、轮播图、模板里的預設图、邮件模板、APP 端接口，都可能引用同一個文件。清理之前先做一次全量引用检索。
一個可执行的检查顺序
- 抓取主要模板頁面的资源請求，按体积排序，找出最大的十張图。
- 检查這些图的格式、尺寸是否與展示位置匹配，能压的压缩，能換尺寸的換尺寸。
- 抽查一批图片的文件名與替代文本，修正明顯無意义的命名。
- 核對首屏图片是否被错誤地延迟加载，补齐宽高属性。
- 掃描失效图片和站外引用，逐條替換或落地。
- 導出長期未引用的文件清單，先归档，後清理，並记錄在案。
媒体资源治理不需要一次性做完，把它拆成几件小事，按季度做一轮，效果比集中大掃除更稳。做完之後，頁面的加载表現和维護难度都會轻松一些。