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, 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
