A Base64 image loads faster than a url?

Question

I am developing a page where I need to have the images displayed only after loading them.

And, not to leave the space of the empty images, I thought to use some image of "Loader".

So, I thought that it wouldn’t do any good to display images after you have clicked since I will have to use another image to demonstrate that they are loading.

Then came the idea: Did I use this image of "loading" directly in the tag img as base 64, it will not load faster than the same image being accessed through its url?

So that’s the question: Using a base 64 image is faster than using a url.

Example with url:

<img src="http://link-da-imagem" />

Example with Base64

<img src="data:image/gif;base64,..." />

Answer 1

First I want you to think that everything is RELATIVE and only experiences of each situation can determine CASE BY 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

Front-end rendering can begin to occur, even without the page being finished loading, that is, images can start loading and rendering even without the page having completed the download.

Thinking so the image being in Base64 issue, there may be two reasons that make it slower:

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

In conclusion, date protocol and Base64 can make rendering and downloading the html page slower, but you will save requests

Requests in the Back-End

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

• Keep-Alive connections

  Browsers try to keep the connection open when 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 on: https://en.wikipedia.org/wiki/HTTP_persistent_connection}

Completion

There is no way to state which will be faster, however I recommend you use static images with Cache and 304 Not Modified, see this question of mine:

• It is possible to use if-modified-Since with "304 not modified" without PHP

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

Answer 2

A Base64 image loads faster than a url?

No, encoded images are 37% larger that the original ones, which will increase bandwidth usage. On the other hand including it in the file will remove another GET to and from the server.

More details on #SOEN: Base64 encoded image size and Advantages and disadvantages Base64 image

Answer 3

Look, I believe that the best is to pre-load the loading and error images and load 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 classes preload-loading and preload-error 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 estate data-delay and the call to window.setTimeout are unnecessary, I put them only to make the richest example.

If you use the above script, the images will only be associated to their proper elements, only when loaded and ready for display.