レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。
そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。
ウィンドウサイズを検知して画像ファイル名を置換
まずはPC用とスマホ用の画像を２種類用意して、画像ファイルの末尾に_spと_pcをつけます。
HTML側は.switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に640pxとします）。.switchにはCSSでスタイルを指定せず、jQueryで要素を特定する目的だけに使用します。
マークアップ時には_spのほうを記述しておきます。
|
1 2 3 4 5 |
<!-- 640px未満 --> <img src="image_sp.png" alt="" class="switch"> <!-- 640px以上 --> <img src="image_pc.png" alt="" class="switch"> |
スクリプトは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function() { // 置換の対象とするclass属性。 var $elem = $('.switch'); // 置換の対象とするsrc属性の末尾の文字列。 var sp = '_sp.'; var pc = '_pc.'; // 画像を切り替えるウィンドウサイズ。 var replaceWidth = 640; function imageSwitch() { // ウィンドウサイズを取得する。 var windowWidth = parseInt($(window).width()); // ページ内にあるすべての`.js-image-switch`に適応される。 $elem.each(function() { var $this = $(this); // ウィンドウサイズが640px以上であれば_spを_pcに置換する。 if(windowWidth >= replaceWidth) { $this.attr('src', $this.attr('src').replace(sp, pc)); // ウィンドウサイズが640px未満であれば_pcを_spに置換する。 } else { $this.attr('src', $this.attr('src').replace(pc, sp)); } }); } imageSwitch(); // 動的なリサイズは操作後0.2秒経ってから処理を実行する。 var resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { imageSwitch(); }, 200); }); }); |
解説
スクリプトの処理
- ウィンドウサイズを取得して、それに応じて処理を開始
- attr()でsrc属性値を取得する
- replace()でファイル名の末尾を置換する
- ウィンドウサイズが変更されたら、そのたびに処理を実行する
以下の変数は案件に応じて変更
$elemは画像の切り替えを適応する要素-
spは狭い幅（スマホなど）で使用するファイル名のキーワード -
pcは広い幅（PCなど）で使用するファイル名のキーワード replaceWidthは画像を切り替えるウィンドウサイズ（px）
置換対象とするファイル名のキーワードは_sp.のようにしてドットを加えています。簡易的ですが、これで_specialのようなファイル名まで置換されてしまうのを防いでいます。.switchを指定していると、置換はされませんが処理自体は実行されてしまうので、必要なければclass属性は外してください。
リサイズ時の処理はdebounceというJavaScriptのパターンを使用して、処理を実行するまでのタイミングを遅らせています。この場合はリサイズが終わって0.2秒経ったときに処理を実行します。画像を多く使用しているページでは特に有効だと思います。
末尾に_spをつけるといった画像の命名規則に気をつける必要がありますが、比較的簡単に画像のレスポンシブ化ができる方法だと思います。