スマホとPCで画像を切り替える3つの方法

レスポンシブデザインを採用する際、スマホとPCで異なる画像を表示することが重要になることがあります。この記事では、スマホとPCで画像を切り替える3つの具体的な方法をご紹介します。それぞれの方法には特徴があり、状況に応じて最適な手段を選ぶことができます。

picture タグを使用する方法
CSSの背景画像を切り替える方法
JavaScriptで画像を切り替える方法
まとめ

picture タグを使用する方法

pictureタグは、デバイスの画面幅に応じて表示する画像を自動的に切り替えるために最適なHTML5の要素です。これは、スマホやPCなど異なるデバイス向けに最適化された画像を表示したい場合に便利です。

<picture>
  <source media="(max-width: 767px)" srcset="image-for-mobile.jpg">
  <source media="(min-width: 768px)" srcset="image-for-desktop.jpg">
  <img src="default-image.jpg" alt="Responsive Image">
</picture>

source タグで、それぞれのデバイスに合った画像を指定します。
media 属性を使い、画面幅に応じて画像を切り替える条件を設定します。
img タグは、すべての条件に当てはまらなかった場合のフォールバック用です。

この方法は、画像がコンテンツとして重要な場合に特に有効です。例えば、視覚的に異なるサイズの画像を提供することで、デバイスに合わせた最適なユーザー体験を実現できます。

CSSの背景画像を切り替える方法

CSSメディアクエリを使って、画面サイズに応じた背景画像を設定することも可能です。特に、コンテンツ内のデザイン要素として背景画像を使用する場合に効果的です。

<div class="responsive-image"></div>

.responsive-image {
  width: 100%;
  height: 300px;
  background-image: url('image-for-desktop.jpg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .responsive-image {
    background-image: url('image-for-mobile.jpg');
  }
}

デフォルトでPC用の背景画像を設定し、メディアクエリを利用してスマホ用の画像に切り替えます。
background-size や background-position で、画像の表示方法を調整できます。

背景画像の切り替えは、デザインやレイアウトを考慮した場合に有効な方法です。大きなビジュアル要素を使いたい場合に、デバイスごとに異なる画像を提供することができます。

JavaScriptで画像を切り替える方法

JavaScriptを使えば、画面のサイズに応じて動的に画像を切り替えることができます。特に、動的なコンテンツや複雑なレイアウトを持つページで役立つ方法です。

<img id="responsiveImage" src="image-for-desktop.jpg" alt="Responsive Image">

<script>
  function switchImage() {
    var img = document.getElementById('responsiveImage');
    if (window.innerWidth <= 767) {
      img.src = 'image-for-mobile.jpg';
    } else {
      img.src = 'image-for-desktop.jpg';
    }
  }

  window.addEventListener('resize', switchImage);
  window.addEventListener('load', switchImage);
</script>

window.innerWidth で画面幅を取得し、それに応じて画像を切り替えます。
resize イベントと load イベントを使い、画面がリサイズされたときやページが読み込まれたときに処理を実行します。

JavaScriptでの切り替えは、カスタマイズ性が高く、特に高度なユーザーインタラクションが必要な場合に便利です。

まとめ

スマホとPCで異なる画像を表示する方法は、HTMLのpicture タグ、CSSのメディアクエリ、JavaScriptを使った方法など、さまざまな手段があります。シチュエーションに応じて最適な方法を選び、より良いユーザー体験を提供しましょう。

静的コンテンツには picture タグが最適です。
デザインの一部として背景画像を使うなら、CSSでの切り替えが有効です。
動的なコンテンツにはJavaScriptでの実装が適しています。