star star-img github-icon GitHub

Responsive images now easier than ever

With Cloudimage's responsive plugin, 1 high-quality original image is all it needs. Save storage space and create image variants on-the-fly. The responsive image plugin will resize, compress, and accelerate images across the world, on all devices. Lazyload with fancy animation on image load? The plugin takes care of it.

View on GitHub Edit in CodeSandbox
sea-coast

px

Features

How it works

The plugin smartly detects the width of the image's container and pixel ratio density of your device to load the exact image size you'll need. Images are processed via Cloudimage.io service, which offers comprehensive automated image optimization solutions.
Upon upload, Cloudimage's resizing servers will automatically download your origin image from the origin server, resize and deliver it to your user via lightning-fast Content Delivery Networks (CDNs). Once the image is resized in the format of your choice, Cloudimage sends it again to a CDN, which in turn delivers it rocket fast to your visitors, responsively across various screen sizes.
Find out more about Cloudimage.io.

Responsive images, in real-time!

Change the size of your browser's window to test out how the Cloudimage Responsive plugin delivers an optimized image for your screen size

img
px
img

px

img

px

img

px

img

px

Crop images, your way

Resize your browser window to see how it works.

Original Image

Resize your browser's window to see how it works.

car-image 
<img
  src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/shayna-douglas-VibRcV8tMDM-unsplash.jpg"
/>

Simple Crop

A simple crop cuts the same part from every side.

unsplash-image 
<img
  ci-src="unsplash.jpg"
  ci-params="func=crop&w=400&h=400"
/>

Auto Crop

Artificial intelligence finds the main object and smartly crops the image to ensure it turns out strictly in the center.

car-image 
<img
  ci-src="unsplash.jpg"
  ci-params="func=crop&w=400&h=400&gravity=auto"
/>

Use with background images

copy

Copy

<div
ci-bg-url="ameen-fahmy.jpg"
ci-params="func=crop"
style="background:#000 50% 50% / cover no-repeat;color:#fff;"
>
...your content...
</div>

Let's look at the numbers!

Using an example of our original image stored via CDN with 6240x4160 px resolution and 8.7mb size: https://scaleflex.cloudimg.io/v7/demo/redcharlie.jpg, let's explore in the table below, what size and resolution will be loaded depending on the image's container.

Container size

Pixel Ratio Density

Calculated Width

Result: Dimensions | Size | Link

400 px

1

2

400 px

800 px

400 x 267 | 42.3 kb | Link

800 x 533 | 159 kb | Link

570 px

1

2

600 px

1200 px

600 x 400 | 91.5 kb | Link

1200 x 800 | 337 kb | Link

720 px

1

2

800 px

1600 px

800 x 533 | 159 kb | Link

1600 x 1066 | 569 kb | Link

1170 px

1

2

1200 px

2400 px

1200 x 800 | 337 kb | Link

2400 x 1600 | 1.2 mb | Link

* The plugin rounds up the container width to the next possible value which can be divided by 100 (configurable) without the remainder. It's done for caching reasons so that we don't cache images that are different by 1px, but only 100px, 200px, and 300px...

Ready to get started?

To use the responsive images plugin, register for a free Cloudimage token. You'll get 25GB of image cache and 25GB of worldwide CDN traffic per month. Once your token is created, you can configure it as described below.

Code sandbox
copy

Copy

<script>
      const ciResponsive = new window.CIResponsive({
      token: 'demo',
      baseURL: 'https://cdn.scaleflex.it/demo/'  //optional
    });
</script>

// lazy load is a separate feature
<script src=""https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>

// main core
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.12/blur-hash/js-cloudimage-responsive.min.js"></script>
copy

Copy

import { render } from 'react-dom';
import Img, { CloudimageProvider } from 'react-cloudimage-responsive-blur-hash';

const cloudimageConfig = {
  token: 'demo',
  baseURL: 'https://cdn.scaleflex.it/demo/'
};

const App = () => {
  return (
    <CloudimageProvider config={cloudimageConfig}>
    <h1>Simple demo of react-cloudimage-responsive</h1>
    <Img src="img.jpg" alt="Demo image" ratio={1.5}/>
    </CloudimageProvider>
  );
};

render(<App />, document.body);
copy

Copy

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CIModule, CIConfig } from 'ng-cloudimage-responsive';
import { AppComponent } from './app.component';

const ciConfig = {
  token: 'demo',
  baseUrl: 'https://cdn.scaleflex.it/demo/'
};

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CIModule ],
    providers: [
      {provide: CIConfig, useValue: ciConfig}
    ],
    bootstrap: [ AppComponent ]
})
export class MyAppModule {}
copy

Copy

<template>
  <div id="app">
    <CloudImageProvider v-bind:cloudImageConfig="cloudimageConfig">
      <h1>Simple demo of vue-cloudimage-responsive</h1>
      <Img src="img.jpg" alt="Demo image"/>
    </CloudImageProvider>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Img, { CloudImageProvider } from 'vue-cloudimage-responsive-blur-hash';

  const cloudimageConfig = {
    token: 'demo',
    baseURL: 'https://cdn.scaleflex.it/demo/'
  };

  export default{
      components: {
      CloudImageProvider,
      Img
      }
  }
  </script>

Any questions?

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

Submit GitHub issue
Your device pixel ratio:
---
Your device width:
---