参考：https://zenn.dev/sugamaan/articles/9adab715122679
デコードとは、異なる形式に変換されたデータを元の状態に戻すことであり、画像のデコード処理というのは、画像データをHTML上で表示できるようにデータを処理することである。
画像のデコードはブラウザのメインスレッドをブロックするため、非同期の画像の読み込みだけでなく、非同期でのデコード処理についても考慮する必要がある。
loading=”lazy”を使用することで画像の遅延読み込みを行うことができ、遅延読み込みを行うことで非同期的に画像を読み込むことができるが、一方で同期的に読み込むよりも読み込みが遅くなるため、Above the fold では同期的に読み込むのが鉄則である。
一方、decoding=”async”を使用することで、画像のデコードを非同期で行うことができる。これは上述のとおり、メインスレッドをブロックするデコード処理をメインスレッドをブロックせずに非同期でデコードさせることができるが、画像の読み込みとデコードのタイミングがずれるため、スクロールしても画像がまだ表示されていないということが起こる可能性がある。
つまり、Above the fold では decoding=”async” を使用し、それ以外では loading=”lazy” を使用することが望ましい。