PHP小码农

Appearance

图片优化策略 ​

图片通常占据网页总加载体积的 50% 以上，是最重要的性能优化对象。通过选择合适的图片格式、压缩图片、使用响应式图片和懒加载技术，可以显著减少页面加载时间。本节将系统介绍图片优化的各个环节。

前置知识

阅读本节前，建议先了解：延迟与异步加载

图片格式选择 ​

各格式对比 ​

格式类型透明度动画压缩率适用场景
JPEG有损不支持不支持高照片、复杂图像
PNG无损支持不支持中图标、截图、需要透明
WebP有损/无损支持支持很高通用（推荐）
AVIF有损/无损支持支持最高现代浏览器（推荐）
SVG矢量支持支持无损图标、logo、简单图形
GIF无损支持支持低简单动画（逐步淘汰）

格式选择策略 ​

照片/复杂图像 → WebP/AVIF（有损）→ JPEG 降级
图标/Logo      → SVG
截图/需要透明  → WebP/AVIF（无损）→ PNG 降级
简单动画        → WebP 动画 → GIF 降级

响应式图片 ​

srcset 和 sizes ​

html
<!-- 基本响应式图片 -->
<img
  src="image-400.jpg"
  srcset="
    image-400.jpg   400w,
    image-800.jpg   800w,
    image-1200.jpg  1200w,
    image-1600.jpg  1600w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="响应式图片示例"
/>

picture 元素 ​

html
<!-- 根据条件选择不同图片 -->
<picture>
  <!-- AVIF 格式（现代浏览器） -->
  <source
    type="image/avif"
    srcset="image-400.avif 400w, image-800.avif 800w, image-1200.avif 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
  />

  <!-- WebP 格式 -->
  <source
    type="image/webp"
    srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
  />

  <!-- JPEG 降级 -->
  <img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="产品图片"
  />
</picture>

艺术指导（Art Direction） ​

html
<!-- 不同屏幕尺寸使用不同的裁剪图片 -->
<picture>
  <!-- 移动端：竖版裁剪 -->
  <source media="(max-width: 600px)" srcset="hero-mobile.webp" type="image/webp" />
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg" />

  <!-- 桌面端：宽版裁剪 -->
  <source srcset="hero-desktop.webp" type="image/webp" />
  <img src="hero-desktop.jpg" alt="首页横幅" />
</picture>

图片压缩 ​

压缩策略 ​

策略说明工具
有损压缩牺牲少量质量换取更小体积Squoosh、ImageOptim
无损压缩不损失质量的压缩PNG OptiPNG、Zopfli
智能压缩根据内容自动选择最优参数Squoosh、Sharp

压缩建议 ​

html
<!-- 压缩前后对比 -->
<!-- 原始 JPEG: 1.2MB -->
<!-- WebP 有损（quality=80）: 150KB -->
<!-- AVIF 有损（quality=65）: 80KB -->

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="照片" width="800" height="600" />
</picture>

懒加载 ​

loading="lazy" ​

html
<!-- 首屏图片：不使用懒加载 -->
<img src="hero.jpg" alt="首屏图片" fetchpriority="high" width="1200" height="600" />

<!-- 非首屏图片：使用懒加载 -->
<img src="content-1.jpg" alt="内容图片" loading="lazy" width="800" height="400" />
<img src="content-2.jpg" alt="内容图片" loading="lazy" width="800" height="400" />

<!-- iframe 懒加载 -->
<iframe src="embed-widget.html" loading="lazy"></iframe>

原生懒加载注意事项 ​

特性说明
浏览器支持现代浏览器均支持
距离阈值通常在视口外 200-300px 开始加载
不适合首屏首屏图片不要懒加载
需要占位设置 width 和 height 防止 CLS

CDN 加速 ​

html
<!-- 使用 CDN 提供的优化图片 -->
<img
  src="https://cdn.example.com/images/optimized/product.webp"
  alt="产品图片"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

CDN 图片优化功能 ​

功能说明
自动格式转换根据浏览器支持返回 WebP/AVIF
自适应尺寸根据设备 DPR 和屏幕宽度返回合适尺寸
智能裁剪自动识别主体进行裁剪
全球加速通过边缘节点就近服务

实战示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片优化示例</title>
</head>
<body>
  <h1>图片优化策略</h1>

  <!-- 首屏 Hero 图片 -->
  <picture>
    <source type="image/avif" srcset="hero.avif" fetchpriority="high" />
    <source type="image/webp" srcset="hero.webp" fetchpriority="high" />
    <img src="hero.jpg" alt="首页横幅" width="1200" height="600" fetchpriority="high" />
  </picture>

  <!-- 产品列表图片 -->
  <div class="product-grid">
    <article>
      <picture>
        <source type="image/avif" srcset="product-1.avif" />
        <source type="image/webp" srcset="product-1.webp" />
        <img src="product-1.jpg" alt="产品1" width="400" height="300" loading="lazy" decoding="async" />
      </picture>
      <h3>产品名称</h3>
      <p>¥299.00</p>
    </article>
  </div>

  <!-- SVG 图标 -->
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
  </svg>
</body>
</html>

注意事项 ​

  1. 设置 width 和 height：防止图片加载导致的 CLS
  2. 使用现代格式：WebP/AVIF 比 JPEG/PNG 小 30-50%
  3. 首屏图片不懒加载：确保首屏内容尽快显示
  4. 使用 decoding="async"：告诉浏览器异步解码图片
  5. 提供有意义的 alt 文本：SEO 和无障碍需要

最佳实践 ​

  • 优先使用 AVIF/WebP 格式
  • 使用 picture 元素提供格式降级
  • 使用 srcset/sizes 实现响应式图片
  • 非首屏图片使用 loading="lazy"
  • 设置 width 和 height 防止 CLS
  • 使用 CDN 加速图片加载
  • 使用 decoding="async" 异步解码

下一节

继续学习：预加载与预连接

参考链接 ​