Converter imagem para Base64

Transforme uma imagem em um data URI Base64 para CSS, HTML ou JSON, ou cole uma string Base64 e receba o arquivo de imagem de volta.

Solte seus arquivos aqui

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · até 10 MB

Escolher arquivos

Imagem para Base64Base64 para imagem

Mais configurações

SaídaQuebrar linha a cada 76 caracteres

Como converter uma imagem para Base64

1
Solte sua imagem ou cole uma string Base64
Adicione até vinte imagens para codificar, ou mude a direção e cole uma string que você já tem. Um arquivo .txt com a string também funciona.
2
Escolha a direção
A codificação gera um data URI ou só o Base64 puro. A decodificação gera um arquivo de imagem para baixar, com a extensão certa.
3
Copie a string ou baixe o arquivo
Copie o resultado direto para a sua folha de estilos ou salve a imagem decodificada. Um lote de imagens volta como ZIP, com um arquivo de texto para cada imagem e mais um JSON com tudo junto.

O que o Base64 faz de verdade

O Base64 não comprime nem converte nada. Ele reescreve os mesmos bytes usando só 64 caracteres, que sobrevivem a ser colados em um texto. Três bytes viram quatro caracteres, e é por isso que o resultado sempre fica cerca de um terço maior que o arquivo. O objetivo não é o tamanho, e sim o lugar: um data URI pode ficar direto dentro de uma folha de estilos, de um atributo HTML ou de um campo JSON, onde um link para um arquivo separado seria complicado ou impossível.

Data URI ou Base64 puro

O data URI é a string completa que começa com data:image/png;base64, e é o que o navegador espera em um fundo de CSS ou no src de um img. O Base64 puro é tudo o que vem depois dessa vírgula, e é o que um campo de API ou uma coluna de banco de dados normalmente pede, porque ali o tipo é registrado à parte. Os dois saem dos mesmos bytes, então você pode alternar entre eles sem codificar nada de novo.

O tipo vem dos bytes

O tipo MIME gravado no data URI é lido nos primeiros doze bytes do arquivo, e não no nome dele; assim, um PNG que alguém renomeou para .jpg continua saindo como data:image/png. Isso importa porque o navegador se recusa a exibir um data URI cujo tipo declarado não bate com o conteúdo, e, quando isso acontece, quem parece quebrada é a página, e não o arquivo. O SVG é a exceção, por ser texto: ele é reconhecido pela tag de abertura, e não por uma assinatura binária.

Decodificar de volta para um arquivo

Cole o que tiver: um data URI completo, só o Base64 puro ou uma string com quebras de linha. Os espaços em branco são removidos, o alfabeto é verificado antes da decodificação, para que um texto colado pela metade falhe imediatamente em vez de gerar um arquivo corrompido, e os bytes resultantes são comparados com a mesma tabela de assinaturas para escolher a extensão. Se os bytes não baterem com nenhum formato conhecido, a lista de formatos se abre para você dizer qual deve ser.

Nada é enviado para lugar nenhum

A codificação usa o FileReader do próprio navegador, e a decodificação usa o atob embutido nele. Não há biblioteca, nem upload, nem servidor. Tudo o que você cola na caixa fica na aba, o que faz diferença quando a string é um documento particular, e não um logo.

Perguntas frequentes

Por que converter uma imagem para Base64?

Para incorporar a imagem direto, em vez de apontar para ela com um link. Um ícone pequeno embutido no CSS economiza uma requisição HTTP, uma imagem dentro de um JSON pode passar por uma API que só transporta texto, e um modelo de e-mail pode levar as próprias imagens sem que referências externas sejam bloqueadas.

Quanto o arquivo fica maior em Base64?

Cerca de 33% a 37%. O Base64 gasta quatro caracteres para cada três bytes, mais um prefixo curto do data URI. Uma foto de 100 KB vira uma string de mais ou menos 133 KB, e é por isso que embutir vale a pena para ícones e raramente para fotos.

Qual é a diferença entre data URI e Base64 puro?

O data URI é o conjunto completo, data:image/png;base64, seguido do conteúdo codificado, e os navegadores podem usá-lo direto como origem de uma imagem. O Base64 puro é só o conteúdo codificado, sem nenhuma informação de tipo, que é o que a maioria das APIs e dos campos de banco de dados espera.

Existe limite de tamanho para essas strings nos navegadores?

Os navegadores modernos lidam com data URIs de vários megabytes em CSS e HTML, mas editores, terminais e ferramentas de diff ficam impraticáveis muito antes disso. Esta ferramenta aceita arquivos de até 10 MB, que geram uma string de cerca de 13,3 MB, e decodifica strings com até 14 MB de conteúdo.

Como decodificar uma string sem o prefixo data:?

Cole a string e deixe o tipo de imagem no automático. Os bytes decodificados são comparados com a mesma tabela de assinaturas usada na codificação, então um PNG é reconhecido pelo cabeçalho 89 50 4E 47, com ou sem prefixo. Se a detecção falhar, escolha você mesmo o tipo na lista.

É seguro colar aqui o Base64 de outra pessoa?

A string é decodificada em bytes e aparece como prévia de imagem dentro da sua própria aba. Ela nunca é enviada, nunca é executada e nunca fica guardada. Decodificar é só aritmética, mas lembre-se de que os bytes obtidos são tão confiáveis quanto a origem deles; por isso, trate um resultado inesperado com o mesmo cuidado que teria com qualquer arquivo baixado.

Por que a decodificação às vezes falha?

Quase sempre porque a string está incompleta. Um texto colado pela metade, uma linha perdida ao copiar de um terminal ou uma variante segura para URL, que usa hífen e sublinhado no lugar de mais e barra, não passam na verificação do alfabeto. Copiar a string de novo da fonte original costuma resolver.