BlurHash / ThumbHash 生成
BlurHash / ThumbHash
画像を短いBlurHashまたはThumbHashの文字列に符号化し、読み込み中の仮表示に使えるようにします。
BlurHashは20文字あまりで、ぼかした画像にデコードされます。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 bytebase64 ではなくパーセントエンコードです。25% ほど小さく、しかも読めます。そのまま貼り付けてください: background-image: url("…")
使い方
画像を置くか、ハッシュを貼ります
同じパネルで両方向に働きます。画像を入れればハッシュが、ハッシュを入れればデコードしたプレビューが出ます。
成分の数を選びます
ハッシュは4 + 2·x·y文字なので、4×3なら28文字です。成分が多いほど細かくなり、文字列も長くなります。4×3がよくある初期値です。
平坦な写真にはpunchを使います
平均の色を動かさずに変動の幅だけを広げるので、そのままでは平らな長方形にデコードされてしまう低コントラストの画像を救います。
よくある質問
なぜ元画像を先に32pxまで縮めるのですか
その周波数より上は、どのみち変換が捨ててしまうからです。原寸で符号化しても、同じ28文字を出すために1億回の基底の評価を費やすだけです。
平均の色だけが必要です
ハッシュの先頭6文字を取ってください。符号化されているのがまさにそれなので、背景色しか要らないページは、何もデコードしなくて済みます。
BlurHashとThumbHashのどちらを使いますか
どこにでもライブラリがあるのはBlurHashで、このページが吐くのもそれです。ThumbHashは同じ品質でより短く、アルファも運びますが、どちらにせよクライアント側にデコーダーが要ります。いま使っている構成にあるほうを選んでください。
ここから渡せます
ダミー画像生成
Placeholder Image
好きなサイズの単色またはグラデーションのダミー画像を、寸法を焼き込んで作ります。
平均色・代表色の抽出
Average & Dominant Colour
画像を代表する色を1つ、平均・中央値・最頻のいずれかで返します。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
JPEG圧縮
JPEG Compressor
指定した画質でJPEGを再エンコードし、前後の容量と差分をその場で見せます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
平均色・代表色の抽出
Average & Dominant Colour
画像を代表する色を1つ、平均・中央値・最頻のいずれかで返します。
画像リサイズ
Image Resizer
ピクセル・パーセント・長辺の目標値で大きさを変え、縦横比の固定と一括処理のプリセットを備えます。
ダミー画像生成
Placeholder Image
好きなサイズの単色またはグラデーションのダミー画像を、寸法を焼き込んで作ります。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
Base64から画像に復元
Base64 to Image
Base64文字列やデータURIを、表示もダウンロードもできる画像に戻します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。