レスポンシブ対応ということで、PCとスマホで画像を切り替える場面は多いです。その時、デバイスによって表示しない画像をdisplay:noneして消すのが古い習わしです。
ブロックエディタやビジュアルエディタで画面サイズで表示のON・OFFを切り替えるのもdisplay:noneを使っているのが普通です。
しかし、dipslay:noneで消した画像が実は読み込まれてしまうことはご存じでしょうか？
diplsplay:noneで消した画像が実は読み込まれていたというのは、Page Speed Insightなどで警告されて気が付いている人も多いでしょう。
ではどうしたら、表示していない画像を読み込まずに済むでしょうか？というのをこの記事でまとめています。
loading=”lazy”とdisplay:noneを組み合わせる
display:none（imgタグの親要素でもOK）とimgタグにloading=”lazy”をつけると画像は読み込まれなくなります。
なんで？と言われてもそういう仕様らしいです。
loading=”lazy”をサポートしているブラウザはこれで対応できます。
ただし、loading=”lazy”をつけたくない要素の場合（FCP対象）の場合は、loading=”lazy”をSPとPCで出しわけるなどの処置が必要で、wp_is_mobile()を使うなどの荒業を使うことになるかもしれません。
picutreタグとsourceを組み合わせる
メディアクエリでPCとSPで表示する画像を切り替えることで、片方の画像は読み込まれなくなります。
必ず画像を表示するのであれば、この方法が一番スマートだと思います。
HTMLでimgタグを直接書いている場合はこの方法が使えますが、ブロックエディタなどで画像を配置している場合は実現難しいと思います。
属性やclassはimgタグに付ければOK。
<picture>
<source media="(min-width: 768px)" srcset="https://via.placeholder.com/800x400/BADA55/0">
<img src="https://via.placeholder.com/350x150">
</picture>1×1の透明pngを使う場合
display:noneの代わりに、picutureタグを使って画像を非表示にするという意味では、うまく動きません。imgタグを省略することもできませんし、srcsetを””に変えると動かなくなります。
仕方ないので、1×1の透明PNGを非表示時に割り当てると以下のような感じでしょうか。
レイアウトが崩れないように、適当にposition:absolute的なアレをする必要はあるかもしれません。
<picture>
<source media="(min-width: 768px)" srcset="https://via.placeholder.com/800x400/BADA55/0">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==">
</picture>参考：https://selleo.com/til/posts/rrfqojakbh-dont-hide-images-with-display-none
まとめ
オフスクリーン画像の遅延読み込みは常に付きまとう問題ですが、後から気が付くことも多いのでその時にはこの記事を思い出してみてください。
