很多站点在文字层面做了不少优化，图片和视频却长期处于“没人管”的状态：后台上传什么就是什么，尺寸、格式、命名全靠编辑顺手。结果就是列表页几百 KB 甚至几 MB 的图片堆在一起，用户等，抓取端也等。媒体资源不是附属品，它往往是页面体积的主要来源，也直接影响蜘蛛一次抓取能拿到多少有效内容。
先看体积：单张图能有多大
打开一个典型的内容页，用开发者工具看 Network 里图片的传输大小。常见的问题有这几种：
- 相机或设计稿原图直接上传，单张 2MB 以上，页面里还缩放着显示；
- 同一张图在列表页、详情页、推荐位各存一份，格式和尺寸都不一样；
- 缩略图没有单独生成，直接调用大图再由前端压缩；
- 用无损格式存照片，本可以走有损格式的场景硬扛体积。
处理思路并不复杂：上传时限制单边像素和文件大小，必要时转成 WebP 之类的现代格式，同时保留一份原图备查。列表页和详情页使用不同尺寸的图，不要让浏览器下载一张大图再缩成小方框。
再看加载方式：什么时候加载、占多大位置
懒加载用对了能省带宽，用错了会让首屏空白。判断标准很简单：这张图在首屏可见范围内吗？
- 首屏主图、Logo、文章头图不要加懒加载，直接加载；
- 首屏以下的图可以懒加载，但要有占位，避免滚动时页面跳动；
- 给图片写上宽高属性，或用固定比例的容器，让布局提前算好；
- 同一位置的轮播图，不要一次性加载全部十几张。
图片的“文字信息”别浪费
抓取端看不懂图片内容，只能读你给的描述。alt 属性、文件名，以及图片周围的正文，都是它判断这张图在讲什么的依据。操作上注意：
- alt 写清楚图片表达的信息，而不是堆关键词；纯装饰图可以留空；
- 文件名用有意义的小写英文和连字符，别用 IMG_20240513_001.jpg 这类流水号；
- 图片紧跟的图注、段落文字，尽量说明这张图在讲什么；
- 重要的图表、流程图，正文里用文字把结论再复述一遍。
视频与第三方嵌入
视频通常通过 iframe 嵌入，抓取端不一定愿意执行里面的内容。可以做的：给嵌入内容一个能说明主题的标题或周边文字，设置好封面图，避免自动播放，别让一个自动播放的播放器压在正文上面。如果视频里讲了关键信息，正文里补一段文字说明，对用户和抓取都更友好。
一个可以照着走的自查流程
- 抽 3 到 5 个典型页面，用开发者工具看总传输大小和图片占比；
- 找出体积最大的 10 张图，逐张判断能否压缩、换格式、单独生成缩略图；
- 检查首屏图片是否被误加懒加载，非首屏图片是否有占位高度；
- 抽查 alt 和文件名，看能否说明图片内容；
- 确认图片和视频能通过页面链接或站点地图被发现，不要只靠 JS 动态插入；
- 改完后用同一批页面再测一次，记录前后的差异。
几个常见误区
把图片压到模糊，用户看不清，页面体验反而更差。媒体优化的目标是“够用就好”，不是越小越好。
- 只在首页做优化，内页和归档页继续用原图；
- 所有图片都加懒加载，首屏反而出现一块空白；
- 为了省事把图片做成 CSS 背景，结果丢掉了 alt 和文件名信息；
- 图片地址一变就删旧文件，导致外链和缓存里全是失效地址。
媒体资源自查不需要一次做完。可以先从流量最大的几个栏目开始，把体积和加载方式理顺，再逐步覆盖全站。做完之后，页面更轻、阅读更顺，抓取端拿到的内容也更完整，这本来就是同一件事的两个结果。