スマフォやタブレットなどで閲覧した
際に表示する画像を差し替える軽量な
jQueryのプラグイン・jQuery Picture
のご紹介。レスポンシブWebデザイン
でよく問題視される画像のサイズの件
に対応するライブラリです。

設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。

jQuery Picture

以下サンプルです。手抜きですみません。

jsfiddleでフレームを操作して動作確認出来ます。

Sample

コード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-picture-min.js"></script>

本体とライブラリを読み込み。

$('figure').picture();

あとは初期化すればいいだけ。

<figure data-media="foo.jpg" data-media440="bar.jpg" data-media600="hoge.jpg">
        <noscript>
           <img src="hoge.jpg">
        </noscript>
</figure>

カスタムデータ属性で差し替え画像を指定します。

picture要素を利用する方法も書かれていますが、こちらは割愛します。

雑感

レスポンシブWebデザインの問題点を解消、という意見もありますけど、この手のは殆ど解決できません。その場凌ぎ、っていう印象ですね・・例えばこのライブラリにしてもそうですけど、そのWebサイトに使用する全ての画像にこんなマークアップするのか、って話になります。

数百ページあるようなサイトのリニューアル案件、とかでは現実味が無いですね。どんなケースでも対応できるなら問題解決した、って思えるんですけど。唯一良さそうなAdaptive ImagesはライセンスがCC-BYなのでクライアントさんに提案しにくいですし・・・悩ましいところですね。

レスポンシブもいいんですけど、結局こういった問題を解決する方法は今の所スマフォ用のページにリダイレクトするのが現状では一番確実な気がします。GoogleもレシポンシブWebデザインを推奨していましたが、あくまでクロールしやすい環境という目線で書かれていました。

重要な点は「推奨している」、という事では無く、以下の点です。

しかし Google は、レスポンシブ・ウェブデザインを使用することが適切とはいえない状況があることを理解しています。そのため、私たちはサイトがデバイスごとに最適化した HTML を使って同等のコンテンツを提供することをサポートしています。デバイス固有の HTML の提供方法は、デスクトップ版とスマートフォン版で同じ URL（動的な配信と呼ばれています）で提供する方法と、異なる URL（たとえば、www.example.comとm.example.comなど）で提供する方法に分けることができます。

あなたのサイトが動的な配信をされている場合、ユーザーエージェントごとにコンテンツを変えている事をキャッシュサーバや Google のアルゴリズム伝えるために Vary HTTP ヘッダを使用することを強くお勧めします。

レスポンシブWebデザインを推奨しているからと言って、他の方法は非推奨・・とは言っていない点に注意した方が良さそうです。他の方法のほうが良い場合も当然あります。

ユーザー目線の施工という軸がブレたら本末転倒ですよね。

jQuery Picture