{"id":5567,"date":"2020-11-16T18:17:17","date_gmt":"2020-11-16T18:17:17","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5567"},"modified":"2021-04-15T03:31:18","modified_gmt":"2021-04-15T03:31:18","slug":"how-to-get-adaptive-images-on-non-wordpress-websites","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-get-adaptive-images-on-non-wordpress-websites\/","title":{"rendered":"How to get adaptive images on non-WordPress websites"},"content":{"rendered":"\n

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<\/strong>, or scaled images<\/strong>. What is this?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

We are sure you’ve heard of ShortPixel Adaptive Images<\/strong><\/a>: The best <\/strong>and only plugin you need to serve adaptive images, from our fast CDN and optimized with ShortPixel<\/a>‘s technology.<\/p>\n\n\n\n

But what if you don’t have a non-WordPress website?<\/p>\n\n\n\n\n\n\n\n

Adaptive Images on any website<\/h2>\n\n\n\n

Introducing the Adaptive Images Standalone JavaScript<\/strong>. With a few lines of code and the power of ShortPixel<\/a> you’ll be able to serve scaled images to anybody<\/strong>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

1 – Add JavaScript code<\/h3>\n\n\n\n

You first need to add the following code snippet in the head of your page<\/strong>, anywhere between the tags <head> ... <\/head><\/code>.<\/p>\n\n\n\n

<script>\n    (function(w, d){\n        var b = d.getElementsByTagName('head')[0];\n        var s = d.createElement(\"script\");\n        var v = (\"IntersectionObserver\" in w) ? \"\" : \"-compat\";\n        s.async = true; \/\/ This includes the script as async.\n        s.src = \"https:\/\/cdn.shortpixel.ai\/assets\/js\/bundles\/spai-lib-bg-webp\" + v + \".0.9.min.js\";\n        w.spaiData = {\n            key: \"jsai\",\n            quality: \"lossy\",\n            sizeFromImageSuffix: true\n        };\n        b.appendChild(s);\n    }(window, document));\n<\/script><\/code><\/pre>\n\n\n\n

For example:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
2 – Replace SRC attributes<\/h3>\n\n\n\n
Now you’ll have to replace all the <\/strong>src<\/strong><\/code> attributes<\/strong> of your images HTML markup with <\/strong>data-spai-src<\/strong><\/code>. For example, if you had this URL:<\/p>\n\n\n\n
<img class=\"aligncenter\" src=\"https:\/\/shortpixel.com\/img\/robot_lookleft_wink.png\" alt=\"robo winks\" width=\"600\" height=\"933\" \/><\/code><\/pre>\n\n\n\n

You’ll have to change it to:<\/p>\n\n\n\n
<img class=\"aligncenter\" data-spai-src=\"https:\/\/shortpixel.com\/img\/robot_lookleft_wink.png\" alt=\"robo winks\" width=\"600\" height=\"933\" \/><\/code><\/pre>\n\n\n\n

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<\/code> with data-spai-src<\/code>.<\/p>\n\n\n\n
3 – Create an account on ShortPixel<\/h3>\n\n\n\n
Just go to our website<\/a> and click on SIGN UP<\/strong> on the top right. Once your account is set up, you can purchase a monthly subscription<\/a> or one-time credits<\/a> to optimize your images. For more information about how your credits will be spent, click here<\/a>.<\/p>\n\n\n\n
4 – Associate your domain<\/h3>\n\n\n\n
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<\/a> for more information.<\/p>\n\n\n\n
Adaptive Background Images as well!<\/h2>\n\n\n\n
If you also have background images<\/strong> on your site, then you’ll have to tweak a bit the previous steps.<\/p>\n\n\n\n
To be clear, background images are those that are added in background-image<\/code> CSS properties, not with regular img<\/code> tags. For example:<\/p>\n\n\n\n
<div class=\"exampleclass\" style=\"background-image: url(https:\/\/shortpixel.com\/img\/robot_lookleft_wink.png)\"><\/code><\/pre>\n\n\n\n

There might be other similar CSS properties, you should proceed in a similar way for all of them.<\/p>\n\n\n\n
1 – Add CSS<\/h3>\n\n\n\n
Add the following CSS<\/strong> in the head of your code, the same way you did previously with the JavaScript file; anywhere between the tags <head> ... <\/head><\/code><\/p>\n\n\n\n
<style>\nhtml.spai_has_js .my-bkg-class1:not(.spai-bg-lazyloaded),\nhtml.spai_has_js .my-bkg-class2:not(.spai-bg-lazyloaded) { background-image: none !important; }\n<\/style><\/code><\/pre>\n\n\n\n

You will have to replace <\/strong>my-bkg-class1<\/strong><\/code>, <\/strong>my-bkg-class2<\/strong><\/code> and so on<\/strong>, with the classes of the elements having the background. For example, following the example above, you’ll have:<\/p>\n\n\n\n
<style>\nhtml.spai_has_js .exampleclass:not(.spai-bg-lazyloaded) { background-image: none !important; }\n<\/style><\/code><\/pre>\n\n\n\n

Notice that you can add as many classes as you want, separated by commas<\/strong>. For instance:<\/p>\n\n\n\n
<style>\nhtml.spai_has_js .exampleclass:not(.spai-bg-lazyloaded),\nhtml.spai_has_js .whatever_class:not(.spai-bg-lazyloaded),\nhtml.spai_has_js .another_one:not(.spai-bg-lazyloaded) { background-image: none !important; }\n<\/style><\/code><\/pre>\n\n\n\n
2 – Tweak the JavaScript<\/h3>\n\n\n\n
Now you will have to change JavaScript code<\/strong> you added, to look like the following<\/strong> instead:<\/p>\n\n\n\n
<script>\n    document.documentElement.className += \" spai_has_js\";\n    (function(w, d){\n        var b = d.getElementsByTagName('head')[0];\n        var s = d.createElement(\"script\");\n        var v = (\"IntersectionObserver\" in w) ? \"\" : \"-compat\";\n        s.async = true; \/\/ This includes the script as async.\n        s.src = \"https:\/\/cdn.shortpixel.ai\/assets\/js\/spai-lib-bg-webp\" + v + \".0.9.min.js\";\n        w.spaiData = {\n            key: \"cstm\",\n            quality: \"lossy\",\n            backgroundReplaceClasses: ['exampleclass','whatever_class', 'another_one'],\n            watchClasses: [],\n            backgroundLazySelectors: \".exampleclass, .whatever_class, .another_one\",\n            sizeFromImageSuffix: true\n        };\n        b.appendChild(s);\n    }(window, document));\n<\/script><\/code><\/pre>\n\n\n\n

Notice that we have added the CSS classes mentioned earlier<\/strong> on two different lines:<\/p>\n\n\n\n
...\nbackgroundReplaceClasses: ['exampleclass','whatever_class', 'another_one'],\n...\nbackgroundLazySelectors: \".exampleclass, whatever_class, another_one\",\n...<\/code><\/pre>\n\n\n\n
3 – CSS files<\/h3>\n\n\n\n
If you have background images in .css files, then you will just need to prefix the URL of them like this:<\/p>\n\n\n\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.shortpixel.ai\/cstm\/q_lossy+ret_img\/https:\/\/my.domain.com\/my\/style.css\"\/><\/code><\/pre>\n\n\n\n
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<\/strong>.<\/p>\n\n\n\n
Notice that you need to use the full URL of the .css file<\/strong>, including the domain.<\/p>\n\n\n\n

And that’s all! Feel fry to try it out and reach out<\/a> if you have any questions.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":9,"featured_media":5595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5567"}],"version-history":[{"count":17,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5567\/revisions"}],"predecessor-version":[{"id":5768,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5567\/revisions\/5768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/5595"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}