图像预加载占位方案对比
特性 | 高斯模糊图 | BlurHash | ThumbHash | 主色值 |
---|---|---|---|---|
占数据库容量 | 较大 ( 200 ~ 5k 字节) | 极小 (30+ 字节) | 极小 (20+ 字节) | 最短 (7-9 字符) |
模糊质量 | 最高 | 较高 | 很高 | 无任何细节 |
性能影响 | 数据库性能影响较大 | 极小 | 极小 | 极小 |
综合评价 | 模糊质量最好 存储容量很大 效率一般 | 模糊质量较好 存储容量小 效率很高 | 模糊质量很好 存储容量更小 效率很高 | 纯色无细节 存储容量最小 效率最高 |
我们非常感谢 BlurHash 和 ThumbHash 的开源,但原始库对图片格式支持 非常有限,更无法简单支持 视频、动图。得益于缤纷云 CoreIX 绝佳的 视频、图片格式 和 色彩模式 兼容能力,你可以简单我们的接口在 0.1 秒内获得大量的 额外兼容性,包括:
- P3、Adobergb、CMYK 等色域或色彩模式的照片;
- 大量 RAW 格式原片;
- 借助 frame 截图参数 支持获取
视频
和动图
的哈希占位图
方案预览

如何使用
原理与步骤
- 只需在图像URL后添加相应参数:
- BlurHash:
fmt=blurhash
- ThumbHash:
fmt=thumbhash
- BlurHash:
- 将得到的
占位哈希值
直接存入数据库 - 在客户端请求数据时,直接将
占位哈希值
输出到接口结果(例如 json)中 - 客户端根据接口中相关字段提供的
占位哈希值
Decode 出模糊图片,填充至图片容器(例如 html 中的 img 标签)—— 这一步无需网络,处理时间大约是亚毫秒级,用户看到预加载的占位模糊图不会有任何延迟感 - 再通过相关 URL 远程加载清晰的缩略图或原图
结合 crop 和 resize(图像缩略、裁剪)参数,可获取原图某一部分的模糊hash