WebP/AVIF 有多香？

🖼️ 告别“图多杀猫”：前端图片加载策略全攻略，让你的页面又快又美！

在前端性能优化的战场上，图片无疑是最大的“资源杀手”。它们通常占据了网页下载体积的一半以上。一个图片加载策略不当的网站，就像一辆装满了超重行李的跑车，再好的引擎也跑不快。

本篇，我们就来深入探讨如何系统性地优化图片加载，让你的页面既高清又秒开！

⚠️ 图片优化的意义：不仅仅是快

图片优化是一种系统性工程，它的意义远超乎“加载快一点”：

• 体积最大： 图片是网页中体积最大的静态资源之一，优化可显著降低页面首屏加载时间。
• 影响 SEO： 页面加载速度是搜索引擎排名的重要指标。
• 影响转化率： 页面每延迟一秒，用户流失率和转化率都会受到负面影响。
• 用户留存： 快速、流畅的体验是用户留下的关键。

✨ 策略一：格式选择 — 新旧格式的博弈

选择合适的图片格式是优化的第一步，也是最重要的一步。我们必须根据场景和兼容性，在新旧格式之间做出权衡。

新一代格式：WebP 与 AVIF

格式	优势	适用场景	兼容性
WebP	更高压缩率，体积比 JPEG 小约 30%，支持无损和有损压缩，支持透明度。	网页中的大部分图片，尤其是需要透明度的图标。	广泛支持（Chrome, Firefox, Edge, Safari）。
AVIF	基于 AV1 视频编码，压缩率比 WebP 更高，体积更小。	对性能要求极高，且目标用户群浏览器支持度较高的场景。	较新，支持度稍低于 WebP。

传统格式：JPEG 与 PNG

• JPEG： 适合色彩丰富的照片或大图，采用有损压缩，不支持透明度。
• PNG： 适合需要透明背景的图标、Logo 或截图，采用无损压缩，体积通常较大。

🔄 策略二：响应式图片 — 按需加载的智慧

在移动设备、平板和高清屏并存的今天，给所有设备都加载同一张大图是极大的浪费。响应式图片就是解决这个问题的“智慧大脑”。

srcset 实现分辨率适配

srcset 允许浏览器根据设备的分辨率和视口大小来选择最合适的图片源。

<img srcset="image-480w.jpg 480w,
             image-800w.jpg 800w"（图片源的集合）
     sizes="(max-width: 600px) 480px, 800px"（提供上下文，<=600像素使用480，大于使用800）
     src="image-800w.jpg"（降级方案，为旧浏览器提供）
     alt="响应式图片">

• srcset： 告诉浏览器有哪些可用的图片资源及其对应的宽度（w）。
• sizes： 告诉浏览器在不同视口大小下，图片将占据的宽度。
• src： 作为旧浏览器的降级方案，保证兼容性。

<picture> 元素实现格式切换

<picture> 元素可以实现更高级的控制，让浏览器根据格式兼容性来选择图片源，完美解决新格式的兼容性问题。

<picture>（从上往下依次询问是否符合这个source）
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="多格式图片">
</picture>

工作原理： 浏览器会从上往下依次检查 <source> 标签，一旦找到一个它支持的 type 或符合条件的 srcset，就会加载该资源，并忽略后续的 <source>。如果所有 <source> 都不支持，则会加载最后的 <img> 标签中的 src。

核心优势：

• 浏览器自动选择最佳格式与尺寸。
• 避免浪费带宽与不必要的下载。

🔧 策略三：加载时机 — 懒加载与预加载

除了图片本身，何时加载图片也至关重要。

懒加载（Lazy Loading）

对于首屏以外的图片，应采用懒加载。即只有当图片进入或即将进入用户视口时才开始加载。

• 原生支持： 现代浏览器已支持 loading="lazy" 属性，无需 库。

<img src="image.jpg" loading="lazy" alt="懒加载图片">

预加载（Preloading）

对于首屏关键的图片（如 Logo、背景图），应使用预加载，确保它们尽快被加载。

• HTML 标签：

<link rel="preload" href="critical-image.jpg" as="image">

✅ 总结与实践：图片优化 Check List

图片优化是一个多维度的工程，以下是实践中的 Check List：

优化层面	实践方法	目标
格式层面	优先使用 WebP / AVIF，PNG/JPEG 作为降级。	最小化文件体积。
响应式层面	利用 <picture> 和 srcset 实现格式和尺寸的按需加载。	避免加载不必要的资源。
加载层面	首屏关键图使用预加载，非首屏图使用懒加载。	优化加载时机，提升首屏速度。
压缩层面	在构建阶段使用工具（如 imagemin）进行自动化无损/有损压缩。	保证图片质量的同时进一步减小体积。
架构层面	接入 CDN 与专业的图片服务（如阿里云 OSS、七牛云等）。	自动处理格式转换、缩放和压缩。

