How to get adaptive images on non-WordPress websites
If you are trying to improve your site speed, you don’t need to go too far to hear or see that you need to use adaptive images, or scaled images. What is this?
Adaptive images is what you need to prevent delivering huge images to your clients with small screens. Say you upload a 3000×2000 image, would you want to deliver that huge and heavy photo to a visitor with an iPhone? It doesn’t make sense. You are just going to make their user experience worse, by slowing down the page loading. That’s why you need to “adapt” or “scale” the image according to the device.
We are sure you’ve heard of ShortPixel Adaptive Images: The best and only plugin you need to serve adaptive images, from our fast CDN and optimized with ShortPixel‘s technology.
But what if you don’t have a non-WordPress website?
Adaptive Images on any website
Introducing the Adaptive Images Standalone JavaScript. With a few lines of code and the power of ShortPixel you’ll be able to serve scaled images to anybody.
Let’s see step by step what you need to do in order to serve scaled images, if you don’t have a WordPress website.
1 – Add JavaScript code
You first need to add the following code snippet in the head of your page, anywhere between the tags <head> ... </head>.
<script>
(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));
</script>
For example:
2 – Replace SRC attributes
Now you’ll have to replace all the src attributes of your images HTML markup with data-spai-src. For example, if you had this URL:
<img class="aligncenter" src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />
You’ll have to change it to:
<img class="aligncenter" data-spai-src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />
This step depends a lot on your website and the way it is built. It may require some replacements in the DataBase, or the result may be achieved through a code that replaces src with data-spai-src.
3 – Create an account on ShortPixel
Just go to our website and click on SIGN UP on the top right. Once your account is set up, you can purchase a monthly subscription or one-time credits to optimize your images. For more information about how your credits will be spent, click here.
4 – Associate your domain
You’ll have to associate your domain in order to let ShortPixel know what account your domain should take credits from. Have a look at this article for more information.
Adaptive Background Images as well!
If you also have background images on your site, then you’ll have to tweak a bit the previous steps.
To be clear, background images are those that are added in background-image CSS properties, not with regular img tags. For example:
<div class="exampleclass" style="background-image: url(https://shortpixel.com/img/robot_lookleft_wink.png)">
There might be other similar CSS properties, you should proceed in a similar way for all of them.
1 – Add CSS
Add the following CSS in the head of your code, the same way you did previously with the JavaScript file; anywhere between the tags <head> ... </head>
<style>
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; }
</style>
You will have to replace my-bkg-class1, my-bkg-class2 and so on, with the classes of the elements having the background. For example, following the example above, you’ll have:
<style>
html.spai_has_js .exampleclass:not(.spai-bg-lazyloaded) { background-image: none !important; }
</style>
Notice that you can add as many classes as you want, separated by commas. For instance:
<style>
html.spai_has_js .exampleclass:not(.spai-bg-lazyloaded),
html.spai_has_js .whatever_class:not(.spai-bg-lazyloaded),
html.spai_has_js .another_one:not(.spai-bg-lazyloaded) { background-image: none !important; }
</style>2 – Tweak the JavaScript
Now you will have to change JavaScript code you added, to look like the following instead:
<script>
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/spai-lib-bg-webp" + v + ".0.9.min.js";
w.spaiData = {
key: "cstm",
quality: "lossy",
backgroundReplaceClasses: ['exampleclass','whatever_class', 'another_one'],
watchClasses: [],
backgroundLazySelectors: ".exampleclass, .whatever_class, .another_one",
sizeFromImageSuffix: true
};
b.appendChild(s);
}(window, document));
</script>
Notice that we have added the CSS classes mentioned earlier on two different lines:
...
backgroundReplaceClasses: ['exampleclass','whatever_class', 'another_one'],
...
backgroundLazySelectors: ".exampleclass, whatever_class, another_one",
...3 – CSS files
If you have background images in .css files, then you will just need to prefix the URL of them like this:
<link rel="stylesheet" href="https://cdn.shortpixel.ai/cstm/q_lossy+ret_img/https://my.domain.com/my/style.css"/>The compression setting is done by the q_ parameter, which can have one of the following three values: q_lossy, q_glossy and q_lossless.
Notice that you need to use the full URL of the .css file, including the domain.
And that’s all! Feel fry to try it out and reach out if you have any questions.
