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.

low-preview-main imagemain image

000px

Features

Resize large images and generate multiple images for different device screen size.
Strip all unnecessarymetadata andoptimize JPEG, PNG and GIF compression.
Efficiently lazy load images to speed up initial page load and save bandwidth.
Show a "blur-up" preview of the image while loading.
Maintain the image's position so your page doesn't jump while images load.

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.

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.

low-preview-shayna douglas vibrcv8tmdm unsplashshayna douglas vibrcv8tmdm unsplash
<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.

low-preview-shayna douglas vibrcv8tmdm unsplashshayna douglas vibrcv8tmdm unsplash
<Img src="unsplash.jpg"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.

low-preview-shayna douglas vibrcv8tmdm unsplashshayna douglas vibrcv8tmdm unsplash
<Img src="unsplash.jpg"params="func=crop&w=400&h=400&gravity=auto" />
low-preview-bg imagebg image

Use with background images

copy

Copy


  <BackgroundImg
    src="ameen-fahmy.jpg"
    params="func=crop"
  >
    ...your content...
  </BackgroundImg>
  

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...

Any questions?

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

Your device pixel ratio:
0
Your device width:
0px