很多站点在文字层面做了不少優化，图片和视频却長期處于“没人管”的狀態：後台上传什么就是什么，尺寸、格式、命名全靠編輯顺手。结果就是列表頁几百 KB 甚至几 MB 的图片堆在一起，用戶等，抓取端也等。媒体资源不是附属品，它往往是頁面体积的主要来源，也直接影响蜘蛛一次抓取能拿到多少有效内容。
先看体积：單張图能有多大
打開一個典型的内容頁，用開發者工具看 Network 里图片的传輸大小。常见的問题有這几種：
- 相机或设計稿原图直接上传，單張 2MB 以上，頁面里還缩放着顯示；
- 同一張图在列表頁、詳情頁、推荐位各存一份，格式和尺寸都不一样；
- 缩略图没有單獨生成，直接調用大图再由前端压缩；
- 用無损格式存照片，本可以走有损格式的场景硬扛体积。
處理思路並不复杂：上传时限制單邊像素和文件大小，必要时轉成 WebP 之類的現代格式，同时保留一份原图备查。列表頁和詳情頁使用不同尺寸的图，不要让浏览器下载一張大图再缩成小方框。
再看加载方式：什么时候加载、占多大位置
懒加载用對了能省带宽，用错了會让首屏空白。判断标准很简單：這張图在首屏可见范围内吗？
- 首屏主图、Logo、文章头图不要加懒加载，直接加载；
- 首屏以下的图可以懒加载，但要有占位，避免滚動时頁面跳動；
- 给图片寫上宽高属性，或用固定比例的容器，让布局提前算好；
- 同一位置的轮播图，不要一次性加载全部十几張。
图片的“文字信息”別浪費
抓取端看不懂图片内容，只能讀你给的描述。alt 属性、文件名，以及图片周围的正文，都是它判断這張图在讲什么的依據。操作上注意：
- alt 寫清楚图片表達的信息，而不是堆關鍵詞；纯装饰图可以留空；
- 文件名用有意义的小寫英文和连字符，別用 IMG_20240513_001.jpg 這類流水号；
- 图片紧跟的图注、段落文字，尽量說明這張图在讲什么；
- 重要的图表、流程图，正文里用文字把结论再复述一遍。
视频與第三方嵌入
视频通常通過 iframe 嵌入，抓取端不一定愿意执行里面的内容。可以做的：给嵌入内容一個能說明主题的标题或周邊文字，設定好封面图，避免自動播放，別让一個自動播放的播放器压在正文上面。如果视频里讲了關键信息，正文里补一段文字說明，對用戶和抓取都更友好。
一個可以照着走的自查流程
- 抽 3 到 5 個典型頁面，用開發者工具看總传輸大小和图片占比；
- 找出体积最大的 10 張图，逐張判断能否压缩、換格式、單獨生成缩略图；
- 检查首屏图片是否被誤加懒加载，非首屏图片是否有占位高度；
- 抽查 alt 和文件名，看能否說明图片内容；
- 確認图片和视频能通過頁面連結或站点地图被發現，不要只靠 JS 動態插入；
- 改完後用同一批頁面再测一次，记錄前後的差异。
几個常见誤区
把图片压到模糊，用戶看不清，頁面体驗反而更差。媒体優化的目标是“够用就好”，不是越小越好。
- 只在首頁做優化，内頁和归档頁繼續用原图；
- 所有图片都加懒加载，首屏反而出現一块空白；
- 為了省事把图片做成 CSS 背景，结果丢掉了 alt 和文件名信息；
- 图片地址一變就删舊文件，導致外鏈和缓存里全是失效地址。
媒体资源自查不需要一次做完。可以先從流量最大的几個栏目開始，把体积和加载方式理顺，再逐步覆盖全站。做完之後，頁面更轻、阅讀更顺，抓取端拿到的内容也更完整，這本来就是同一件事的两個结果。