BlurHash & LQIP プレースホルダー生成ツール
ローカル画像を選び、BlurHash 文字列と小さな JPEG データ URL に符号化します。成分数と LQIP 幅を決め、2 つのプレビューを比べてからコピーまたはダウンロードできます。
ブラウザ内でローカルに実行 · BlurHash · LQIP · データ URL
ローカル画像を選び、BlurHash 文字列と小さな JPEG データ URL に符号化します。成分数と LQIP 幅を決め、2 つのプレビューを比べてからコピーまたはダウンロードできます。
ブラウザ内でローカルに実行このワークベンチは、ローカルの画像をブラウザー自身のデコーダーで読み込み、長辺 160 px 以内のキャンバスに描いてから、その画素を 2 通りに符号化します。BlurHash 文字列と、小さな JPEG のデータ URL です。どちらも同じ画像のプレースホルダーで、タブの外へは出ません。
左のプレビューは元画像の形でハッシュを復号したもの、右は生成したばかりの JPEG です。つまり 2 つの枠は、実際の画像が読み込まれる間に訪問者が見る姿をそのまま示します。下の行には元画像の寸法、文字列の長さ、JPEG の重さが出ます。
BlurHash は、画像をぼかした状態を短いテキストに符号化したものです。先頭の数文字が成分のグリッドと量子化した最大値を持ち、その後に平均色とセルごとの係数が続きます。既定の 4 × 3 では文字列は 28 文字でした。1 × 1 の 1 成分だけなら 6 文字で単色になり、最大の 9 × 9 では 166 文字になり構造が最もよく残ります。
この文字列は、自分のページ側の BlurHash デコーダーで使うためのものです。JavaScript・PHP・Swift・Kotlin のリファレンス実装、React コンポーネント、ハッシュを受け取る画像 CDN などが該当します。幅・高さ・メタデータは含まれず、デコーダーが指定した大きさで描画します。このページは符号化を行い、プレビュー用に自分のハッシュを復号もしますが、ハッシュを入力として受け取る機能はありません。
2 つ目の出力は本物の JPEG で、選んだ幅と固定の圧縮設定（品質 0.58）で書き出されます。検証に使った 800 × 500 の画像では、既定の 32 px で 987 バイト（データ行では 1 KB）、96 px でも 1.6 KB 未満でした。正確な数値は画像ごとにデータ行へ表示されます。
データ URL なので、img の src、CSS の background-image、picture 要素へそのまま貼れ、追加のリクエストは不要です。JPEG にアルファチャンネルはないため、透明な部分は白で塗られます（ハッシュと同じ合成です）。縦横比は元画像のままです。ダウンロードすると voritools-lqip.jpg として保存されます。
画像の読み込み・描画・符号化はすべてページ内で行います。ファイルの中身はどこにも送信されず、アカウントもアップロード手順もありません。ページを開いた後はオフラインでも動きます。同じ画像・同じ成分数・同じ幅なら常に同じ文字列と同じ JPEG になるため、結果は再現できます。
符号化は BlurHash のリファレンス実装に沿っており、ここで生成したハッシュはリファレンス実装と比較して一致したため、他のデコーダーでも同じプレースホルダーが描画されます。実際の制限はブラウザー側だけです。非常に大きな写真でも符号化は 160 px で標本化するため問題ありませんが、タブが先にファイルを復号する必要があり、ブラウザーが読めない形式はあらかじめ変換が必要です。