视频预览雪碧图计算器

预览雪碧图是怎么工作的

用户在进度条上随手一拖，播放器要立刻给出对应时间的小画面。如果每个时间点请求一张图，一次拖动就会发出几十个请求——这就是雪碧图存在的原因：把上百张小帧拼成一张大图，一次加载、整图缓存，定位靠 CSS 的 background-position。

三个关键参数怎么选

• 抽帧间隔：10 秒一帧是长视频的常用值；短视频用 2–5 秒更细腻。间隔越小，用户拖动时预览更新越连续，但帧数按比例增加。
• 单帧尺寸：160×90 是主流选择，够看清人物和场景。再小就看不出内容，再大则整图体积失控。
• 每行帧数：常见 10 列。列数太少会让高度过长，某些设备的纹理尺寸上限是 8192 px，超过就会渲染失败——大图务必检查长边。

体积怎么估

一张 1600×630 的雪碧图约 100 万像素。经验值：JPEG 约 0.09 字节/像素、WebP 约 0.05、AVIF 约 0.02。同一张图 WebP 通常比 JPEG 小四成左右，而浏览器已普遍支持 WebP，没有理由不用。

另一个常被忽略的点：雪碧图是整图加载的。如果一百多帧拼出 2 MB 的图，用户一进播放页就要下载这 2 MB——所以单帧尺寸和格式的选择比想象中重要，宁可小一点、用 WebP。

你可能还想问

雪碧图用在什么场景？

把视频按等间隔截成小图拼成一张大图，用于播放器进度条悬停预览，避免逐帧加载；计算器帮你确定行列数、缩略图尺寸与总图片大小。

行列数和缩略图尺寸怎么定？

先定单张缩略图宽高（常见 160×90），再按帧数算出合理行列比例（接近正方形的大图加载更均匀）；总尺寸控制在合理像素内，过大反而拖慢首屏。

生成的图怎么配合播放器使用？

用 CSS background-position 或 canvas drawImage 按索引取对应格子，索引 = 播放进度 ÷ 总时长 × 帧数；把每帧的时间间隔也一并记录，定位更精准。

相关工具

相关内容