最近はレスポンシブWebデザインでホームページを作ることも増えてきましたよね。
ただ、気をつけなくてはいけないのが、スマートフォンなどの携帯ブラウザで見たときも同じサイズの画像が表示されるってことです。（基本的にはですけどね）
CSSの書き方にもよるのでしょうけど、@media screen and (max-width: 569px)なんて書き方で分岐していても、CSSで読まれていないはずの場所の画像が実は読まれているなんてことはよく耳にします。FireMobileSimulatorなどを導入してFirebugなどで調べれば実際に読み込まれているか調査できますのでご自身のサイトで確認してみるといいですよ。
で、media screenなどの分岐ではなく、画像はそのまま表示しちゃいましょうとなると、やはり気になるのは画像サイズですね。
PCブラウザ用に作られた画像は、例えば文字の乗って入るバナーのような画像とか、ファイルサイズ的にはそんなに大きくなくても、スマートフォンの小さな画面に縮小されてしまうと文字が読めなくなるなどの弊害も考えられます。
今回、管理サイトのリニューアルに際し、サイトのWidthが大きくなることになりました。そしていくつかのランディングページ的な役割のファーストビュー部分をインパクトを持たせるためにサイドバーなしの大きな画像で表現することになってしまったため、その大きな画像をスマートフォンに読ませないために色々工夫することになりました。
そこで思いついたのがスマートフォン用の画像を別に用意してhtaccessで分岐させてしまおうという方法です。
ただし、すべての画像をスマートフォン用に用意するのは嫌なので、スマートフォン用の画像が用意されている場合はそちらを読み込み、それ以外はPC用の画像をそのまま使用するという方法で行うことにしました。
しかし、タブレット（iPadやAndroidタブレット）ではPC用の表示を行いたいためスマフォ用画像は使わない（タブレットを省く）設定にしなくてはいけません。
で、行き着いた先のhtaccessがこちらです。
# スマートフォンでアクセスがあった場合に画像フォルダを変更
RewriteEngine on
RewriteBase /img/
RewriteCond %{REQUEST_URI} !mobile/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry|Windows\ Phone|Windows\ CE) [NC]
RewriteCond %{REQUEST_URI} ^/img/(.*)$
RewriteCond %{DOCUMENT_ROOT}/img/mobile/$1 -f
RewriteRule (.*) /img/mobile/$1 [R,L]
ルートにimgのフォルダがあります。その中に普通にページごとにフォルダ分けされており、/img/hoge/fuga.jpgなどのように置かれています。
スマートフォン用の画像はimgの下にmobileフォルダを作り、PC用画像のフォルダと同じ構成で/img/mobile/hoge/fuga.jpgなどのように置いています。
まず{REQUEST_URI}でmobileフォルダの場合はリライトを無効にします。
次に{HTTP_USER_AGENT}でスマートフォンを抜き出しますが、Androidには携帯とタブレットの両方があります。iPadはUserAgentがはっきり分かれていますが、Androidはどちらもほぼ同じです。しかし、Android携帯の場合UserAgentにmobileという記述が入ってくるらしいので、これが入っていないものはタブレット（もしくはAndroidOS搭載のPC？）とみなしてリライトしません。（Windows系の記述はどっかからの丸コピで実際に試していませんのでご注意）
そして次の行でimg以下のURLを取得し、RewriteCond %{DOCUMENT_ROOT}/img/mobile/$1 -fでmobileフォルダ配下に画像が存在しているかどうかを-fのフラグでチェックしています。この「リライト先に画像があるのかないのか？」の判定をhtaccess上で行うのがちょっと苦労しました。Neo Inspirationさんの.htaccess で RewriteCond の後方参照がとても参考になりましたのでご紹介しておきます。
iPhone4S、iPad、Android携帯での実機検証もしていますが、何か不具合や問題点の指摘などがありましたら教えてください。自力だとこれが限界です(汗)ソーシャルの力を信じましょうｗ