27

Estou desenvolvendo uma página onde eu preciso ter as imagens exibidas apenas após o carregamento das mesmas.

E, para não ficar o espaço das imagens vazios, eu pensei em utilizar alguma imagem de "loader".

Então, ponderei que não adiantaria nada exibir imagens depois de ter carregado já que terei que usar outra imagem para demonstra que elas estão carregando.

Daí me veio a ideia: Será que eu usar essa imagem de "loading" diretamente na tag img como base 64, ela não carregará mais rápido do que a mesma imagem sendo acessada através da sua url?

Então essa é a questão: Usar uma imagem base 64 é mais rápido do que utilizar uma url.

Exemplo com url:

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

Exemplo com base64

<img src="data:image/gif;base64,..." />
7
  • 2
    Já utilizei a segunda opção, e o navegador dava crash com imagem muito grande. Então fiz um método que recuperava uma imagem como base64 e bastava chamar a URL igual no primeiro exemplo seu, foi a melhor maneira para uma melhor experência com o usuário inclusive. Commented 28/10/2015 às 15:55
  • 1
    Wallace, acredito que colocar esta imagem como base64 em todas as imagens pode até deixar o carregamento da pagina mais lento. acredito que o melhor no seu caso é pre-carregar esta imagem usando o CSS, tipo adicionando a seguinte linha no seu CSS global: #preload-01 { background: url(http://link-da-imagem) no-repeat -9999px -9999px; }, desta forma a imagem já terá sido carregada pelo Browser antes da sua utilização. Commented 28/10/2015 às 15:56
  • 1
    Eu não tenho todos argumentos necessários para responder, mas só digo que base64 não gera cache, o que é ruim caso você tenha sempre a mesma imagem para a pagina. Commented 28/10/2015 às 16:08
  • Base64 é bom pra captcha. Commented 28/10/2015 às 16:08
  • 1
    Ótimo arguimento @GuilhermeLautert, precisei utilizar cache e chamei a imagem via URL mesmo, funcionou tranquilamente, não sabia disso quanto o base64 não guardar cache. Commented 28/10/2015 às 18:26

3 Respostas 3

30
+100

Primeiramente quero que pense que tudo é RELATIVO e apenas experiencias de cada situação poderão determinar CASO á CASO qual terá melhor performance no seu projeto e servidor.

Existem dois ambientes/camadas que você tem que pensar, um é a renderização e o outro as requisições:

Renderização Front-End

A renderização no front-end pode começar a ocorrer, mesmo sem a página ter sido terminada de carregar, ou seja imagens podem começar a carregar e renderizar mesmo sem a página ter completado o download.

Pensando assim em questão da imagem estar em base64, poderá haver dois motivos que tornam mais lento:

  • O motor interno do browser ter que decodificar a imagem
  • Imagens base64 usando o protocolo (data URI scheme) data: aumentam o tamanho da página html em muito, o que torna a página mais lenta de ser renderizada.

Concluindo, protocolo data e base64 podem tornar a renderização e o download da página html mais lentos, mas você irá poupar requisições

Requisições no Back-End

Quantidade de requisições melhoram sim a performance, mas não do lado do front-end e sim do back-end, ou seja quanto menos requisições, provavelmente melhor performance, no entanto em caso do protocolo data: como citei antes, a página html será maior e então você também pode ter ainda sim uma nova elevação no consumo do servidor.

  • Conexões keep-alive

    Os navegadores tentam manter a conexão aberta quando estão requisitando itens de uma mesma página, assim se tiver várias imagens, provavelmente o navegador irá tentar diminuir as conexões (não as requisições), o que de certa forma já ajudaria. Mas note que nem sempre é possível reaproveitar a mesma conexão e que o browser irá se comportar exatamente assim, cada browser tem a sua própria maneira de fazer isto e vai tentar operar a situação conforme ele achar melhor.

    Leia mais em: https://en.wikipedia.org/wiki/HTTP_persistent_connection

Conclusão

Não tem como afirmar o qual vai ser mais rápido, no entanto eu recomendo você usar imagens estáticas com Cache e com o 304 Not Modified, veja esta pergunta minha:

Pois desta maneira você terá menos impacto no servidor quanto aos arquivos estáticos, já que as imagens virão do cache nas próximas requisições e ainda por cima irá fazer a página fazer o download mais rápido, isto não influencia diretamente no processo renderização, mas acredito que imagens estáticas sejam mais "fáceis" de renderizar para os browsers que as codificadas.

10

Uma imagem base64 carrega mais rápido que uma url?

Não, imagens codificadas são 37% maiores que as originais, o que irá aumentar a utilização da banda. Por outro lado, incluindo-o no arquivo irá remover outra GET ida e volta para o servidor.

Mais detalhes no #SOEN: base64 encoded image size e advantages and disadvantages base64 image encode

4

Olha, acredito que o melhor seja fazer um pre-carregamento das imagens de loading e de error e passar a carregar as imagens através de um 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" />

As classes preload-loading e preload-error devem está presentes em algum arquivo de "CSS global", para que as imagens já sejam carregadas pelo Browser antes que a pagina com as imagens sejam carregadas.

A propriedade data-delay e a chamada ao window.setTimeout são desnecessários, coloquei eles apenas para deixar o exemplo mais rico.

Se usar o script acima, as imagens só serão associdadas aos seus devidos elementos, somente apos carregadas e prontas para exibição.

3
  • E como fica a questão do base64 ser melhor ou não? Porque a questão do pré-loading de imagens foi apenas um exemplo para demonstrar minha dúvida Commented 28/10/2015 às 16:50
  • @WallaceMaxters, neste caso a imagem será carregada junto a pagina, porém para o seu exemplo, onde temos uma imagem que é reutilizada em vários pontos da sistema, isto só vai tornar a tamanho da sua pagina maior, fazendo que ela demore mais para carregar, por sua vez aumentando o trafico de dados, isto tudo para evitar um único GET. Commented 28/10/2015 às 17:01
  • Obrigado pela informação @TobyMosque Commented 28/10/2015 às 17:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .