Adaptive Images standalone JavaScript

You can integrate our Adaptive Images and CDN service into any website using the standalone JS snippet and some quick modifications in the markup.

1. Include this JavaScript in the head of your page:


        (function(w, d){
            var b = d.getElementsByTagName('head')[0];
            var s = d.createElement("script");
            var v = ("IntersectionObserver" in w) ? "" : "-compat";
            s.async = true; // This includes the script as async.
            s.src = "https://cdn.shortpixel.ai/assets/js/bundles/spai-lib-bg-webp" + v + ".0.9.min.js";
            w.spaiData = {
                key: "jsai",
                quality: "lossy",
                sizeFromImageSuffix: true
            };
            b.appendChild(s);
        }(window, document));
                

2. HTML changes

Replace all src attributes of the HML markup with data-spai-src, for example:


<img class="aligncenter size-full wp-image-1794" data-spai-src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />
              

3. Add the domain to your account.

Login into your account, go to Add Domain and add the site's domain.

Tweaks

To replace also the backgrounds, first add this CSS in the head, where my-bkg-class1 & 2 are the classes of the elements having background:


        html.spai_has_js .my-bkg-class:not(.spai-bg-lazyloaded),
        html.spai_has_js .my-bkg-class:not(.spai-bg-lazyloaded) { background-image: none !important; }
                

Then replace the JS code in the head with this:


        document.documentElement.className += " spai_has_js";
        (function(w, d){
            var b = d.getElementsByTagName('head')[0];
            var s = d.createElement("script");
            var v = ("IntersectionObserver" in w) ? "" : "-compat";
            s.async = true; // This includes the script as async.
            s.src = "https://cdn.shortpixel.ai/assets/js/bundles/spai-lib-bg-webp" + v + ".0.9.min.js";
            w.spaiData = {
                key: "cstm",
                quality: "lossy",
                backgroundReplaceClasses: ['my-bkg-class1','my-bkg-class2'],
                watchClasses: [],
                backgroundLazySelectors: ".my-bkg-class1, .my-bkg-class2",
                sizeFromImageSuffix: true
            };
            b.appendChild(s);
        }(window, document));

                

Examples

IMG tags
Tags with backgrounds