はじめに

WEBサイトで表示させる画像を、端末によって切り替える方法について考えてみました。

基本的にCSSのメディアクエリを使うようになるだろうなと思っていましたが、やはりメディアクエリによる切り替えが一般的なようです（というか他の方法は見つかりませんでした）。

メディアクエリとは

また、HTML5.1で新たに追加された要素でも画像の切り替えができますので、こちらについても紹介します。

使用する画像について

今回は「PC」「タブレット」「スマホ」の切り替え用に、3種類の画像を用意しました。

（先日、熊野三山（「熊野速玉大社」「熊野那智大社」「熊野本宮大社」）を参拝したので、その時撮影した3枚の写真を利用します）

ブラウザの横幅にあわせて画面表示が切り替わるようにします。

仕上がりイメージ

ブラウザの横幅を狭めたり広げたりして確認して下さい。

PC用画像（熊野速玉大社）

タブレット用画像（熊野那智大社）

スマホ用画像（熊野本宮大社）

目次

img要素で切り替える場合

img要素で画像を切り替える場合、HTML側では切り替える画像の数だけimg要素を記述します。

そしてその要素それぞれにclassを指定し、CSSのメディアクエリで表示（display:block）・非表示（display:none）を切り替えます。

メディアクエリの設定方法は、下記のように記述します

.クラス名 {
 @media (min-width: (切り替えたい画面サイズ)) { /* あるいは max-width */
  そのメディアクエリ内で設定したいプロパティなどを記述
 }
}

下の例では、「横幅が768px以上の場合はappearance_pcクラスが表示」「640px以上ならappearance_tabクラスが表示」「それ以下はappearance_spクラスが表示」されるよう設定しています。

HTML

<img src="pc用画像パス" alt="" class="appearance_pc">
<img src="タブレット用画像パス" alt="" class="appearance_tab">
<img src="スマホ用画像パス" alt="" class="appearance_sp">

CSS

.appearance_pc {
 @media (min-width: (768px)) { display: block; }
 @media (max-width: (768px)) { display: none; }
 @media (max-width: (640px)) { display: none; }
}
.appearance_tab {
 @media (min-width: (768px)) { display: none; }
 @media (max-width: (768px)) { display: block; }
 @media (max-width: (640px)) { display: none; }
}
.appearance_sp {
 @media (min-width: (768px)) { display: none; }
 @media (max-width: (768px)) { display: none; }
 @media (max-width: (640px)) { display: block; }
}

できあがったもの

ブラウザの横幅を狭めたり広げたりして確認して下さい。

PC用画像（熊野速玉大社）

タブレット用画像（熊野那智大社）

スマホ用画像（熊野本宮大社）

background要素で画像を切り替える場合

background要素で画像を切り替える場合も、メディアクエリを使用します。

HTML内にimg要素を記述しない分だけシンプルですが、CSSのbackground-imageプロパティをメディアクエリで切り替ます。

HTML

<div class="test_box"></div>

CSS

今回使用する画像サイズが「340×255px」なので、width: 340pxheight: 255pxを設定しています。

.test_box {
 width: 340px;
 height: 255px;
 background-position: center center;
 background-size: contain;
 background-repeat: no-repeat;
 @media (min-width: (768px)) { background-image: url("pc用画像パス") }
 @media (max-width: (768px)) { background-image: url("タブレット用画像パス"); }
 @media (max-width: (640px)) { background-image: url("スマホ用画像パス"); }
}

できあがったもの

ブラウザの横幅を狭めたり広げたりして確認して下さい。

picture要素で切り替える場合

HTML5.1からpictureという要素が追加されました。

picture要素を使う事で、ある条件（ウインドウの横幅）によって表示させる画像を切り替える事が可能になっています。

画面の切り替えを行う場合、picture要素の子要素としてsource要素とimg要素を使用します。

私も初めて使ってみた時に分かったのですが、picture要素内にimg要素を必ず記述しないと画像は表示されません（source要素だけでは画像が表示されない）。

また、img要素は必ず最後に記述する必要があるようです。

では、どのように条件を分けるかについてですが、source要素内にmedia属性を使用します。

その他、source要素はimg要素とは記述する属性が少し変わりますので、簡単に紹介します。

このほかにも属性がありますが、今回は割愛します。

media属性についてですが、例えば「横幅768px以上の場合」はmedia="(min-width: 768px)"のように記述します。

HTML

<picture>
 <source srcset="PC用画像パス" media="(min-width: 768px)">
 <source srcset="タブレット用画像パス" media="(min-width: 640px)">
 <img src="スマホ用画像パス" alt="">
</picture>

上記の場合だと、「画面サイズが768px以上でPC用画像が表示」「640px以上でタブレット用画像が表示」「それ以下の場合にスマホ用画像が表示される」という条件分岐になります。

HTMLの記述だけで画像の切り替えが可能なので、CSSを編集する必要が一切ありません。

できあがったもの

ブラウザの横幅を狭めたり広げたりして確認して下さい。

PC用画像（熊野速玉大社）

タブレット用画像（熊野那智大社）

スマホ用画像（熊野本宮大社）

picture要素はHTML5.1で新たに追加された要素なので、この方法をスタンダードにしたい（？）のかと個人的には思っています。

しかし、CSS（SCSS）を使わないという事は、将来的にwidthの値を変更したい場合、全HTMLファイルを横断して置換しないといけないのかな、と少し手間なようにも感じています。

そんな訳で私としては画像の切り替えを実装する場合は、しばらくCSSのメディアクエリで対応しようと考えています（何か方法が見つかればよいのですが）。