This is a demo page to show FarbaCDN in action.

You should be able to see a microwave sky image below (1.4 MB):

The actual HTML code for this is as follows: you’ll have to add a reference to FarbaCDN client library somewhere on the page:

<script src="https://farbacdn.github.io/farba-public/build/farbacdn.min.js"></script>

And whenever there’s an image or video, it is added as usual, with an additional class “farba” and the “src” attribute replaced with “data-src”:

<img class="farba" data-src="/wp-content/uploads/2020/09/101080_7yrFullSky_WMAP_2048W.png"/>

In a desktop browser you can open developer tools tab right now and see how the data is actually loaded.

For single page applications, FarbaCDN logic may be activated for any DOM element at any time:
Try it

This is achieved with the following code:

<div id="digits"></div>
<button onclick="changeDigit()">Try it</button>
<script>
var count = 0;
function changeDigit(){
  var divDigit = document.getElementById('digits');
  var newImg = document.createElement("img");
  newImg.setAttribute("data-src", "/wp-content/uploads/2021/04/demo-digit-"+count+".png");
  newImg.setAttribute("class", "farba");
  divDigit.innerHTML = "";
  divDigit.appendChild(newImg);
  farbacdn.processElement(newImg);
  count = (count + 1) % 10;
}
</script>

Essential here is that one may call a farbacdn.processElement() function on a DOM node (image) at any time after a page is loaded, provided that the image has class of farba enabled.