blur upに関する勉強


gatsby image で使われている blur up というテクニックを調べました。

もしぼやけたままの状態になってしまったら問題があるため、
コンテンツ内の画像 <img> よりも背景画像 backgroud-image で使うと良いらしいです。

大きな画像を読み込むまで、背景画像のムードを維持することができます。

1kb未満(200byteなど)まで画像のサイズを小さくし、ソースコードにbase64で埋め込んでしまいます。

ガウシアンフィルターはcssでかけることができ、大きな画像を読み込んでから徐々にフィルターを解除するようなアニメーションを作ることで、違和感なく画像を切り替えることができます。



参考文献
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

このブログは小沼 晋によって書かれました。