[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
Post on:2015年2月13日
sponsors
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。
SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。
Rimgの特徴
- 100%フロントエンドのコード（バックエンドは一切無し）。
- 単独で利用できるスクリプト、jQueryなどは必要ありません。
- しかも、超軽量（6.0KB）。
- UA判定やクッキーなど、環境に依存して判定するものは使用していません。
- 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。
- スクロールして画像が表示されたらロードするLazy Loadに対応。
- スマホの向きもサポート。
- .jpg, .png, .webp などレスポンシブにする画像のみに適用。.svg, .gifは無視します。
Rimgのデモ
デモはChrome, Safari, Firefox, IEは8+、スマホはiOS, Androidともにデフォルトのブラウザでご覧ください。
デモのブレイクポイントは7種類用意されており、表示幅に応じて最適な画像が表示されるようになっています。
ブラウザのサイズを変更（とりあえず3種類）
Rimgの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
<head> ... <script src="rimg.min.js"></script> </head>
Step 2: JavaScript
スクリプトで、ブレイクポイントを定義します。
-micro, -tiny, -small, -medium, -regular, -large, -huge の7つのキーワードに横幅を設定します。
<script>
var RimgOptions = { breakpoint:'-tiny 320w 1x, -tiny-retina 320w 2x,
-small 480w 1x, -small-retina 480w 2x,
-medium 600w 1x, -medium-retina 600w 2x,
-regular 768w 1x, -regular-retina 768w 2x,
-large 1024w 1x, -large-retina 1024w 2x,
-huge 1200w 1x, -huge-retina 1200w 2x'};
</script>
7つも必要のない場合は、-small, -reglar, -large だけなどに減らしてください。
Step 3: 画像の用意
上記で設定したブレイクポイントごとの画像を用意し、キーワードを後方に加えます。
image.jpg image-small.jpg image-reglar.jpg image-large.jpg
Step 4: HTML
data属性を使い、画像を指定します。
この記述は、HTML5のsrcsetの仕様に基づいています。
<img data-src="image.jpg"/>
背景画像をレスポンシブにする時は、こんな感じに。
<div data-background-image="image.jpg"></div>
sponsors