工程化必备！SVG 雪碧图的最佳实践：ID 引用 + 缓存友好，无需手动算坐标

✂️ 图标“合体”大法：SVG 雪碧图如何终结 HTTP 请求地狱，让你的图标秒速加载？

在上半部分中，我们探讨了图片加载策略，解决了大图的性能问题。但对于网页中那些零散的小图标，比如点赞、分享、设置等，它们虽然体积小，却有一个致命的性能痛点：每个图标都会发起一个独立的 HTTP 请求！

当页面有几十甚至上百个图标时，浏览器就会发起几十或上百个请求，这在 HTTP/1.1 时代是性能杀手，即使在 中，过多的请求也会增加 TCP/TLS 握手的开销。

今天，我们就来学习一个古老而又现代的优化技巧——雪碧图（CSS Sprites） ，以及它在现代 SVG 图标体系中的最佳实践。

什么是雪碧图（CSS Sprites）？

雪碧图，最早是为 PNG 这类位图图标的优化而生，在 HTTP/1.1 的时代，它几乎是前端性能优化的标配。

• 定义：将多个小图标合并为一张大图，通过 CSS 的 background-position 属性来显示指定区域。

• 目的：将多次 HTTP 请求合并为一次，大幅减少网络开销，提高网页加载速度。

为什么要用雪碧图优化 SVG 图标？

虽然 SVG（Scalable Vector Graphics）本身是 XML 文本，具有可缩放、清晰度高、可被 CSS 样式控制等优点，但它依然面临请求过多的性能挑战。

SVG 雪碧图的优化效果体现在：

• 减少 HTTP 请求：将多个图标合并成一个文件，实现一次加载，全面优化。
• 提升缓存效率：浏览器可缓存整个图标集，加快后续页面加载。
• 减小文件体积：合并后的文件更容易被服务器进行 Gzip/Brotli 压缩，传输更快。

🛠️ SVG 雪碧图的两种实现方式

与传统的 PNG 雪碧图不同，SVG 雪碧图拥有更灵活、更强大的实现方式。

✨ <symbol> + <use> 方式（强烈推荐）

这是现代 Web 开发中优化 SVG 图标的最佳实践，它兼具性能、可维护性和样式灵活性。

核心原理：

• 将所有图标定义在一个隐藏的 <svg> 容器中，每个图标用 <symbol> 标签包裹，并赋予一个唯一的 id。

• 在页面需要使用图标的地方，通过 <use> 标签引用 <symbol> 的 id。

代码示例：

<!-- 1. 雪碧图文件（通常放在页面顶部或外部引入） -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <!-- 这个svg容器本身不会在页面上被渲染出来，作用：作为图标模板的定义库 -->
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <!-- path data for heart -->
  </symbol>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <!-- path data for star -->
  </symbol>
</svg>
​
<!-- 2. 页面中使用 -->
<svg class="icon icon-red">
  <!-- 通过 xlink:href 引用雪碧图中的图标 ID -->
  <use xlink:href="#icon-heart" /> 
</svg>

优点：

• 可样式化：可使用 CSS 轻松调整图标的 fill（颜色）和 stroke（描边），实现主题切换。
• 可访问性：支持 <title>、<desc> 标签，提升可访问性。
• 缓存友好：可内联或外部引入，利用浏览器缓存。
• 维护性高：无需手动计算坐标，只需引用 ID。

🔧 CSS 背景图方式（传统方式）

这种方式与传统的 PNG 雪碧图类似，将 SVG 文件作为背景图，通过 background-position 来控制显示区域。

代码示例：

.icon-heart {
  background-image: url('sprite.svg'); /* 指定了 svg 雪碧图 */
  background-position: 0 0; /* 将图片移动到合适的位置 */
  width: 24px; /* 必须要制定元素的宽高 */
  height: 24px;
}

特点与局限：

• 优点：实现方式简单，兼容性好。

• 缺点：

  • 样式控制受限：无法用 CSS 改变图标颜色，失去了 SVG 的最大优势。
  • 维护困难：需要手动计算每个图标的 background-position，不适合动态图标或主题切换。

✅ 小结：SVG 雪碧图的最佳实践

方式	性能	样式控制	维护难度	推荐度
<symbol> + <use>	极佳（单次请求，可缓存）	极佳（CSS 可控颜色）	低（ID 引用）	⭐⭐⭐⭐⭐
CSS 背景图	良好（单次请求，可缓存）	差（无法改变颜色）	高（手动定位）	⭐⭐

结论： SVG 雪碧图是现代 Web 图标优化的最佳实践之一，而 <symbol> + <use> 方式兼具性能与可维护性，是图标优化的首选方案。