Qual é o efeito de codificar uma imagem em base64?

Se eu converter uma imagem (jpg ou png) para base64, ela ficará maior ou terá o mesmo tamanho? Quanto maior será?

É recomendado usar imagens codificadas em base64 no meu site?

Será aproximadamente 37% maior:

Grosso modo, o tamanho final dos dados binários codificados em Base64 é igual a 1,37 vezes o tamanho dos dados originais

Fonte: http://en.wikipedia.org/wiki/Base64

Aqui está uma visão geral realmente útil de quando codificar em base64 e quando não por David Calhoun.

Resposta básica = arquivos gzipados com codificação base64 serão aproximadamente comparáveis ​​em tamanho ao binário padrão (jpg / png). Os arquivos binários Gzip terão um tamanho de arquivo menor.

Takeaway = Há alguma vantagem em codificar e compactar os ícones da IU, etc, mas não é aconselhável fazer isso para imagens maiores.

Será maior em base64.

Base64 usa 6 bits por byte para codificar dados, enquanto binário usa 8 bits por byte. Além disso, há uma pequena sobrecarga de preenchimento com Base64. Nem todos os bits são usados ​​com Base64 porque ele foi desenvolvido em primeiro lugar para codificar dados binários em sistemas que podem processar corretamente apenas dados não binários.

Isso significa que a imagem codificada será cerca de 25% maior, além da sobrecarga constante para o preenchimento.

Codificar uma imagem em base64 a tornará 30% maior.

Veja os detalhes no artigo da Wikipedia sobre o esquema de URI de dados , onde afirma:

URIs de dados codificados em Base64 são 1/3 maiores em tamanho do que seu equivalente binário. (No entanto, essa sobrecarga é reduzida para 2-3% se o servidor HTTP compactar a resposta usando gzip)

A resposta é: depende.

Embora as imagens base64 sejam maiores, existem algumas condições em que base64 é a melhor escolha.

Tamanho das imagens base64

Base64 usa 64 caracteres diferentes e isso é 2 ^ 6. Portanto, a base64 armazena 6 bits por caractere de 8 bits. Portanto, a proporção é 6/8 de dados não convertidos para dados de base64. Este não é um cálculo exato, mas uma estimativa aproximada.

Exemplo:

Uma imagem de 48 kb precisa de cerca de 64 kb como imagem convertida em base64.

Cálculo: (48/6) * 8 = 64

Calculadora CLI simples em sistemas Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Ou usando uma imagem:

$ cat my.png|base64|wc -c

Imagens e sites em Base64

Esta pergunta é muito mais difícil de responder. De um modo geral, quanto maior a imagem, menos sentido usando base64. Mas considere os seguintes pontos:

• Muitas imagens incorporadas em um arquivo HTML ou arquivo CSS podem ter strings semelhantes. Para PNGs, você costuma encontrar caracteres "A" repetidos. Usando o gzip (às vezes chamado de "deflate"), pode haver até uma vitória no tamanho. Mas isso depende do conteúdo da imagem.
• Sobrecarga de solicitação de HTTP1.1: especialmente com muitos cookies, você pode facilmente ter uma sobrecarga de alguns kilobytes por solicitação. A incorporação de imagens base64 pode economizar largura de banda.
• Não codifique imagens SVG em base64, porque gzip é mais eficaz em XML do que em base64.
• Programação: em imagens geradas dinamicamente, é mais fácil entregá-las em uma solicitação do que coordenar duas solicitações dependentes.
• Links diretos: se você quiser evitar o download da imagem, é um pouco mais complicado extrair uma imagem de uma página HTML.

Definitivamente, custará mais espaço e largura de banda se você quiser usar imagens codificadas em base64. No entanto, se o seu site tiver muitas imagens pequenas, você pode diminuir o tempo de carregamento da página codificando suas imagens em base64 e colocando-as em html. Desta forma, o navegador cliente não precisará fazer muitas conexões com as imagens, mas as terá em html.