优先选用WebP格式：照片类图像比JPEG小25%～35%，支持透明且兼顾画质与体积；图标/图形类可选WebP或PNG-24；需兼容旧浏览器时须用<picture>配合fallback。
选对图片格式是画质与体积平衡的第一步，不是越新越好，也不是默认用 JPG 就完事。关键看图的内容类型、是否需要透明、目标浏览器支持度，以及你愿不愿意多写几行 HTML 做兼容。
照片类图像：优先 WebP，次选 JPEG
风景、人像、产品实拍这类色彩丰富、有渐变过渡的图，WebP 是当前最优解——同等主观画质下体积比 JPEG 小 25%～35%。但要注意两点：
- 导出时质量设在 0.7～0.8（Canvas 或工具中），低于 0.6 易出现色块和模糊
- 若必须支持 IE 或旧版 Safari，得用
<picture>包一层，把 WebP 放<source>里，JPEG 作兜底 - 别直接替换 src 为 .webp，否则不支持的浏览器会空白或报 404
图标/图形/带透明背景：WebP 或 PNG，慎用 GIF
Logo、按钮、图表、截图等边缘清晰、颜色少的图，PNG-8 或 PNG-24 更稳妥；如果想进一步压缩，WebP 同样支持透明且体积更小。GIF 虽然兼容性好，但仅限简单动画——静态图用 GIF 反而更大，且只支持 256 色，易显色阶。
- 纯色+透明需求 → PNG-24（无损）或 WebP（有损但更小）
- 需动画且帧数少 → GIF 仍可接受；帧多或需半透明 → 改用 APNG 或视频替代
- SVG 更适合线条图标、可缩放 logo，不是位图替代方案
高要求场景：AVIF 是未来，但需谨慎落地
AVIF 压缩率比 WebP 再降 20% 左右，尤其在低质量档位优势明显。但它目前仅被 Chrome、Firefox、Edge 新版本原生支持，Safari 16.4+ 才开始有限支持。生产环境用它，必须：
立即学习“前端免费学习笔记（深入）”；
- 放在
<picture>最顶部的<source>中 - 后面紧跟 WebP 和 JPEG 两层 fallback
- 确认 CDN 或服务器已正确返回
image/avifMIME 类型
别忽略原始文件本身
再好的格式也救不了“大图小用”：一张 3000×2000 的图，只在页面上显示 300×200，却用 CSS 缩放或 HTML width/height 强制压小——浏览器照样下载全部像素。真正有效的是：
- 服务端生成对应尺寸的图（如 300w、600w、900w 版本）
- 用
srcset+sizes让浏览器按需取用 - 避免 Canvas.toDataURL() 仅调质量不缩放，否则可能越压越大
