Webサイトを制作する際にほぼ100％求められるレスポンシブ対応。その中でも、PCとスマホで「見せたい画像」が異なるケースは非常に多いですよね。
これらを切り替える際、昔ながらの「CSSで片方を消す」方法を使っていませんか？実はそのやり方、ページの表示速度を大幅に下げている原因かもしれません。
今回は、2026年現在のスタンダードになったタグを使った最適なしきい値の設定と、表示速度が改善される仕組みについて分かりやすく解説します。
これまでの方法の復習
サイトでよく見るCSSでPCとスマホの表示を切り替える方法です。（実はこのサイトでも使用されています。。）
/* PCとSPの切り替え */
@media screen and (min-width: 769px) {
.for-sp {
display: none;
}
}
@media screen and (max-width: 768px) {
.for-pc {
display: none;
}
}【推奨】pictureタグで切り替える
<picture>
<source srcset="img-pc.jpg" media="(min-width: 769px)">
<source srcset="img-sp.jpg" media="(max-width: 768px)">
<img src="img-pc.jpg" alt="キャンペーンのメインビジュアル">
</picture>タグの仕組みとしては上から順に判定されます。ブラウザは上にある <source> タグから条件をチェックし、合致した条件がある場合にその画像を読み込みます。
また、<img> タグは必須です。これは、条件に合わない場合や、万が一の時に表示される設定として機能します。
【重要】なぜ表示スピードが改善されるのか？
従来のCSS（display: none;）で切り替える方法と、 タグの最大の違いは、「ブラウザが画像をダウンロードするタイミング」にあります。
CSSでの切り替え（非推奨）
display: none; で隠しても、ブラウザはHTMLコードにある <img> タグをすべて読み込もうとします。
画面には1枚しか表示されていないのに、読み込みとしては「PC用」と「スマホ用」の2枚分のデータ通信が発生し、表示が遅くなります。
<source>タグでの切り替え（推奨）
ブラウザは条件に合った画像だけをダウンロードします。 スマホユーザーはスマホ用の軽量な画像だけを読み込むため、余計な通信が発生せず、ページ表示が速くなります。これはSEOにとっても非常に有効です。
まとめ
表示スピードの改善は、ユーザーの離脱率を下げるだけでなく、検索順位の向上にも貢献します。「たかが画像1枚」と思わず、正しいタグ選びで高品質なサイト制作を目指しましょう！
