Qual é o efeito de codificar uma imagem em base64?

94

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?

Danny Fox
fonte
1
A única vez que você gostaria de fazer algo assim é se estivesse restrito a recursos de texto simples e não pudesse usar um formato de imagem bruto por algum motivo.
Wug
Há uma boa resposta aqui: stackoverflow.com/questions/1533113/…
Steed
base64 torna os links diretos impossíveis. Isso pode ser uma vantagem.
damoeb
@Wug - Saiba que isso está longe de ser uma resposta tardia e que as coisas mudaram, mas definitivamente são momentos em que você pode obter aumentos de desempenho enviando bas64. Enviar mensagens por meio de websockets com imagens codificadas em base64 (pequenas) teria mais desempenho do que solicitar cada imagem individualmente.
Philip
É uma boa pergunta. Eu estava procurando uma boa resposta para "salvar imagens binárias ou codificado em base64?" e encontrei várias respostas boas como esta
moreirapontocom

Respostas:

129

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

Liquidificador
fonte
28
Não, não é 137% maior, 137% do tamanho original :-) 37% maior (de acordo com sua fonte).
Eric J.
4
Eu diria que é quase 4/3 do tamanho original.
kiwixz
Existe alguma limitação para o tamanho da imagem para converter a imagem em base64?
151291
2
@Blender Mas no meu caso, quando eu converto um bitmap de 70kb em string, ele se torna 500kb. Não é 37%. Eu compactei uma imagem de 5mb em 70kb e depois converti essa imagem compactada em string que se tornou 500kb.
KJEjava48
@ KJEjava48: Como você o está convertendo em uma string?
Blender
16

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.

buldogue
fonte
14

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.

Eric J.
fonte
7

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)

Oded
fonte
7

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.
Trendfischer
fonte
3

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.

Brad Larson
fonte
No entanto, isso não será um problema quando o HTTP 2 realmente funcionar.
Filipe
@Philip Isso é verdade, mas eu gosto do fator de portabilidade em ter todos os recursos contidos no arquivo HTML. Isso ajudará com o cache da web móvel em áreas com redes irregulares.
aalaap de
@aalaap O problema com isso é que, se você fizer uma alteração na página, precisará recarregar todo o conteúdo, incluindo imagens. Onde se você tiver os ativos separados você pode ter uma idade maior nesses e eles serão armazenados no cache e não recarregados no cache expirarão na própria página.
Philip,