(Low quality preview version)
Responsive images, now easier than ever.
Make your existing images responsive without creating new images. Upload one high quality original image and the plugin will resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy load with fancy animation on image load.
Features
- Resize large images to the size needed by your design andgenerate multiple images for different device screen size
- Strip all unnecessary metadata and optimize JPEG, PNG and GIF compression
- Efficiently lazy load images to speed initial page load and save bandwidth
- Use the low quality image with "blur-up" technique to show a preview of the image while it loads
- Hold the image position so your page doesn't jump while images load
How it works
The plugin detects the width of image's container and pixel ratio density of your device to load the exact image size you need. It processes images via Cloudimage.io service which offers comprehensive automated image optimization solutions.
When an image is first loaded on your website or mobile app, Cloudimage's resizing servers will download your origin image from your origin server, resize it and deliver to your user via lightning-fast Content Delivery Networks (CDNs). Once the image is resized in the format of your choice, Cloudimage will send it to a Content Delivery Network, which will in turn deliver it rocket fast to your visitors, responsively across various screen sizes.
Read the following article to learn more about Cloudimage.io service.
In numbers
We have original image stored via CDN with 6240×4160 px resolution and 8.7 mb size: https://cdn.scaleflex.it/demo/redcharlie.jpg link In the table below we can see what size and resolution will be loaded depending on the image's container.
| container size | pixel ratio density | calculated width | result: dimantion | size | link |
|---|---|---|---|
| 400px | 1 | 400px | 400×267 | 18.7 kb | link |
| 2 | 800px | 800×533 | 58.1 kb | link | |
| 570px | 1 | 600px | 600×400 | 35.4 kb | link |
| 2 | 1200px | 1200x800 | 119 kb | link | |
| 720px | 1 | 800px | 800×533 | 58.1 kb | link |
| 2 | 1600px | 1600px×1066 | 200 kb | link | |
| 1170px | 1 | 1200px | 1200x800 | 119 kb | link |
| 2 | 2400px | 2400x1600 | 405 kb | link |
* The plugin rounds container width to next possible value which can be divided by 100 without the remainder. It's done for cache reasons so that we cache not all images different by 1px, but only 100px, 200px, 300px …
Gallery demo
Change the size of your browser's window and reload the page to see how the Cloudimage Responsive plugin will deliver an optimized image for the screen size.
You can control your image size/ratio/crop with media query breakpoints
Resize your browser window to see how it works
<Img
src={images[17].src}
sizes="
'(max-width: 575px)': { w: 400, h: 150 },
'(min-width: 576px)': { r: 1 },
'(min-width: 620px)': { h: 560 },
'(min-width: 768px)': { w: '50vw' },
'(min-width: 992px)': { w: '55vw', h: 300 },
'(min-width: 1200px)': { w: 1200 }
"
/>Crop your images
Original Images
<div style={{ width: 200, height: 200 }}>
<img
src="https://doc.cloudimg.io/sample.li/boat.jpg"
/>
</div>Crop
<div style={{ width: 200, height: 200 }}>
<Img
src="boat.jpg"
params="func=crop"
/>
</div>Auto crop
<div style={{ width: 200, height: 200 }}>
<Img
src="boat.jpg"
params="func=crop&gravity=auto"
/>
</div>Use with background images
<BackgroundImg
src="ameen-fahmy.jpg"
params="func=crop"
style={{ background: 'transparent 50% 50% / cover no-repeat' }}
>...</BackgroundImg>What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Ready to get started?
To use the plugin, you will need a Cloudimage token. Don't worry, it only takes seconds to get one by registering here. Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.
Install using npm
npm install --save react-cloudimage-responsiveinitialize it with your token and the baseURL of your image storage using CloudimageProvider
import React from 'react';
import { render } from 'react-dom';
import Img, { CloudimageProvider } from 'react-cloudimage-responsive';
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://cdn.scaleflex.it/demo/'
};
const cloudimageConfigWithCustomCNAMEDomain = {
token: 'demo',
baseURL: 'https://cdn.scaleflex.it/demo/',
customDomain: '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);Get your Cloudimage tokens here.
Implement it, just using the Img component:
<Img src="img.jpg" alt="Demo image" ratio={1.5}/>NOTE: "ratio" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold the image position while image is loading.
…and you're done! Visit the full documentation here.
Any questions?
Contact us at hello@cloudimage.io, our experts will be happy to help!