WebP/AVIF 有多香？比 JPEG 小 30%，<picture>标签完美解决兼容性

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

前端性能优化专栏 - 第七篇

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

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

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

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

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

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

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

1. 新一代格式：WebP 与 AVIF

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

2. 传统格式：JPEG 与 PNG

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

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

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

1. `srcset` 实现分辨率适配

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

ini 复制代码

<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： 作为旧浏览器的降级方案，保证兼容性。

2. `<picture>` 元素实现格式切换

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

bash 复制代码

<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。

核心优势：

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

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

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

1. 懒加载（Lazy Loading）

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

原生支持： 现代浏览器已支持 loading="lazy" 属性，无需 JavaScript 库。
ini 复制代码
```
<img src="image.jpg" loading="lazy" alt="懒加载图片">
```

2. 预加载（Preloading）

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

HTML 标签：