图片通常是页面上体积最大的资源。图片没管好，最直接的后果是加载慢、首屏卡，间接还会影响机器对页面的理解——抓取时看不到画面，只能看到占位符和缺失的文本。图片自查不需要多复杂的工具，把体积、命名、替代文本和加载方式四件事依次捋一遍，大部分问题自己就会浮出来。
一、先看体积和格式
同一张图，从设计稿直接导出可能是 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 规则没有误伤图片目录。
这套流程做完，通常一次只要半小时到一小时，但能省下后面很多排查时间。图片不是页面的主角，却是最容易被忽视的基础设施之一。把它维持在可控状态，比等到访问变慢再回头找原因要轻松得多。