やってみよう「もう一度読み込む」を押すと、ぼやけた画像がくっきりしていく様子を見られます
読み込み・待機マイナー（知る人ぞ知る）
ブラーアップ
Blur-up / Progressive Image Loading
画像がまずぼやけた状態で出て、読み込みが終わるとじわっとくっきりする。
別名ぼかし読み込みLQIPプログレッシブ画像読み込みBlurHashプレースホルダー画像
どこで使われている？
- よく見かける場所
- Medium、ニュースサイト、写真が多いブログ、ネット通販
- 使うとよい場面
- 大きな写真の読み込みを待つ間に、どんな写真かを先に伝えたいとき
- 避けたい場面
- 小さなアイコンなど、すぐ読み込める画像
補足灰色のブロックで待たせるのが「スケルトンスクリーン」、画像そのものをぼかして待たせるのが「ブラーアップ」です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ブラーアップ（Blur-up / Progressive Image Loading）」を実装してください。 動き：画像の読み込み中は、ごく小さな低画質版を引き伸ばしてぼかして表示し、本来の画像の読み込みが終わったら、ぼかしを外しながらフェードで差し替える。 使う部品：低画質画像 + CSS の filter: blur() から本画像へフェード
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 低画質画像 + CSS の filter: blur() から本画像へフェード |
|---|---|
| iPhoneアプリなら | AsyncImage の placeholder（ぼかし画像は自作） |
| Androidアプリなら | Coil の placeholder + crossfade(true) |
| Flutterなら | FadeInImage（ぼかしは flutter_blurhash） |
| React Nativeなら | expo-image の placeholder（blurhash） |