レスポンシブ対応ということで、PCとスマホで画像を切り替える場面は多いです。その時、デバイスによって表示しない画像をdisplay:noneして消すのが古い習わしです。 ブロックエディタやビジュアルエディタで画面サイズで表示のON・OFFを切り替えるのもdisplay:noneを使っているのが普通です。 しかし、dipslay:noneで消した画像が実は読み込まれてしまうことはご存じでしょうか? diplsplay:noneで消した画像が実は読み込まれていたというのは、Page Speed Insightなどで警告されて気が付いている人も多いでしょう。 ではどうしたら、表示していない画像を読み込まずに済むでしょうか?というのをこの記事でまとめています。 loading=”lazy”とdisplay:noneを組み合わせるdisplay:none(imgタグの親要素でもOK)とimgタグにl
![【CSS】display:noneで消した画像を読み込ませない方法とは?](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc8b8ea7d0a8c0358e47696b02b1fe1140a89bcd/height=288;version=1;width=512/https%3A%2F%2Fnldot.info%2Fwp-content%2Fuploads%2F2018%2F06%2Fwordpresslogo.png)