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" + v + ".1.0.min.js";
            w.spaiData = {
                key: "jsai",
                quality: "lossy", // can be lossy, glossy or lossless
                sizeFromImageSuffix: true //deactivate this if you have images that end in, for example: "-100x100.jpg", but the numbers don't mean the pixels width or height of the image
            };
            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 to your account, go to Associate Domains and add the site's domain.

Tweaks

Replace inline backgrounds

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, as in the above example.

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" + v + ".1.0.min.js";
            w.spaiData = {
                key: "jsai",
                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.

Replace any custom attribute

The doSelectors below will replace the poster attribute of the video tags:

doSelectors: [{
      selectors: ['video'],
      targetAttr: 'poster',
}],
      

Exclude images

In the w.dataSpai object, add the following attribute:

exclusions: {
    selectors: {
        "div.excluded img" : {
            lazy: 0, // 0 - eager, 1 - lazy
            cdn:0, // 0 - CDN, 1 - original (obviously no resize & no crop too)
            lqip: -1, // 0 - default (global option), 1 - force lqip, -1 - force no lqip
            resize:0, //0 - no resize, 1 - resize
            crop:-1 // 0 - default (global option), 1 - force crop, -1 - force no crop
        }
    },
    urls: {
        "https://my.domain.com/this/image/excluded.jpg" {
            lazy: 0, // .... same structure as above for a selector exclude
        }
    }
},
      

You can add several selectors and URLs but it's better to keep the number of exclusions low.

Use image sizes breakpoints

In the w.dataSpai object, add the following attribute:

sizeBreakpoints: {
      on: true,
      base: 100, //the minimum resolution width to which to scale down
      rate: 10,  //the percent that gets added to the next breakpoint size for example for a 10% rate, the breakpoints are: 100, 111, 122, 134, 147, 162, etc., each 10% larger than the previous breakpoint size.
},
      

It makes sense to use size breakpoints if you experience a lot of cache misses on the images; this could happen if your images scale fluently with the viewport and you don't have a lot of visits on your pages.

Use your own CDN

Add a CNAME to our storage

Follow the steps 1 & 2 here to set up your DNS.

Define the CDN domain in JS

Just before w.spaiData, add this line: w.spaiDomain="your.cdn.domain.com"

Next-gen images

If your CDN doesn't support Vary Cache to transparently serve next-gen images, then also add -webp to the JS url, like this:

Note that the -bg can be present or not, depending if you need backgrounds support.

Examples

IMG tags
Tags with inline style backgrounds
Excluded IMG tags
Various other tags (video poster).
Backgrounds in a <style> block.
Backgrounds in stylesheet.