Web 页面背景图首选 WebP，次选 AVIF；WebP 兼具高压缩率、快解码与广浏览器支持，体积比 JPEG 小 25%–35%，支持透明通道且 CSS 行为一致。
Web 页面中用作背景的图片，优先选 WebP，次选 AVIF，老旧项目或需兼容 IE 时才退回到 JPEG 或 PNG。
WebP 是当前最平衡的选择
它在压缩率、解码速度和浏览器支持之间取得最佳折中。Chrome、Firefox、Edge、Safari（14+）均已原生支持，background-image: url("bg.webp") 可直接使用，无需 polyfill。
- 有损压缩下，体积比同等质量 JPEG 小 25%–35%，加载更快
- 支持透明通道（类似 PNG），但文件更小
- CSS 中无需额外判断，
background-size、background-position等行为与 PNG/JPEG 完全一致 - 注意：部分旧版 Android WebView（
回退，但纯 CSS 背景图无法做格式降级
AVIF 适合追求极致压缩的新项目
AVIF 压缩效率更高，尤其对渐变、文字叠加类背景图优势明显，但支持度略窄于 WebP。
- 同画质下比 WebP 再小 10%–20%，适合大尺寸首屏背景图
- Chrome 85+、Firefox 93+、Safari 16.4+ 支持；Edge 同 Chrome
- 不支持 IE 和 Android 低于 12 的系统；iOS 需 Safari 16.4+（即 iOS 16.4+）
-
编码耗时稍高，建议用
cwebp或avifenc预处理，避免构建时卡顿
JPEG / PNG 仅用于兜底或特殊需求
除非明确要兼容 IE11 或某些嵌入式浏览器，否则不建议作为首选。
立即学习“前端免费学习笔记（深入）”；
-
JPEG：适合照片类背景，无透明需求；但不支持 alpha 通道，半透明阴影会变成黑边 -
PNG：必须用透明时才选，比如带阴影、毛玻璃叠层；但体积大，PNG-24尤其明显 - 不要用
GIF做背景图——不支持半透明以外的 alpha，色彩只有 256 色，且无压缩优势 - 所有 PNG/JPEG 图都应经
pngcrush、jpegoptim或 Squoosh 批量优化
如何在 CSS 中安全使用现代格式
CSS 本身不支持格式探测或回退，所以“安全使用”依赖构建流程或服务端逻辑，而非纯前端声明。
- 若用 Webpack/Vite，可通过
url-loader或image-minimizer-webpack-plugin自动转 WebP 并生成 fallback 注释 - 静态资源路径可约定为
bg@webp.jpg，再由 Nginx 根据Accept请求头重写为.webp（需开启ngx_http_image_filter_module或用第三方模块） - 切忌在 CSS 里写两套
background-image——后声明的会完全覆盖前一条，无法实现“尝试加载 WebP，失败则用 JPEG”
/* ❌ 错误：后者永远生效 */
.bg {
background-image: url("hero.webp");
background-image: url("hero.jpg"); /* 这行覆盖上一行 */
}
/ ✅ 正确做法：靠构建或服务端控制单一 URL 指向最优格式 /
.bg {
background-image: url("/img/hero.bg");
}
真正难的不是选格式，而是让同一张背景图在不同设备、不同网络条件下，始终加载它能支持的最小可用格式——这需要构建链路或 CDN 配合，而不是靠 CSS 折叠解决。
