图片相关的优化

图片通常是网页中体积最大的资源，优化图片能显著降低页面加载时间。

1. 选择合适的图片格式

格式	特点	适用场景
JPEG	有损压缩，体积小	照片、复杂图像
PNG	无损压缩，支持透明	图标、截图、需要透明的图
GIF	支持动画，色彩少	简单动画
WebP	体积小、质量高、支持透明和动画	现代浏览器首选
AVIF	压缩率更高	新一代格式，兼容性逐步提升
SVG	矢量，无限缩放	Logo、图标、简单图形

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

2. 图片压缩

• 使用工具压缩：TinyPNG、Squoosh、ImageOptim。
• 在构建流程中自动压缩：imagemin、sharp。
• 平衡质量与体积，通常 75%~85% 质量足够。

3. 响应式图片

根据屏幕尺寸和 DPR 提供不同尺寸图片：

<img srcset="img-320.jpg 320w, img-768.jpg 768w, img-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="img-1200.jpg" alt="描述">

4. 懒加载

<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="描述">

5. 使用 CSS 精灵图 / 字体图标 / SVG

• CSS 精灵图：合并小图标，减少请求数。
• 字体图标：如 iconfont、IcoMoon，矢量可缩放。
• SVG：直接内联，减少 HTTP 请求。

6. 图片 CDN 与自适应

• 使用 CDN 加速图片分发。
• 根据 URL 参数动态裁剪、压缩、转格式。
• 示例：https://cdn.example.com/image.jpg?w=800&format=webp

7. 关键优化 checklist

• [ ] 优先使用 WebP / AVIF。
• [ ] 图片压缩后再上线。
• [ ] 非首屏图片开启懒加载。
• [ ] 使用响应式图片避免移动端加载大图。
• [ ] 小图标使用 SVG 或字体图标。
• [ ] 配置合理的缓存策略。