一、 H5 背景图设计规范
1. 尺寸规范
为了兼顾移动端多变屏幕比例，建议在设计与开发时采用以下两种基准尺寸：
- 标准尺寸（推荐）： 750 × 1334 像素（宽高比 9:16）。适配绝大多数主流手机。
- 全面屏尺寸（长屏）： 750 × 1624 像素（宽高比约 9:19.5）。专门针对全面屏与刘海屏手机，防止上下两端留白。
2. 安全区域设计原则
由于手机屏幕高度不同，背景图在前端渲染时通常会进行居中拉伸裁剪：
- 核心内容（文字、按钮、视觉主体）： 必须集中在中央的 640 × 1008 像素 范围内。
- 边缘区域： 尽量只保留延伸的背景纹理或可裁剪的次要元素，确保被裁剪时不会影响关键信息。
二、 文件大小与格式规范
为了保证 H5 页面在移动网络下的秒开体验，必须严格限制图片体积。
1. 体积控制
- 单张满屏背景图： 建议控制在 200 KB 以内。
- 首屏背景图： 越小越好，建议压缩至 60 KB - 100 KB 之间，以提升用户的首开视觉体验。
2. 格式推荐
- WebP： 优先推荐。相同画质下体积比 JPEG 小 25% 到 30% 左右，移动端浏览器已全面支持。
- JPEG / JPG： 适用于色彩丰富、无透明度要求的复杂背景图，压缩率高，兼容性佳。
- PNG： 仅用于需要透明背景的漂浮物或装饰图标，不建议直接用作满屏背景图。
WebP 格式由于文件体积更小、完美支持透明度且兼具极佳的浏览器兼容性，是提升网页背景图片加载速度与整体性能的最佳选择。
三、 2K 高清图片处理流程（Figma 处理）
将下载的 2K 高清图片（如 2560 × 1440）转换为 H5 规格，可选用以下工具进行处理：
- 创建 Frame： 按下快捷键
F创建一个 Frame，在右侧面板输入尺寸：宽度 750，高度 1624（或 1334）。 - 置入图片： 按下快捷键
Ctrl + Shift + K（Mac 为Cmd + Shift + K）选择 2K 图片，点击创建好的 Frame。 - 设置填充模式： 确保右侧面板 Fill（填充）属性中图片模式为 Fill。点击图片缩略图，在弹出的预览框中可以直接拖拽调整图片在 Frame 中的居中位置。
- 导出： 选中 Frame，滚动到右侧最下方 Export 栏目，格式选择 JPG，倍率保持 1x，点击导出。
四、 后期体积二次压缩
从设计工具导出的图片，在放入前端代码库之前，强烈建议使用专业工具进行二次压缩：
- TinyPNG / TinyJPG： 行业常用的无损/准无损压缩工具，能将 JPG 文件体积削减 50% 以上。
- Squoosh (由 Google 开发)： 支持导入 JPG 并将其转换为 WebP 格式。建议将 WebP 的 Quality（质量）设为 75 - 80，通常能完美压缩到 100 KB 以内。
五、 前端 CSS 实现建议
为了让背景图在不同尺寸的手机屏幕上保持完美平铺并不变形，推荐使用以下代码配置：
.h5-background {
background-image: url("your-image.webp");
background-repeat: no-repeat;
background-position: center center;
/* 关键属性：保持纵横比缩放背景图片，使背景图片完全覆盖背景区域 */
background-size: cover;
}如何在 CSS 背景中优雅地使用 WebP 虽然现代浏览器基本全面支持，但如果你需要确保在极少数过时的老旧设备上也能正常显示，可以通过 CSS 的 image-set() 或配合 JavaScript（如 Modernizr）来做降级处理：
/* 现代浏览器的标准写法，利用 image-set 自动选择 */
.hero-background {
background-image: -webkit-image-set(
url("background.webp") type("image/webp"),
url("background.jpg") type("image/jpeg")
);
background-image: image-set(
url("background.webp") type("image/webp"),
url("background.jpg") type("image/jpeg")
);
background-size: cover;
background-position: center;
}