お問い合わせはコチラから

【CSS】display:noneで消した画像を読み込ませない方法とは?

サイト運営

レスポンシブ対応ということで、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

まとめ

オフスクリーン画像の遅延読み込みは常に付きまとう問題ですが、後から気が付くことも多いのでその時にはこの記事を思い出してみてください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました