As an Amazon Associate, I earn from qualifying purchases.

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.


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:
    /* On document load */
    document.onreadystatechange = function(){
        if (document.readyState == "interactive") {
        /* Replace all image sources */
            ir = document.querySelectorAll("img[data-src]");
            ir[i].src = ir[i].getAttribute("data-src");

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.


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More Snippets
Share Share Tweet