レスポンシブWebデザインの画像問題の解決法5種

picturefill

scottjehl/picturefill
data属性を使って複数サイズの画像を指定します。
指定したウインドウサイズによって表示する画像を切り替えます。

ソースは下記のように書きます。

<span data-picture data-alt="DUCK">
	<span data-src="../img/smallImage.jpg"></span>
	<span data-src="../img/largeImage.jpg" data-media="(min-width: 800px)"></span>
	<!-- Fallback content for non-JS browsers. -->
	<noscript><img src="../img/smallImage.jpg" alt="DUCK"></noscript>
</span>

data-srcに表示する画像、deta-mediaにメディアクエリを書きます。
deta-mediaを指定しない画像がデフォルトで表示されます。
またJS非対応ブラウザのフォオールバックとしてimg要素で画像を指定しておきます。

Responsive-Images

Responsive Images

最初に小さい画像を指定しておき、スクリーンサイズを測定し、
大きい場合は大きいサイズの画像に差し替えます。

ソースは下記のように書きます。

<img src="smallImage.jpg?full=largeImage.jpg" />

javascriptと.htaccessを設置する必要があります。
画像もそれぞれのサイズが必要です。
ブレークポイントはデフォルトで480に設定されてますが、オプションで変更可能です。

Responsive-Enhance

joshje/Responsive-Enhance · GitHub

最初にモバイル用の画像を表示し、指定したウインドウサイズ以上からのアクセスであれば大きい画像に差し替えます。
それぞれの画像が必要になります。

ソースは下記のように書きます。

<img id="demo1" src="../img/smallImage.jpg" alt="Duck" data-fullsrc="../img/largeImage.jpg">

HiSRC

teleject/hisrc

最初にモバイル用の画像を表示させます。
jQueryで帯域をチェックしてナローバンドならばモバイル用の画像をそのまま表示、
ブロードバンドならば大きいサイズの画像を表示します。
Phoneのような解像度が2倍のデバイスには大きい画像を表示させます。

ソースは下記のように書きます。
それぞれの画像を用意する必要があります。

<img src="smallImage.jpg" width="600" height="400"
data-1x="largeImage.jpg"
data-2x="smallImage_x2.jpg"
alt="duck" />

オプションのuseTransparentGif(true)で画像を背景として表示させたり、
minKbpsForHighBandwidth () で画像を切り替える帯域の基準値を設定できます。

その他

その他に、Response JS、stowballなどもあります。
自分が知らないだけでこれ以外にも存在すると思います。

CSSを使う

特にCSS3からは描画に関するプロパティが充実してます。
それらを使えば下記のボタンような簡単なエレメントを作ることができます。

アイコンWeb fontsの利用

アイコンやシンボルのweb Fontsを使って画像を表示させます。
下記もWeb Fontsで表示してます。

ただし、あくまでテキストを画像として見せてるだけなので、
HTMLの構造的には適切ではありません。
（疑似クラス「:after」「:before」を使用すれば解決します。）

Web Icon Fonts | chibatch.jp

Data URI

Data URIはドキュメントに埋め込まれたデータに直接アクセスするスキームです。
このスキームを使うとサーバーにリクエストせずに画像を表示できるので、HTTPリクエストを減らせます。
ただしHTMLのファイルサイズが増えてしまうので、キャッシュされるcss内に書くとか、gzipによる圧縮を利用するなど工夫が必要です。
参考：Data URIによるHTTPリクエストの削減とYSlowスコア | ゆっくりと…

下記の画像もData URIです。

画像のDATA URIへの変更はオンラインのツールで行えます。
Image To Data URI Convertor – webSemantics