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-webp" + v + ".0.9.7.min.js";
            w.spaiData = {
                key: "jsai",
                quality: "lossy",
                sizeFromImageSuffix: true
            };
            b.appendChild(s);
        }(window, document));
                

2. HTML changes

Replace all src attributes of the HTML 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 the src attribute vith the value of the inline image placeholder in the example below:

<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 it should have a src in all cases - because a broken image without an alt tag is ignored by the browser altogether.

If you are using either width or max-width CSS styles to alter your images size, when you add the height attribute, the image will get distorted so in order to avoid this and also prevent CLS (Content Layout Shift), instead of the height attribute, add style="aspect-ratio: xxx / yyy" where xxx and yyy are the original image width and height respectively.

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:

  <style id="spai_bg_lazr">
        html.spai_has_js .my-bkg-class1:not(.spai-bg-prepared),
        html.spai_has_js .my-bkg-class2:not(.spai-bg-prepared) { background-image: none !important; }
  </style>
                

The "spai_bg_lazr" ID of the style element needs to be present.

Then configure the JS using the doSelectors parameter as in the example below (if you have img tags as well as backgrounds, you need to define both elements of the doSelectors):

        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.7.min.js";
            w.spaiData = {
                key: "cstm",
                quality: "lossy",
                doSelectors: [
                    {//img is the default one, you need to define it if you define doSelectors, otherwise it's active by default
                        selectors: ['img'],
                        origAttr: 'data-spai-src',
                        targetAttr: 'src',
                    },
                    {
                        selectors: ['.my-bkg-class1', '.my-bkg-class2'],
                        attrType: 'style',
                        targetAttr: 'style',
                    },
                ],
                sizeFromImageSuffix: true
            };
            b.appendChild(s);
        }(window, document));

                

If you need to tweak it furhter, here's the complete list of attributes of the doSelectors parameter:

doSelectors: [{
    selectors: ['div.parent-class .my-bkg-class1', '.my-bkg-class2'],
    type: 'attr', //attr - the target is an attribute targetAttr, inner - the target is the innerHTML as for a <style> block
    lazy: false, //default is true
    resize: false, //default is true
    lqip: false, //default is true
    //search for the original URL in this attribute, if not present, it expects an inline placeholder containing it as metadata, in the targetAttr attribute
    origAttr: 'data-orig-attr',
    attrType: 'url', // can be: url, srcset, style (css - looks for background-images), json.
    targetAttr: 'src',
},
{ ..... }],
      

If your HTML elements have backgrounds that come from .css files, there are two ways to have the images inside them optimized:

1. Prefix the full .css URLs with https://cdn.shortpixel.ai/client/q_lossy,ret_img/. Do not add doSelectors config for these elements. The images will be optimized but not lazy-loaded or resized.
2. Add a doSelectors rule like this: {type: '__stylesheet'} and also add style that overrides the background images, as for the tags with inline CSS above (.my-bkg-class1) - example: The images will be lazy-loaded and resized unless you turn these off with parameters inside the __stylesheet doSelector.

Examples

IMG tags
Tags with backgrounds