Imagem para Base64

1. 01Escolha uma imagemArraste o arquivo para a área indicada, ou clique para escolher no seu dispositivo.
2. 02Copie o formato que você precisaO Data URI puro, o trecho de HTML com a tag de imagem pronta ou o trecho de CSS para usar como fundo.
3. 03Olhe o tamanho do textoO Base64 fica cerca de um terço maior que o arquivo original. É esse número que diz se embutir compensa.

• Ícone pequeno dentro do CSSUm ícone de poucos kB embutido no CSS economiza uma requisição e aparece junto com o resto do estilo, sem piscar.
• Imagem em e-mail HTMLAlguns clientes de e-mail bloqueiam imagem externa por padrão. Embutir evita o espaço em branco, mas confira o suporte antes de um disparo grande.
• Protótipo ou arquivo únicoUma página de demonstração que precisa funcionar sem pasta de imagens ao lado fica autocontida com Base64.

• Data URIA saída começa com data:image/png;base64, seguida do conteúdo codificado. Ela vai direto no atributo src.
• Trecho de HTMLUma tag de imagem já montada com o Data URI dentro, pronta para colar no arquivo.
• Trecho de CSSUma regra de background-image com o Data URI, para usar o arquivo como fundo de um elemento.

• Só vale a pena em arquivo pequenoPara imagem grande, embutir aumenta o peso da página e atrasa a renderização, porque o texto entra no HTML ou no CSS em vez de carregar em paralelo.
• Base64 não é compressãoEle só reescreve os mesmos bytes em texto, e o resultado é cerca de 33% maior. Comprima a imagem antes, se for o caso.

A troca é simples: embutir remove uma requisição de rede, mas aumenta o tamanho do arquivo que carrega a imagem. Para ícone e imagem muito pequena, de poucos kB, a conta costuma fechar a favor. Para foto e imagem grande, ela fecha contra: o Base64 fica cerca de um terço maior que o arquivo original, esse peso entra no HTML ou no CSS, e nada disso pode ser carregado em paralelo nem guardado em cache separadamente como um arquivo de imagem normal seria.

O Base64 representa cada três bytes do arquivo usando quatro caracteres de texto, o que dá um aumento de cerca de 33% por definição. Ele não é um formato de compressão: os pixels continuam exatamente os mesmos, apenas escritos de um jeito que sobrevive dentro de um arquivo de texto. Se o objetivo é reduzir peso, o caminho é comprimir ou redimensionar a imagem antes de codificar.

A imagem é lida e codificada só no seu navegador. Nenhum arquivo é enviado para um servidor e nada fica armazenado do nosso lado.

O que é um Data URI?

É uma forma de colocar o conteúdo do arquivo dentro do próprio endereço, no lugar de um caminho para um arquivo externo. Ele começa com data: seguido do tipo e do conteúdo em Base64.

Por que o resultado é maior que a imagem?

Porque o Base64 usa quatro caracteres para cada três bytes, o que aumenta o tamanho em cerca de 33%. Ele não comprime nada, só reescreve os mesmos dados como texto.

Vale a pena embutir qualquer imagem?

Não. Compensa em ícone e imagem de poucos kB. Em imagem grande, embutir deixa a página mais pesada e impede que o arquivo seja guardado em cache separadamente.

Funciona em e-mail?

Depende do cliente de e-mail. Alguns mostram normalmente e outros bloqueiam. Teste no cliente específico antes de um disparo grande.

A imagem é enviada para um servidor?

Não. A leitura e a codificação acontecem no seu navegador, e o arquivo não é enviado pela internet nem fica armazenado do nosso lado.

A ferramenta é gratuita?

É. Totalmente gratuita, sem cadastro e sem limite ligado a plano pago.