BlurHash 占位串生成
BlurHash / ThumbHash
把图片编码成一小段 BlurHash 或 ThumbHash 字符串，用作加载时的模糊占位。
BlurHash 是二十来个字符，能解码成一张图片的模糊版本——短到可以放在数据库里 URL 旁边的一列，随同一份 JSON 传输，让布局在照片到达之前就显示出可辨认的东西。
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
SVG data URI
580 B用的是百分号编码而不是 base64：小了约 25%，而且还看得懂。可以直接贴进 background-image: url("…")
怎么用
拖入图片，或粘贴 hash
两个方向在同一个面板上：图片给你 hash，hash 给你解码后的预览。
选分量数
一个 hash 是 4 + 2·x·y 个字符，所以 4×3 是 28。分量越多细节越多、字符串越长；四乘三是通常的默认。
平淡的照片用 punch
它在不移动平均色的前提下放大变化，救回原本会解码成一块平板的低对比图片。
常见问题
为什么源图先缩到 32px？
因为高于那个频率的一切反正都会被变换丢弃。按全分辨率编码要花一亿次基函数求值，产出同样的 28 个字符。
我只需要一个平均色。
那就取 hash 的前六个字符——它们编码的正是这个，所以只需要背景色的页面什么都不用解码。
BlurHash 还是 ThumbHash？
BlurHash 到处都有库，也是这个页面输出的。ThumbHash 同等质量下更短并带 alpha，但无论哪种客户端都需要一个解码器——选你的技术栈已经有的那个。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
图片主色提取
Average & Dominant Colour
取图片的平均色、中位色或出现最多的颜色作为代表色输出。
图片尺寸调整
Image Resizer
按像素、百分比或最长边缩放，可锁定宽高比并批量套用预设。
占位图生成
Placeholder Image
生成任意尺寸的纯色或渐变占位图，并把尺寸数字写在图上。
Base64 编码解码
Base64 Encoder & Decoder
对文本和文件做 Base64 与 Base64URL 编解码，UTF-8 处理正确。
Base64 转图片
Base64 to Image
把 Base64 字符串或 data URI 还原成可预览、可下载的图片。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。