Demo Cloudimage Responsive JS

Cloudimage responsive JS plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported.

As we explain in our blog post on Best Practises for image acceleration, Responsive Images are a requirement for your website to load fast on any screen. There is no point in sending a full resolution image onto a small smartphone screen when an image of half-size would be sufficient. Cloudimage's responsive design script automates Responsive Images for you.

Live demo: change your browser's windows size to simulate a smaller screen. You will notice that smaller images are loaded on smaller screens.

Forcing the update to 'Off' will not reload the images as you reduce your windows size. If you start with a small window size and increase it, then the script will reload larger images to look optimal.

Quick start

Step 1: include cloudimage.plugin.min file into your project (after all your content in body, before other scripts):
<script src="https://scaleflex-global.airstore.io/cloudimg/responsive/cloudimage.plugin.min.js"/></script>
Step 2: just under the above line, initialize jScaler with your token information and optional parameters
document.addEventListener('DOMContentLoaded', function() {
  jScaler.process({
    TOKEN: '[your token]',                     // required

    BASE_URL: '[your image folder on server]', // optional | e.g. "https://gallery.airstore.io/"
    DEFAULT_PARAMS: 'none',                    // optional | default parameters e.g. 'q70' - reduce quality to 70%
  });
});
Step 3: Replace your img tags fromsrc="[image source]" to ci-src="[image source]"
<img ci-src="birds.jpg">

This also works for background, simply add the link to image as ci-background attribute:

<div class="background-styles" ci-background="birds.jpg"></div>

jScaler attributes

ci-src or ci-background

required
jScaler identifier takes as value image path (absolute url or relative to BASE_URL).

NOTE: Your images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS by Cloudimage. You can also upload your images into Cloudimage, more info here.

ci-filter

optional, default: none

Parameters are used to apply transformations to the image, or to add options to the result image.


Possible values:

  • fgrey - apply a greyscale filter on the image
  • fgaussian[0..10] - apply a gaussian blur filter on the image
  • fcontrast[-100..100] - apply a contrast filter on the image
  • fbright[0..255] - apply a brightness filter on the image
  • fpixelate[0..100] - apply a pixelate filter on the image
  • fradius[0..500] - create a radius on the corners

You can find here the full Filters documentation.

Supported browsers

browser support

Any questions?

Contact us at hello@cloudimage.io, our image resizing experts will be happy to help!

Your device pixel ratio: