Qual seria mais leve/ rápido na opinião de vocês?

[Omar~ 87]

 

Usar a imagem a chamando no arquivo.

Exemplo:

<img src="IMAGE.FORMATO">
background-image: url('IMAGE.FORMATO')

 

Ou converte-la em base64 e depois usar seu código:

Exemplo:

<img src="base64,CODE">
background-image: url('base64,CODE')

 

Porque peguei um trabalho para fazer e o cliente quer várias imagens em full screen, mostrei para ele uma aplicação como conhecido "parallax" ele gostou muito e vai querer dessa forma.

Porém ao utilizar grandes imagens o site pode ficar muito pesado para carregar, principalmente para quem tem baixa conexão.

 

O que você acha, qual seria mais leve para carregar?

[MateusFreitas01 1]

Ambos carregariam a imagem da mesma forma, creio eu...

[Omar~ 87]

Andei fazendo um estudo e testes sobre o assunto e o resultado:

 

Citar

Imagens SVG realmente são mais leves para o uso da conexão. O calculo dado em consumo de bits,  em média para cada 1kbs de uma imagem digamos .jpg uma imagem em base64 consome 8kbs a menos.

Entendendo na base seria mais ou menos assim: uma imagem de 100kbs ele em svg conta é de 12kbs aproximados em termos de requisição de banda. Mas em sí o arquivo é bem maior.

Essa foi a conclusão que tirei com inúmeras coisas que li a respeito.

 

Citar

Então podemos dizer de se eu usar uma imagem em base64 ela será carregada mais rápido?

Não é bem assim, uma vez que a imagem terá que ser construída pelo navegador, aumentando em muito o consumo da máquina que acessa o website o tornando-o bem mais lento que ao se usar uma imagem normalmente.

Pelos testes usando diversas imagens bem grandes (full-screen) de vários formatos, usando base64 fez a página ficar cerca de 4X mais lenta para carregar, mediante ao alto consumo do processador.

Por outro lado economizou cerca 80% de banda para carregar.

Essa foi a conclusão que tirei com testes pessoais que fiz.

 

Enfim usar e não usar vai depender do que se espera de resultado. Como o uso de ícones em SVG mesmo para quem tem baixa conexão é incontavelmente mais rápido para carregar do que uma imagem normal.

Bem não posso falar sobre SVG porque não tenho conhecimento técnico sobre isso, só sei usar mesmo. Apesar que comecei a estudar como criar seus códigos.

[Rodrigo Vieira E da Silva 0]

@Omar~, tudo bem?

 

Acredito que para a realização desse projeto e o ideal é utilizar um compressor de imagens que o jpegoptim ou guetzli para reduzir o tamanho das imagens sem que perca a qualidade das mesmas.

 

Veja o vídeo abaixo

 

[Pita 53]

Cara, imagem é melhor por alguns motivos:

 

1º - Imagem irá pesar da primeira vez, depois o navegador faz cache e esse trafego deixa de existir;

2º - Navegadores tentam paralelizar as coisas, e com novo padrão HTTP/2 isso será mais real;

3º - Imagem possui vários formatos, cada um para uma finalidade diferente e você pode testar o que melhor te atende;

4º - Todos os itens acima já deveriam ser suficientes, mas se imagem em base 64 fosse realmente superior, o Google, Facebook, etc estaria utilizando para ganhar desempenho.

 

Entenda uma coisa, é bom saber que dá para usar imagem em base64, mas isso é para situações específicad