Imagens em BASE64: "Performance" x Custos

Imagens em BASE64: “Performance” x Custos

Atualmente estou envolvido em 3 projetos de consultoria, onde os desenvolvedores acreditavam que era mais vantajoso utilizar DATA URI com Base64 do que trabalhar diretamente na entrega da imagem, utilizando compressão, HTTP Headers e outras técnicas.

Além disto, há a questão de custos… Quando falamos em AWS, Rackspace, Azure e afins, há o custo de banda trafegada.

Assim, compilei algumas questões para auxiliar a decisão por parte das equipes de desenvolvimento. Segue abaixo um resumo dos pontos (e tire você mesmo a conclusão):

1) Uma imagem base64 carrega mais rápido do que uma URL?
Infelizmente, não. Imagens codificadas são 37% maiores do que as originais (https://en.wikipedia.org/wiki/Base64#MIME), o que irá aumentar a utilização de banda.

Para complicar um pouco mais, a cada requisição um novo download da imagem será realizado, pois não será possível cachear no browser – via HTTP Headers – e também não é possível a utilização de CDN para a imagem (a não ser que você faça o cache da página inteira, como conteúdo estático).

Outro ponto é a renderização pelo browser, que precisará decodificar a imagem.

2) E o ganho com a redução de requisições HTTP?
É uma falácia, infelizmente.

Como disse acima, para cada imagem base64, há um aumento de 37% na imagem. Se você tiver 6 imagens em um site, sua página irá ficar enorme. Você diminui as requisições, mas aumenta o tempo de carga da página, consumo de banda e o over no browser, que precisará renderizar a imagem. Em um mundo Mobile, estes são custos altos.

99% dos browsers são pre-configurados para abrir, simultaneamente, 6 conexões por domínio. As boas práticas recomendam a separação dos conteúdos estáticos do conteúdo da página. Para isto, costuma-se separar em www.dominio.com.br e as imagens em img.dominio.com.br; Em casos extremos, com muitas imagens, recomenda-se até aumentar um pouco mais a separação, criando o estatico.dominio.com.br, e incluir os js, css e as imagens do template do site.

Para cada dominio/sub-dominio, o browser abrirá 6 conexões simultaneas, aumentando o conteúdo entregue e diminuindo o tempo de load da página.

Isto, junto com outras técnicas (HTTP Cache Headers, compressão das imagens, GZIP/DEFLATE, cache em memória – varnish), o tempo de carga de uma página é muito maior e o custo de entrega – banda – muito menor.

3) e o SEO, como fica?
Fica bem longe! Um aumento de tamanho faz com que a página carregue mais lentamente – Penalização do Google; Um site com imagens base64 não são indexados na busca por imagens – Penalização do Google.

4) E quando usar o base64?
Eu colocaria o base64 somente nos CSS do template do site. Este CSS pode ser cacheado no browser do usuário – desde que os HTTP Headers Expires, Last-Modified, Cache-Control e ETag estejam devidamente configurados e as imagens tenham sido tratadas para reduzir o tamanho! Não adianta nada imagens de 1Mb em Base64!

Por enquanto, é isto aí.