Quick Start Guide

3 simple steps, to have you up and running in no time!

Important Information for trial users
Whilst using your trial plan please replace all references to http://app.resrc.it with http://trial.resrc.it.
If you find you are receiving 403 forbidden errors, this is why.

Step 1

Prefix your image path with our server address

The prefix allows us to connect to your image and stream it over to the ReSRC network.

<img src="http://app.resrc.it/http://www.your-site.co/image.jpg"/>

Step 2

Add our JavaScript file to your page

The JavaScript detects image size, image optimization, browser resize and device rotation changes.

<script src="//use.resrc.it"></script>

Step 3

Tell us which images you want to be responsive

Add a class of resrc to your image elements.

<!-- Image Tag Preferred Approach (Demo: http://www.resrc.it/demos/preferred) -->
<img data-src="http://app.resrc.it/http://www.your-site.co/image.jpg" class="resrc"/>

<!-- Image Tag Preview Approach (Demo: http://www.resrc.it/demos/preview) -->
<img src="http://app.resrc.it/http://www.your-site.co/image.jpg" class="resrc"/>

<!-- CSS Background Image (Demo: http://www.resrc.it/demos/css) -->
<div style="background-image: url('http://app.resrc.it/http://www.your-site.co/image.jpg')" class="resrc"></div>

Full Code

HTML Example.

Code example for running in Trial Mode

Show Example Code
<!doctype html>
<html>
<head>
  <title>ReSRC running in trial mode</title>
  <style>.resrc {width: 100%}</style>
</head>
<body>
  <img data-src="http://trial.resrc.it/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>
  <script>
  resrc = {
    options: {
      server: "trial.resrc.it"
    }
  };
  </script>
  <script src="//use.resrc.it"></script>
</body>
</html>