ShortPixel Adaptive 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-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 and also add the width and height of the original image. If the images have an alt tag, then you will also need to add an inline image placeholder, like this:


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

Without the inline placeholder a broken image icon briefly displays on slow connections before being replaced by the javascript. If you're not using alt tags ( which you should by the way :) ), you don't need to add the inline placeholder although by the standards you should have a src in all cases - this is because a broken image without an alt tag is ignored by the browser altogether.

3. Add the domain to your account.

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

Tweaks

To also replace the inline 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-class1:not(.spai-bg-lazyloaded), html.spai_has_js .my-bkg-class2: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));

If your HTML elements have backgrounds that come from .css files, you need to prefix the full .css URLs with https://cdn.shortpixel.ai/client/q_lossy,ret_img/. Do not add backgroundLazySelectors for these elements.

Examples

IMG tags
Tags with backgrounds

Adaptive Images standalone JavaScript

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

2. HTML changes

3. Add the domain to your account.

Tweaks

Examples