A base64 image loads faster than a url?

Firstly, I want you to think that everything is RELATIVE and only experiences from each situation will determine CASE to CASE which will perform better on your project and server.

There are two environments / layers that you have to think about, one is the rendering and the other the requisitions :

Front End Rendering

Rendering on the front end can begin to occur even if the page has not finished loading, ie images can start loading and rendering even without the page completing the download.

Thinking about whether the image is based on64, there may be two reasons why it slows down:

• The internal engine of the browser having to decode the image
• Base64 images using the protocol ( data URI scheme ) data: increase the size of the html page by far, which makes the page slower to be rendered .

In conclusion, data protocol and base64 can make html page rendering and download slower, but you will save requests

Requests in the Back End

Number of requests improve performance, but not on the front-end side, but on the back end, that is, fewer requests, probably better performance, however in the case of the data: protocol, as I mentioned before, the html page will be larger and then you may still have a new elevation in server consumption.

• Keep-alive connections

  Browsers try to keep the connection open when they are requesting items from the same page, so if you have multiple images, the browser will probably try to decrease the connections (not the requests), which in a way would help. But note that it is not always possible to reuse the same connection and that the browser will behave exactly like this, each browser has its own way of doing this and will try to operate the situation as it sees fit.

  Read more at: link

Conclusion

• You can use if-modified-since with "304 not modified" without PHP

In this way you will have less impact on the server than static files, since the images will come from the cache in the next requests and it will also make the page download faster, this does not directly influence the rendering process, but I believe static images are easier to render for browsers than coded ones.

A base64 image loads faster than a url?

No, coded images are 37% larger than the originals, which will increase bandwidth utilization. On the other hand, including it in the file will remove another GET going back and forth to the server.

More details on #SOEN : base64 encoded image size and advantages and disadvantages base64 image encode

Look, I think it's best to pre-load the loading and error images and upload the images through a JavaScript.

var loading = "http://cdn.flaticon.com/png/256/12334.png";
var error = "http://cdn.flaticon.com/png/256/9188.png";

var onImageLoad = function (event) {   
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.src = target.src;
  }, target.delay);
}

var onImageError = function (event) {
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.title = "erro ao carregar a imagem";
    target.image.src = error;
  }, target.delay);
}

var images = document.querySelectorAll("[data-src]");
[].forEach.call(images, function (image, indice) {
  var img = new Image();
  img.image = image;
  img.image.src = loading;   
  
  //simulando um delay... senão a imagem de load não vai ficar visivel.
  //o setTimeout nos eventos abaixo é desnecessario.
  img.delay = 0;
  if (img.image.dataset.delay)
    img.delay = parseInt(img.image.dataset.delay); 

  img.addEventListener("load", onImageLoad);    
  img.addEventListener("error", onImageError);
  img.src = img.image.dataset.src;
})

.preload-loading {
    background-image: url(http://cdn.flaticon.com/png/256/12334.png);
    background-repeat: no-repeat;
}

.preload-error {
    background-image: url(http://cdn.flaticon.com/png/256/9188.png);
    background-repeat: no-repeat;
}

img {
    width: 256px;
    height: 256px;
    background-color: whitesmoke;
    border: 1px solid gainsboro;
    border-radius: 10px;
    overflow: none;
    padding: 5px;
}

<img data-src="http://cdn.flaticon.com/png/256/97199.png"data-delay="250" title="Verão" />
<img data-src="http://cdn.flaticon.com/png/256/63511.png"data-delay="500" title="Inverno" />
<img data-src="http://cdn.flaticon.com/png/256/83554.png"data-delay="250" title="Primavera" />
<img data-src="http://cdn.flaticon.com/png/256/2130.png"data-delay="750" title="Outono" />
<img data-src="http://cdn.flaticon.com/png/256/notfound.png"data-delay="1000" title="Outono" />

The preload-loading and preload-error classes must be present in some "global CSS" file, so that the images are already loaded by the Browser before the page with the images is loaded.

The property data-delay and the call to window.setTimeout are unnecessary, I put them just to make the example richer.

If you use the script above, the images will only be associated with their elements, only after uploaded and ready to be displayed.