全屏背景大图优化需在视觉可接受前提下精准控制体积、分辨率与加载行为：优先裁剪核心区域（16:9或4:3）后转webp（质量75–82），桌面最大2560×1440、移动端1242×2688；必须用提供fallback，服务端返回正确mime类型；css设background-size: cover及height: 100vh，禁用fixed；首屏关键图应预加载并配base64占位。
全屏背景大图的画质压缩不是“越小越好”，而是要在视觉可接受的前提下，精准控制体积、分辨率和加载行为。它和普通内容图片不同——不参与语义表达、不需屏幕阅读器读取、但对首屏渲染速度和视觉冲击力影响极大。
优先选 WebP + 裁剪后尺寸适配
全屏背景图通常只展示局部（比如人脸或构图中心），直接压缩原图效率低。建议先用图像工具（如 Photoshop 或在线 Cropper）裁出 16:9 或 4:3 的核心区域，再导出为 WebP 格式：
- 质量设为 75–82，兼顾清晰度与体积（高于 85 增长快、低于 70 易见色块）
- 尺寸按常见视口上限设定：桌面端最大输出 2560×1440，移动端 1242×2688（iPhone 14 Pro）已足够
- 务必启用“有损压缩”+“嵌入 ICC 配置文件”，避免 Mac/Windows 色差
必须用 提供 fallback，别只写 src
仅用 <img src="bg.webp"> 在旧版 Safari 或 IE 中会空白。正确写法是：
注意：服务器必须返回正确的 MIME 类型（image/webp），否则 Chrome 会拒绝加载；AVIF 可作为进阶选项，但需确认目标用户设备支持率。
配合 CSS 控制显示逻辑，避免无效加载
即使图片压缩到位，若 CSS 没配好，仍可能拉伸、模糊或触发多余重绘：
- 用
background-size: cover，而非100% 100%—— 后者强制拉伸必然失真 - 容器必须设
height: 100vh; margin: 0;，且html, body { height: 100%; }，否则cover失效 - 禁用
background-attachment: fixed在移动端——iOS Safari 会禁用或卡顿，可用 JS 模拟轻量视差替代
加载优化：懒加载 + 占位策略
全屏背景图通常是首屏关键资源，不该懒加载，但可以预加载并降级：
- 在
中加：<link rel="preload" as="image" href="bg.webp"> - 用 CSS 内联一个极小的 base64 渐变占位（如
background-image: linear-gradient(#1a1a1a, #2d2d2d)），避免白屏闪动 - 对低网速用户（可通过
navigator.connection.effectiveType判断），动态切换为更小尺寸版本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
