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

No Comments Join The Discussion //