不少站点内容做得扎實，打開却要等上好几秒，問题常常不在主机，而在几張没處理過的图片。图片既影响訪客的第一感受，也属于蜘蛛需要抓取的资源：体积越大、數量越多，單個頁面的下载時間就越長。把站内的图片與媒体文件梳理一遍，是站点运营里成本不高、收益比較稳定的一項動作。
先看体积，再谈其他
判断标准很朴素：在浏览器里打開一個典型的栏目頁，看看單個图片文件有多大。经驗上，列表缩略图控制在 100KB 以内比較舒服，正文插图视尺寸而定，但動辄一两兆的图基本都属于该處理的范围。
- 打開浏览器開發者工具的 Network 面板，按大小排序，先看排在最前面的几張；
- 把图片直接下载到本地看文件大小，比只看頁面观感更准；
- 注意背景图、图标字体、视频封面這類容易被忽略的媒体文件。
格式與压缩
照片類内容優先使用 WebP 或 AVIF，多數現代浏览器都支持，同画面质量下体积通常比 JPEG 小不少。图形、图标類的简單图片更适合 SVG，缩放不失真，体积也小。
保留可回退的版本
如果站点訪客中有相当比例使用較老的浏览器，可以在 picture 标簽里保留一份 JPEG 或 PNG 作為回退。是否需要這一步，看自己的訪問資料，不必照搬別人的做法。
压缩要有度
压缩過头，图片出現明顯色块和噪点，反而影响阅讀。建议保留一份原始文件存档，站点上使用压缩後的版本，將来需要重新處理时還有源文件可用。
尺寸與布局
图片顯示多大，文件就按多大輸出，不要用 CSS 把一張 2000 像素宽的图强行缩到 300 像素展示——訪客仍然要下载完整的那張图。
- 在图像标簽上寫明 width 和 height，或者用 CSS 预留宽高比，避免加载過程中頁面来回抖動；
- 同一張图在不同位置展示不同尺寸时，用 srcset 提供多套尺寸，让浏览器自己挑；
- 正文配图避免在图片里塞大段文字，缩放後看不清，也不利于内容被理解。
加载方式
首屏之外的图片可以加上 loading=lazy 属性，减少初始加载压力。但首屏内的主图不要懒加载，否則訪客第一眼看到的可能是空白占位。
占位图尽量用纯色或轻量方案，別為了好看再加一張几十 KB 的模糊图，那等于多下载一次。
命名、替代文本與图片入口
文件名用能說明内容的英文或拼音，避免 IMG_2031.jpg 這類。alt 属性寫清楚图片表達的内容，装饰性图片留空即可，不要堆關鍵詞。
图片来源清單可以有，但不是必须。如果图片本身是站点的核心内容，例如图库、商品图，值得單獨整理；普通配图跟着頁面一起被發現就够了。
服務器與资源分發
- 给图片、CSS、JS 這類静態资源設定合理的缓存头，让重复訪問不必反复下载；
- 如果使用 CDN，確認加速域名没有被 robots.txt 或訪問控制挡住，否則蜘蛛可能拿不到资源；
- 開啟 gzip 或 brotli 压缩，文本類资源收益明顯，图片本身已压缩則提升有限；
- 定期清理服務器上不再使用的舊图和缩略图，目錄越乱越容易誤删或誤用。
判断要不要處理某張图，可以問自己一句：如果訪客用的是手机流量，這張图值不值得他等？
一份简單的巡检清單
- 打開開發者工具，找出全站体积最大的若干個资源；
- 把超過 300KB 的图片列出来，逐個决定压缩、換格式還是刪除；
- 检查首屏主图是否被懒加载；
- 抽查一批图像标簽，看是否寫了宽高和 alt；
- 確認 CDN 與静態资源域名可正常訪問，日誌里没有大面积 403 或 404；
- 清理長期不用的图片和废弃的缩略图目錄。
图片處理不需要一次做完，按栏目或模板分批推進即可。做完一轮後，頁面的打開速度通常會有可感知的變化，蜘蛛在同样的時間里也能更從容地把頁面内容讀完。