WebP/AVIF比JPG更适合background-image，因其支持alpha通道、更优预测编码及HDR元数据，而JPG的DCT块编码和色度抽样易致线条/文字失真；应避免background-size:cover导致的插值失真，改用100%尺寸+position对齐，并禁用模糊滤镜。
HTML 背景图片压缩后失真，本质不是「补救」问题，而是压缩方式和使用策略错配——background-image 加载的是最终渲染像素，一旦用有损压缩（如低质量 .jpg）或过度下采样，浏览器无法还原细节。
为什么 WebP / AVIF 比 JPG 更适合 background-image
多数人用 convert -quality 60 或在线工具压 JPG，结果边缘发虚、渐变断层、文字锯齿。这不是“压太狠”，是 JPG 的 DCT 块编码 + 亮度/色度抽样天生不适合含线条、文本、半透明过渡的背景图。
- WebP 支持真正的 alpha 通道和更优的预测编码，同体积下对 UI 类背景（如带阴影的 banner、磨砂玻璃效果）保真度高 30%+；
- AVIF（基于 AV1）在 0.5–1MB 范围内对复杂渐变和噪点纹理压制能力远超 WebP，且支持 HDR 元数据（虽目前浏览器渲染不启用，但为未来留余量）；
- JPG 应仅用于纯摄影类大图（如首页全屏轮播），且
quality不低于 82，禁用chroma-subsample 4:2:0（用-sampling-factor 1x1,1x1,1x1强制 4:4:4）。
background-size: cover 导致的隐性失真怎么绕过
background-size: cover 会拉伸/裁剪图片以填满容器，若原始图宽高比与容器不一致，浏览器用双线性插值重采样——这是失真的第二来源，尤其在 Retina 屏上明显。
- 优先用
background-size: 100% 100%+background-repeat: no-repeat，再通过background-position手动对齐关键区域（如人脸、logo）； - 对响应式背景，用
@media切不同尺寸图：background-image: url(bg-1200w.avif), url(bg-800w.avif)，避免单图撑满所有断点； - 禁用
image-rendering: -webkit-optimize-contrast等强行锐化 CSS，它会让 JPEG 块效应更刺眼。
用 CSS 滤镜临时掩盖失真？别碰 filter: blur()
有人试过加 filter: blur(0.5px) 让块状噪点“糊”成一体，实际适得其反：模糊会扩大色块边界，让 JPG 的振铃效应（halo）更突出，且增加合成层开销。
立即学习“前端免费学习笔记（深入）”；
- 真正有效的视觉平衡手段是叠加一层极低透明度的噪点纹理（
background-image: url(noise.png), url(bg.avif)），用background-blend-mode: overlay分散注意力； - 对文字压图场景，直接用
background-clip: text+-webkit-text-fill-color: transparent，把文字当作“蒙版”，让背景图只在文字区域显示——此时只需压文字轮廓部分，大幅降低图复杂度； - 若必须用滤镜，
filter: contrast(0.98) brightness(1.02)微调比模糊安全，但仅限调试，不可作为上线方案。
/* 示例：响应式保真背景写法 */
.hero {
background-image:
url('hero.avif'),
url('hero.webp'),
url('hero.jpg');
background-size: 100% 100%;
background-position: center 20%;
background-repeat: no-repeat;
}
<p>@media (min-width: 768px) {
.hero {
background-image: url('hero-1200.avif');
background-position: center 10%;
}
}最易被忽略的一点：Webpack/Vite 的 asset 模块默认对 .png 启用无损压缩（pngquant），但对 .jpg 和 .webp 不处理——你手动压的图，可能被构建工具又压一遍，参数冲突。检查 vite.config.ts 中的 build.assetsInlineLimit 和 imageMinPlugin 配置，或直接用 public/ 目录托管已优化图，绕过打包时的二次处理。
