blurhash とは

blurhash という興味深い OSS を発見したのでメモ。

• 「画像」から「ブラー画像」を作るための「ハッシュ値」を作成できる
• 「ハッシュ値」から、ブラー画像を作成できる

イメージはこんな感じ。

で、これは何に使うかと言えば、たとえば「アプリがサーバから画像をダウンロードして表示」という場面だ。

具体的には↓

1. サーバ側に画像を登録
   • このタイミングでサーバは、ブラー画像のハッシュ値も作成しておく
2. アプリ側からサーバ側に画像要求リクエスト
   • サーバ側は、アプリ側に「画像」と「ブラー画像のハッシュ値」を返す
3. アプリ側は画像ダウンロードする
   • 画像ダウンロード中は「ブラー画像のハッシュ値」からブラー画像を作成し、表示しておく

これで、画像ダウンロード中は、一律に「Loading..」みたいな表示にならず、その画像を想起させるブラーの画像を表示しておけるってわけだ。

---

実際の動作は以下のサイトで確認できる