表示するデバイスに最適な画像をクラウドから呼び出すオンラインサービス -ReSRC.it

サイト構築 -制作

Post on:2012年10月2日

ReSRC.itのデモ

デモは、そのまま配置した画像・背景として配置した画像、そしてページにレイアウトした画像の2種類があります。
まずは、画像（そのままと背景）から。

Demo 1: Image

画像をそのまま配置したデモです。Retina/HDPIディスプレイにも対応しています。

Demo 1: Image

右上の「Change width」ボタンをクリックすると、表示サイズが変更されます。

Demo 1: Image

下部は、外部スタイルシートで指定した背景画像のデモです。

2つ目のデモはページにレイアウトされています。

Demo 2: Page

打ち出し用の大きな画像。

Demo 2: Page

下部は、グリッドを使ったレイアウトに画像が配置されています。

Demo 2: Page

右上の「Change width」ボタンをクリックすると、表示サイズが変更されます。

ReSRC.itの使い方

ReSRC.itを利用するには、アカウントを作成します（無料）。

HTML

画像を配置するベーシックなHTMLは下記のようになります。

<!doctype html>
<html>
<head>
<title>Hello Responsive Web</title>
</head>
<body>
<img src="http://app.resrc.it/http://www.resrc.it/img/demo/demo-image-1.jpg" width="100%" class="resrc"/>
<script src="http://www.resrc.it/responsive.js"></script>
</body>
</html>

スタイルシートでの指定、noscriptを併用すると、下記のようなります。

<!-- To ReSRC an image -->
<img src="http://app.resrc.it//www.your-domain.com/img/img001.jpg" class="resrc"/>
 
<!-- To ReSRC an element via CSS -->
<div class="resrc" style="background-image: url('http://app.resrc.it//www.your-domain.com/img/img001.jpg');"></div>
 
<!-- To ReSRC an element via the noscript tag -->
<noscript data-src="http://app.resrc.it//www.your-domain.com/img/img001.jpg" data-height="100" data-width="100" data-alt="Alt Tag Desc" data-data-param="Param" class="resrc">
<img src="http://app.resrc.it//www.your-domain.com/img/img001.jpg" height="100" width="100" alt="Alt Tag Desc"/>
</noscript>

パスの先頭にあるapp.resrc.itは使用するクラウドで、現在は下記の2つから選択できます。