-
-
(Blur-hash placeholder 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 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://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 | -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 - (configurable) 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
- operation="crop"
- ci-src="dino-reichmuth-1.jpg"
- ci-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 Image
-
- <div style="width: 200px; height: 200px;">
- <img
- src="https://doc.cloudimg.io/sample.li/boat.jpg"
- />
-</div>Crop
-<div style="width: 200px; height: 200px;">
- <img
- ci-src="boat.jpg"
- ci-params="func=crop"
- ci-blur-hash="LHNRn;04058E};wyIqJ8P90P%b^h"
- />
-</div>Auto crop
-<div style="width: 200px; height: 200px;">
- <img
- ci-src="boat.jpg"
- ci-params="func=crop&gravity=auto"
- ci-blur-hash="LHNRn;04058E};wyIqJ8P90P%b^h"
- />
-</div>Use with background images
- -<div
- ci-bg-url="ameen-fahmy.jpg"
- ci-params="func=crop"
- ci-blur-hash="L34VB$Rj8wofayfPj@azDNj[.9WB"
- style="background:#000 50% 50% / cover no-repeat;color:#fff;"
->...your content...<div/>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. -
-
- 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://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.2/blur-hash/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>
-- NOTE: You should put the scripts below all your content in the - body tag and above all other scripts. After inserting the scripts the plugin starts immediately processing - all images with ci-src, ci-bg-url attributes. (If the scripts are put into the head tag, no images will be - detected and processed. If the scripts are put below all other scripts on your page, the images will be - not showed until all the scripts downloaded.) -
-- 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! -
--