标签仅作源选择器，通过type属性按浏览器支持顺序加载AVIF→WebP→JPEG等格式，配合最优参数编码与prefers-color-scheme实现暗色模式双切换。

标签本身不处理“画质无损升级”，它只做**源选择器**——根据浏览器能力、设备特性或用户偏好，挑出最合适的那一张图来加载。所谓“无损升级”，其实是靠提前准备高质量、高兼容性的多格式资源，并让浏览器在支持的前提下自动选用更优格式（比如 AVIF → WebP → JPEG），而不是靠压缩算法或 JS 动态替换。

关键不是升级画质，而是避开低效格式、跳过不支持的格式、优先交付现代编码。下面分三块说清楚怎么做：

用 type 属性声明格式优先级

每个 通过 type 指定 MIME 类型，浏览器按顺序检查，遇到第一个自己支持的 type 就加载对应 srcset，跳过后续所有。

• AVIF 体积最小、画质最好，但 Safari 16.4+ 和 Chrome 109+ 才稳定支持 → 放最前
• WebP 兼容性广（Chrome/Firefox/Edge/Opera 全支持，Safari 14+）→ 放第二
• JPEG/PNG 作为兜底 → 不写 type，或明确写 type="image/jpeg"，放最后

示例：

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="风景照">
</picture>

确保格式文件本身是“无损前提下的最优编码”

格式切换 ≠ 自动画质提升。AVIF 文件如果用 -q 30 压缩，可能比 WebP -q 75 还糊。所谓“无损升级”，依赖的是：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• 同一原始图，用各自格式的**最高合理质量参数导出**（AVIF 推荐 q=60~80，WebP q=80~92，JPEG q=95）
• 避免转码链：不要 JPEG → WebP → AVIF，而应从 PNG 或 TIFF 源直出各格式
• 保留必要元数据（如 ICC 色彩配置文件），尤其对摄影类图片

配合 prefers-color-scheme 实现暗色模式下的视觉一致性

有些图片在暗背景下显得发灰（比如白底产品图），单独换格式不够，还得换构图或调色。这时可结合 media="(prefers-color-scheme: dark)" 实现“格式 + 内容”双切换：

• 暗色模式下提供专色版本的 AVIF/WebP（比如深灰背景+高对比主体）
• 注意顺序：暗色 + AVIF 的 必须放在亮色 + AVIF 之前，否则 Safari 会跳过
• 示例结构：

<picture>
  <!-- 暗色模式 AVIF -->
  <source media="(prefers-color-scheme: dark)" type="image/avif" srcset="photo-dark.avif">
  <!-- 亮色模式 AVIF -->
  <source type="image/avif" srcset="photo-light.avif">
  <!-- 暗色 WebP 回退 -->
  <source media="(prefers-color-scheme: dark)" type="image/webp" srcset="photo-dark.webp">
  <!-- 亮色 WebP 回退 -->
  <source type="image/webp" srcset="photo-light.webp">
  <img src="photo.jpg" alt="可切换明暗主题的产品图">
</picture>

不复杂但容易忽略