图片优化

图片优化指在保住观感的前提下，把图片的体积压下去、格式选对、尺寸配对，让页面传得更少、更快^[1]。图片常是页面体积最大的那一块，压缩与换格式的收益通常立刻可见^[4]。它不改变抓取规则，却直接影响 LCP 与带宽成本，是站长最容易拿到的一类性能收益^[2]。

格式的选择

不同格式各有用途，选错格式等于白白多传字节：

格式	适合的内容	压缩方式
JPEG	照片	有损
PNG	透明图、截图	无损
WebP	照片与图形	有损或无损
AVIF	照片	有损或无损
SVG	图标、插画	矢量

WebP 在同质量下比 JPEG 小约四分之一到三分之一，AVIF 的压缩率更高，但编码更慢^[2]。照片优先考虑 AVIF 与 WebP，图标与插画优先用 SVG。

尺寸与响应式

按实际展示宽度出图，别把桌面大图发给手机。同一张图准备几个宽度，交给浏览器挑选，用的就是 srcset 与 sizes^[2]。

<picture>
  <!-- 优先 AVIF，其次 WebP，最后退回 JPEG -->
  <source type="image/avif" srcset="/photo-800.avif 800w, /photo-1200.avif 1200w">
  <source type="image/webp" srcset="/photo-800.webp 800w, /photo-1200.webp 1200w">
  <img src="/photo-800.jpg" width="800" height="600" alt="示例图片">
</picture>

width 与 height 也要写上。浏览器按这两个数值先留出空间，图片到达后不再挤动下方内容^[1]。

体积与质量控制

有损格式的质量参数要按内容调，照片用中等质量通常看不出差别，插图与含文字的截图要保留更高精度。出图时去掉元数据，相机与编辑软件写入的信息对网页没有用处，却会占掉一份体积。

加载时机的安排

首屏大图不要用 loading="lazy"，推迟加载会拖长 LCP。屏幕外的图片再用 loading="lazy"，让浏览器把带宽先给首屏^[2]。首屏那张图还可以加 fetchpriority="high"。

改动带来的代价

换格式要动构建流程或者图片服务，AVIF 编码慢，批量转换耗时明显。有损压缩有上限，压过头会出现色块与模糊，要逐类设定质量。用一个支持内容协商的图片 CDN 能省下不少配置，但会多出一笔服务费。

与抓取和收录的关系

图片能否被收录，取决于它所在页面能否被抓取，与压缩与否无关。百度把搜索分成抓取、建立索引、展现三步^[3]，图片随页面一起被抓。图片优化的影响在于加载速度和带宽，以及用户在图片出来之前的去留。

附录

参见

• LCP
• CLS
• 首屏加载
• 资源优先级
• CDN

参考资料

官方（境外）

1. 《<img>：图像嵌入元素》，MDN Web Docs。
2. 《图片成效》，web.dev。

官方（国内）

3. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

4. 《Web Almanac》，HTTP Archive，2025。

外部链接

无。