Tiny image placeholder; multiple base64 or single 1x1gif - html

Question

tl;dr: optimal placeholder image, tiny base64 code in HTML or 1x1 gif image?
I'm in the process of building a portfolio website with many high resolution images. Most are contained in slideshows or hidden divs. So I added a simple lazy loading function to the page.
It all works, but I was wondering what would be the fastest way of loading the placeholder images. Because I was told to never leave the src attribute blank.
I found a very tiny base64 image code on the internets and am using this. But the website contains many images, so the browser is decoding every single base64 image now. Doesn't seem very efficient either.
Would using a single very small 1x1 gif image be more efficient? Or would that add more network requests?
What is the most optimal solution?
Here's the code, almost irrelevant to my question:
<div class="slide">
<button> Click to load images </button>
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/200/3" alt="" />
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/nemo/627/300/4" alt="" />
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/300/4" alt="" />
</div>
jQuery:
$.fn.lazyLoad = function(){
var lazy = $(this).find('img[data-src]');
$(lazy).each(function(index){
$(this).attr('src', $(this).attr("data-src"));
});
};
$('.slide').click(function(){
$(this).lazyLoad();
});
And a jsfiddle:
jsfiddle

Answer 1

Use <div> and background-image they load faster (at least perceived faster), but if you are concerned about accessibility and/or SEO, go with what you have already. I optimized the jQuery a little:
Use .lazy instead of [data-src] class selectors are faster than attribute selectors.
When getting or setting data-* attributes, it's better to use the newer way by using .data() instead of .attr().
The background-image property can be manipulated by the .css() method.
SNIPPET
$.fn.lazyLoad = function() {
var lazy = $(this).find('.lazy');
lazy.each(function(index) {
var data = $(this).data('src');
$(this).css({
'background-image': 'url(' + data + ')'
});
});
}
$('.slide').on('click', function() {
$(this).lazyLoad();
});
.lazy {
width: 627px;
min-height: 200px;
background-repeat: no-repeat;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<button>Click to load images</button>
<div class="lazy" data-src="http://lorempicsum.com/up/627/300/3"></div>
<div class="lazy" data-src="http://lorempicsum.com/nemo/627/300/4"></div>
<div class="lazy" data-src="http://lorempicsum.com/up/627/300/4"></div>
</div>

Answer 2

Why would you use base64 encoding for that? Encoded images are larger and so have a longer load time however say you are sending an email from a to b then you have to embed the image in the email. That is why it is possible to embed images in html. Emails have to be encoded to standards one of which is base64.