图片优化与 CSS Sprites

图片通常占据网页资源的最大体积，优化图片对性能至关重要。

CSS Sprites（雪碧图）

原理

将多个小图标合并为一张大图，通过 background-position 定位显示。

.icon {
  width: 16px;
  height: 16px;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.icon-home { background-position: 0 0; }
.icon-user { background-position: -20px 0; }
.icon-settings { background-position: -40px 0; }

优点

• 减少 HTTP 请求数量
• 减少图片体积（合并后共用调色板）
• 预加载所有图标，无闪烁

缺点

• 修改图标需重新生成整张雪碧图
• 定位计算繁琐
• 不适合大图和频繁变化的图标

现代替代方案

Icon Font

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2') format('woff2');
}

.icon::before {
  font-family: 'iconfont';
  content: '\e001';
}

SVG Sprite

<!-- 内联 SVG Sprite -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
</svg>

<use href="#icon-home"></use>

Data URI / Base64

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB...');
}

小于 8KB 的图片可考虑 Base64 内联，超过会增加 CSS 体积。

图片格式选择

<!-- WebP 降级方案 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="fallback">
</picture>

响应式图片

<!-- 根据屏幕宽度加载不同尺寸 -->
<img
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  src="medium.jpg"
  alt="responsive image"
>

图片懒加载

<!-- 原生懒加载 -->
<img src="image.jpg" loading="lazy" alt="lazy loaded">

<!-- 占位图优化 -->
<img
  src="placeholder.svg"
  data-src="real-image.jpg"
  loading="lazy"
>

要点总结

• CSS Sprites 减少 HTTP 请求，适合静态小图标
• 现代方案：SVG Sprite、Icon Font、Base64 内联
• 优先使用 WebP/AVIF 格式，配合 picture 标签降级
• 响应式图片根据屏幕加载合适尺寸
• 使用 loading="lazy" 实现图片懒加载