BlurHash - ぼかし画像プレースホルダー生成器

 (blurha.sh)
8 ポイント 投稿者 xguru 2020-02-21 | 3件のコメント | WhatsAppで共有

  • 画像を読み込んでぼかし処理した後、それを20〜30文字のハッシュコードに変換

  • Web/アプリで画像を読み込む前にハッシュコードだけを受け取り、先にぼかし画像を表示してから、ネットワーク経由で画像を取得して表示

  • C/Swift/Kotlin/Python/Typescript のコードを提供

  • Go/PHP/Java/Clojure/Rust/WASM にはサードパーティ実装あり

関連記事

3件のコメント

 
xguru 2020-02-21

これまで見てきた画像プレースホルダー処理の中で、いちばん気に入った方式ですね。結果画面もきれいです。

管理ツールで画像をアップロードするたびにファイル名をハッシュコードにしたらどうかと思ったのですが、base83 encoding がちょっと気になりますね。
 
nemorize 2025-08-28

このコメントを見て「いつか適用してみよう〜」と思っていたのですが、5年越しでようやく適用してみました。
B83 には ? / # = のような特殊文字が含まれているので、そのまま B83 をもう一度 B64-urlsafe でエンコードしてしまいました（笑）；

基本コンポーネント設定の 43 ハッシュ値を B64 でエンコードしても 40 文字前後なので、思ったより大きな負担にはならず、
状況に応じて 33 あるいは 3*2 程度まで減らせば、見た目はやや劣りますが、25 文字前後で処理できます。
 
sduck4 2020-02-21

おお…それなら画像名そのものだけでプレースホルダーを表示できそうですね！ 素晴らしいアイデアです。 :)