レスポンシブWebデザインで画像が重い場合の対処方法
2012.05.24更新
WordPressであればWPtouchプラグインを使って画像パスをスマートフォン用のパスに変更できるのであまり問題は起こらないのですが、静的HTMLで作られたサイトをレスポンシブでスマートフォン対応する場合、PCの画像をそのまま読み込むのでどうしても読み込みが遅くなります。
静的HTMLのサイトをレスポンシブ対応したい時の１つの方法として、.htaccessを使用して画像パス変え、スマートフォン用の画像を読み込みます。
ただし、PC版とスマートフォン版の切り替えができないサイトの作りになること、画像ファイルを１つのフォルダで一括管理をしないといけない、などの変更が必要になるので注意が必要です。
仕様説明
URLにimages, js, cssという各フォルダ名が含まれる場合に、スマートフォンの場合にはドメイン配下に/sをつけます。変換例
例１：変換前）http://****.jp/images/a.jpg
例１：変換後）http://****.jp/s/images/a.jpg
例２：変換前）http://****.jp/test/common/js/b.js
例２：変換後）http://****.jp/s/test/common/js/b.js
例３：変換前）http://****.jp/common/css/c.css
例３：変換後）http://****.jp/s/common/css/c.css
設置方法
下記を記述した.htaccessファイルをルートディレクトリに置きます。 例）http://****.jp/.htaccess
RewriteEngine on
RewriteBase /
#画像フォルダの変更
RewriteCond %{REQUEST_URI} !mobile/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry|Windows Phone|Windows CE) [NC]
RewriteCond %{REQUEST_URI} !/s/
RewriteCond %{REQUEST_URI} /
RewriteCond %{REQUEST_URI} (.*)/images/(.*)$
RewriteRule ^(.*)$ /s/$1$2 [R,L]
#jsフォルダの変更
RewriteCond %{REQUEST_URI} !mobile/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry|Windows Phone|Windows CE) [NC]
RewriteCond %{REQUEST_URI} !/s/
RewriteCond %{REQUEST_URI} /
RewriteCond %{REQUEST_URI} (.*)/js/(.*)$
RewriteRule ^(.*)$ /s/$1$2 [R,L]
#cssフォルダの変更
RewriteCond %{REQUEST_URI} !mobile/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry|Windows Phone|Windows CE) [NC]
RewriteCond %{REQUEST_URI} !/s/
RewriteCond %{REQUEST_URI} /
RewriteCond %{REQUEST_URI} (.*)/css/(.*)$
RewriteRule ^(.*)$ /s/$1$2 [R,L]
ウェブ戦略にお悩みですか？
御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します！
デザインは2005年から。携わったHPは200件以上！
