gatsby image で使われている blur up というテクニックを調べました。
もしぼやけたままの状態になってしまったら問題があるため、
コンテンツ内の画像 <img> よりも背景画像 backgroud-image で使うと良いらしいです。
大きな画像を読み込むまで、背景画像のムードを維持することができます。
1kb未満（200byteなど）まで画像のサイズを小さくし、ソースコードにbase64で埋め込んでしまいます。
ガウシアンフィルターはcssでかけることができ、大きな画像を読み込んでから徐々にフィルターを解除するようなアニメーションを作ることで、違和感なく画像を切り替えることができます。
参考文献
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/