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.
But what if you don’t have a non-WordPress website?
Adaptive Images on any website
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.
You first need to add the following code snippet in the head of your page, anywhere between the tags
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
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
You will have to replace
my-bkg-class2and 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:
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)