This 1px transparent GIF encoded with base64 is the perfect placeholder image if you are looking for a really tiny image to replace when the page is loaded. I just found it on google myactivity page source code but it is also available on Github Gist.

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Sample Usage

  1. First add the following code to your page:
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="468" height="90" data-src="my-large-picture-to-replace.jpg" />
  2. When the page load is complete simply replace src with data-src:
    <script>
    /* On document load */
    document.onreadystatechange = function(){
        if (document.readyState == "interactive") {
        /* Replace all image sources */
            ir = document.querySelectorAll("img[data-src]");
            for(i=0;i<ir.length;i++){
            ir[i].src = ir[i].getAttribute("data-src");
            }
        }
    }
    </script>
    

I created a quick manual replacement script here. If you like, you can also use javascript frameworks like angular or reactjs to handle the replacements.


References