Ir para conteúdo
Omar~

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

Recommended Posts

 

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: