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

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:

You’ll have to change it to:

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:

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

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:

Notice that you can add as many classes as you want, separated by commas. For instance:

2 – Replace the JavaScript

Now you will have to remove the first JavaScript code you added, and add the following instead:

Notice that we have added the CSS classes mentioned earlier in two different lines:

... backgroundReplaceClasses: ['exampleclass','whatever_class', 'another_one'], ... backgroundLazySelectors: ".exampleclass, whatever_class, another_one", ...

And that’s all! Feel fry to try it out and reach out if you have any questions.

Original article Published here >

* Optimise WP Website Images with ShortPixel – Super Fast Website, Optimised SEO, WordPress Plugin (Referral Ad)