Cloudimage responsive JS plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported.
As we explain in our blog post on Best Practises for image acceleration, Responsive Images are a requirement for your website to load fast on any screen. There is no point in sending a full resolution image onto a small smartphone screen when an image of half-size would be sufficient. Cloudimage's responsive design script automates Responsive Images for you.
Live demo: change your browser's windows size to simulate a smaller screen. You will notice that smaller images are loaded on smaller screens.
Forcing the update to 'Off' will not reload the images as you reduce your windows size. If you start with a small window size and increase it, then the script will reload larger images to look optimal.
Step 1: include cloudimage.plugin.min file into your project (after all your content in body, before other scripts):
jScaler identifier takes as value image path (absolute url or relative to BASE_URL).
NOTE: Your images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS by Cloudimage. You can also upload your images into Cloudimage, more info here.
optional, default: none
Parameters are used to apply transformations to the image, or to add options to the result image.
fgrey - apply a greyscale filter on the image
fgaussian[0..10] - apply a gaussian blur filter on the image
fcontrast[-100..100] - apply a contrast filter on the image
fbright[0..255] - apply a brightness filter on the image
fpixelate[0..100] - apply a pixelate filter on the image