图文站点的内容里，图片占比往往比想象中高，但它也是最容易被放過去的一环。正文改了三版，配图還是当年從素材站随手下载的那張。图片不出問题时没人注意，一旦出問题，表現通常是首屏變慢、移動端流量白跑、图片搜尋里找不到入口。下面把图片相關的自查点整理成一份可以按季度過一遍的清單。
一、体积：先看能省下来的那一半
图片体积是最直接的成本，也是最容易拿到收益的地方。很多站点的首屏慢，不是因為代碼复杂，而是因為一張没压過的头图。
- 照片類图片存成了 PNG，体积常常是 JPEG 的三到五倍；
- 單張配图超過 500KB，滚動到该位置时明顯卡一下；
- 列表缩略图直接用原图裁切，展示尺寸 200px，實际下载 2000px；
- 同一張图在文章頁、栏目頁、专题頁各上传一份，互不复用。
處理方式不复杂：先跑一遍站点图片的批量盘点，按体积排序，把排名靠前的几十張重新導出。压缩时保留一個可回溯的原图目錄，避免以後想換尺寸时只剩压缩版。
二、格式與压缩：別只盯着一種格式
WebP 現在的兼容性已经够用，AVIF 在部分场景下更小但编碼更慢。實務上可以這样分工：保留 JPEG 作為兜底，用 picture 或 accept 协商的方式给支持新格式的浏览器提供 WebP。压缩质量不必追求极限，照片類 75 到 82 之間通常肉眼差异不明顯，再往下压容易出現块状噪点，反而顯得站点粗糙。
三、尺寸與响應式：別用大图缩小顯示
用 CSS 把 1600px 宽的图缩到 320px 顯示，省的是排版，不是带宽。列表頁尤其容易出現這種浪費。可以给主要图片模板加上 srcset 和 sizes，让浏览器按视口和像素密度自己挑合适的版本。至少准备两档：一档给列表和缩略图，一档给正文大图。
判断标准很简單：打開開發者工具的 Network 面板，看實际下载的图片尺寸和你眼睛看到的尺寸差几倍。差三倍以上就值得改。
四、alt 與文件名：给机器留一点线索
alt 文本的第一作用是给讀屏软件和图片加载失敗时看，第二作用才是给搜尋引擎。寫得自然、描述画面内容即可，不要堆關鍵詞，也不要把 alt 留空後指望周围的正文自動补位。
文件名同样如此。IMG_2043.jpg 換成能說明内容的英文或拼音短语，成本几乎為零。真正需要避免的是把同一段關鍵詞複製到十几張图上，那属于明顯的堆砌。
五、懒加载：首屏是例外
懒加载几乎已经是标配，但常见的错誤是把首屏大图也一起懒加载，结果浏览器要等布局計算完才去請求，首屏反而更慢。做法是首屏第一張图用 eager 加载，必要时加 fetchpriority 提示；首屏以下的图片再交给懒加载。同时给图片寫死宽高或宽高比，避免加载過程中頁面反复跳動。
六、图片與抓取：不占索引，但影响渲染
图片本身並不直接占用正文索引位置，但它會占用渲染资源。如果頁面依赖大量图片才能撑出正文高度，蜘蛛在渲染阶段就可能拿到一個不完整的頁面。另外，图片所在路径如果被 robots.txt 挡住，图片搜尋的入口也就一並没了，這一点在做全站屏蔽时经常被顺手连坐。
七、可以照着做的自查清單
- 按体积排序，列出全站最大的 50 張图片；
- 检查照片類图片是否誤用 PNG；
- 检查缩略图是否直接引用原图；
- 確認正文大图模板已配置 srcset；
- 抽查 20 張图片的 alt，看是否為空或堆砌；
- 检查首屏首图是否被错誤地设為懒加载；
- 確認图片目錄没有被 robots.txt 誤挡；
- 在移動網絡模式下打開三個代表性頁面，记錄首屏時間。
這份清單不需要一次做完，挑体积最大的那批先處理，往往就能看到明顯變化。剩下的作為常規维護項，跟着内容更新节奏顺手過一遍即可。