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

デスクトップ・タブレット・スマフォなど、表示するデバイスに最適なレスポンシブ用の画像をクラウドからダイレクトに呼び出し利用できるオンラインサービスを紹介します。

サイトのキャプチャ

ReSRC.it

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つから選択できます。

  • http://app.resrc.it (USA)
  • http://app-uk.resrc.it (UK)

詳しい使い方は、下記のドキュメントをご覧ください。

top of page

©2017 coliss