Converter imagem em Base64
Imagem para Base64 transforma uma imagem em um bloco de texto que você pode colar direto no seu código. Esse texto é um data URI, válido em CSS, HTML, JSON e Markdown, e carrega a imagem inteira — então a página não precisa de um arquivo separado nem faz uma requisição extra por ele. O texto fica cerca de 33% maior que o arquivo, e a página mostra isso, porque esse custo é exatamente o motivo para pensar antes de embutir.
Solte uma imagem aqui
ou em qualquer lugar da página · Escolher um arquivo · 100 MB
Aceitos: JPG, JPEG, PNG, WebP, AVIF, GIF, SVG, ICO
Solte um PNG, JPG, SVG ou ícone para obter uma URI de dados e trechos de código prontos.
Como funciona o Converter imagem em Base64?
Um data URI é um arquivo embutido no lugar que o referencia. Em vez de src="logo.png" apontar para algo que o navegador precisa buscar, os bytes da imagem são escritos no próprio atributo. Nenhuma requisição, nenhum segundo arquivo, nada que possa dar 404.
Por que base64 em vez dos bytes crus
Porque os lugares onde essas strings vão — um arquivo CSS, um atributo HTML, um valor JSON — são texto, e um PNG não é. Os bytes dele incluem aspas, quebras de linha, bytes nulos e todo o resto que encerraria uma string ou corromperia um documento. Base64, definido no RFC 4648, mapeia cada três bytes em quatro caracteres tirados de um alfabeto de 64 símbolos seguro em qualquer lugar, completando com = quando a entrada não divide igual.
Quatro caracteres para cada três bytes é de onde vêm os 33%. Não é um overhead que um codificador melhor poderia remover; é aritmética.
Quando embutir compensa
Para recursos pequenos usados imediatamente: um ícone em uma regra CSS, um espaçador de 1 × 1, um logo em um e-mail HTML em que imagens externas são bloqueadas por padrão, um placeholder que precisa renderizar antes de qualquer outra coisa carregar. Em todos esses casos, a requisição que você economiza custa mais que os 33% que você gasta — uma requisição carrega DNS, estabelecimento de conexão e latência de ida e volta, e em uma conexão móvel isso é dezenas de milissegundos para um arquivo que teria sido transferido em um único pacote.
Quando é um erro
Para qualquer coisa grande ou reutilizada. Um data URI não pode ser armazenado em cache de forma independente: embuta uma imagem hero de 200 KB na sua folha de estilo e cada visitante baixa tudo de novo a cada mudança em qualquer regra desse arquivo. Ele também não pode ser buscado em paralelo — faz parte do documento, então é baixado antes de o documento terminar, bloqueando a renderização que deveria acelerar. E não pode ter carregamento tardio, ser redimensionado por um CDN nem ser servido como WebP para navegadores que suportam.
A linha divisória aproximada é de uns poucos quilobytes. Abaixo disso, embutir geralmente compensa; acima de cerca de 10 KB, geralmente não compensa, e esta página avisa quando você cruza o limite.
Content Security Policy
Um CSP rigoroso bloqueia data URIs a menos que você os permita. Imagens precisam de img-src 'self' data: ; uma fonte embutida do mesmo jeito precisa que o font-src também permita data:. Vale saber disso antes de embutir algo e descobrir que ele desaparece só na produção, onde o CSP é aplicado.
Base64 não é criptografia
Vale dizer com clareza, porque a confusão é comum: base64 é uma codificação, reversível por qualquer pessoa, sem chave alguma envolvida. Qualquer coisa embutida assim é tão legível quanto era antes. Não esconde nada.
Onde isto roda
No seu navegador. O arquivo é lido com um FileReader e codificado localmente — nada é enviado, o que, para uma imagem que você está prestes a embutir no seu próprio código-fonte, é o único arranjo que faz sentido.
Entrada
icon.png — 1.2 KB image/png
Saída
data:image/png;base64,iVBORw0KGgo… 1.6 KB (+33%) no HTTP request
Quais opções e casos-limite o Converter imagem em Base64 suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| URI de dados | data:… | padrão | A URI simples. Cole em qualquer lugar que uma URL seja esperada. |
| CSS | background-image | — | Uma regra pronta para ser adicionada a uma folha de estilo. |
| HTML | <img> | — | Um elemento img com o atributo alt deixado para você preencher. |
| JSON | string | — | Entre aspas corretamente, para uma payload de API ou um arquivo de fixture. |
| Markdown | ![]() | — | Sintaxe de imagem, para um README que deve ser autocontido. |
| Apenas Base64 | sem prefixo | — | Apenas os bytes codificados, para um campo que adiciona seu próprio tipo MIME. |
| Custo de tamanho | +33% | — | Quatro caracteres de saída para cada três bytes de entrada. Aritmética, não sobrecarga. |
| CSP | img-src data: | — | Uma política restrita bloqueia URIs de dados até que isso seja permitido. |
Perguntas frequentes
Por que o base64 é maior que a imagem?
Porque o base64 representa três bytes com quatro caracteres, o que é um aumento de 33% por construção. O alfabeto tem 64 símbolos, então cada caractere carrega seis bits; três bytes são vinte e quatro bits, que são exatamente quatro caracteres. Nenhum codificador consegue fazer melhor permanecendo dentro de um alfabeto seguro para texto. Se o tamanho importa, comprima a imagem antes de codificá-la — é aí que estão as economias.
Devo embutir imagens como data URIs?
Pequenas, sim: ícones, espaçadores, um logo em um e-mail HTML, qualquer coisa abaixo de poucos quilobytes que seja necessária imediatamente. A requisição economizada geralmente custa mais que os 33% que você gasta. Grandes, não: um data URI não pode ser cacheado separadamente, não pode ser baixado em paralelo e bloqueia o documento ou a folha de estilo em que está — então uma imagem hero de 200 KB embutida é baixada de novo a cada mudança no arquivo que a contém, e atrasa a renderização que deveria acelerar.
A criptografia base64 protege a imagem?
Base64 não é criptografia. É uma codificação de texto reversível e sem chave, feita para mover dados binários por canais que só aceitam texto. Qualquer pessoa pode decodificá-lo em um console do navegador em uma linha. Ele não oferece confidencialidade alguma, e tratá-lo como se oferecesse é uma fonte recorrente de incidentes de segurança reais.
Por que meu data URI é bloqueado pela Content Security Policy?
Porque um CSP rigoroso trata data: como uma fonte que precisa ser permitida explicitamente. Para imagens, você precisa que img-src inclua data:; para uma fonte embutida, o font-src também precisa. A falha é fácil de passar despercebida no desenvolvimento, onde o CSP frequentemente não é aplicado, e aparece só na produção — então verifique a política antes de decidir embutir.
Dá para decodificar um data URI de volta para um arquivo?
Dá. Tudo depois da vírgula é base64; decodifique e você tem os bytes originais, byte a byte — a codificação é sem perdas nos dois sentidos. A ferramenta Base64 Encode / Decode deste site cuida da parte de texto disso, e qualquer navegador renderiza um data URI colado direto na barra de endereço.
A imagem é enviada para codificar?
Não. O arquivo é lido pelo FileReader do seu navegador e codificado nesta aba; nada é transmitido. Isso importa aqui de um jeito pequeno e fácil de ignorar — as imagens que as pessoas codificam em base64 geralmente são recursos de um projeto em andamento, e não há motivo para elas viajarem para qualquer lugar.