[Snippet] Transparent 1px GIF Encoded With Base64

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

• https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready
• https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag/24835209
• https://www.w3schools.com/jsref/met_element_getattribute.asp
• https://gist.github.com/while0pass/661069/

Join The Discussion