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 and generate 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 BlurHash representation of a placeholder for an 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://scaleflex.airstore.io/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 | 1600×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.
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.
Use the ci-src instead of the src attribute in image tag.
<img ci-src="magnus-lindvall.jpg" ci-blur-hash="LNAyTi9ZVsQ,.TM{WAkW4T%2WBt7" ci-ratio="1.5"/>NOTE: "ci-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.
Include the following scripts into your project after all content in body tag
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
</script>
// lazy load is a separate feature
<script src="https://scaleflex.airstore.io/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
// main core
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/3/js-cloudimage-responsive.min.js"></script>
Initialize Cloudimage Responsive just right after scripts from the step above
<script/>
const ciResponsive = new window.CIResponsive({
token: 'demo',
baseUrl: 'https://cloudimage.public.airstore.io/demo/', // optional
lazyLoading: true // optional
});
// lazy load is a separate feature
window.lazySizes.init();
</script>
Get your Cloudimage tokens here.
…and you're done! Visit the full documentation here.
Any questions?
Contact us at hello@cloudimage.io, our experts will be happy to help!