Converta imagens em Data URI Base64 e de volta, direto no navegador, com snippets prontos para HTML e CSS.
Codificar uma imagem em Base64 a transforma em texto que pode ser embutido diretamente em HTML, CSS ou JSON, eliminando uma requisição de rede. O mecanismo é simples: o Base64 pega o binário da imagem e o representa usando um alfabeto de 64 caracteres seguros (A–Z, a–z, 0–9, + e /), mapeando a cada 3 bytes um grupo de 4 caracteres. Como 4 caracteres ocupam mais espaço que 3 bytes, o texto resultante fica cerca de 33% maior que o arquivo original. Um Data URI ainda acrescenta um prefixo (data:image/png;base64,) que informa ao navegador o tipo de mídia. A codificação aqui usa o FileReader para ler o arquivo como Data URL no próprio navegador; a decodificação reconstrói os bytes e monta um Blob visualizável. Entender esse trade-off, sem requisição extra, mas com texto maior e sem cache separado, evita inflar suas páginas sem necessidade.
Toda imagem é uma sequência de bytes. O Base64 divide esses bytes em grupos de 3 (24 bits) e reescreve cada grupo como 4 caracteres de 6 bits, extraídos de um alfabeto de 64 símbolos imprimíveis. Quando o total de bytes não é múltiplo de 3, entram um ou dois sinais de igual (=) como preenchimento. Por isso a saída é sempre texto ASCII seguro, que atravessa HTML, CSS, JSON e e-mail sem corromper.
O Data URI é esse texto com um cabeçalho: data:[tipo];base64,[dados]. O tipo (por exemplo image/png ou image/svg+xml) diz ao navegador como interpretar os bytes. Como a imagem vira parte do próprio documento, ela carrega junto com o HTML/CSS, sem uma segunda ida ao servidor,, mas também não é cacheada como um arquivo independente.
Exemplo 1, codificar um ícone: um PNG de ~1 KB vira uma string Base64 de cerca de 1,37 KB, prefixada como data:image/png;base64,iVBORw0KGgo…. Copie o snippet de CSS background e cole em uma regra como background-image: url('data:image/png;base64,…') para exibir o ícone sem um arquivo separado.
Exemplo 2, decodificar: cole um Data URI completo (data:image/svg+xml;base64,PHN2Zy…) no modo Base64 → Imagem e a ferramenta reconstrói os bytes, mostra a pré-visualização e libera o download do arquivo. Se você colar só a parte após a vírgula, informe o tipo esperado para que a imagem seja remontada corretamente.
Embutir em Base64 compensa para ícones minúsculos, imagens críticas acima da dobra e e-mails HTML, onde eliminar uma requisição vale mais que os bytes extras. Para imagens grandes ou reutilizadas em várias páginas, arquivos separados são melhores: o navegador os armazena em cache uma vez e reaproveita, enquanto um Data URI é rebaixado a cada página que o repete.
Sobre privacidade: a leitura do arquivo (FileReader) e a decodificação acontecem 100% no navegador. Nenhum byte da imagem é transmitido, o que torna seguro converter capturas de tela, logos internos ou qualquer material sensível. Lembre também que colar um Data URI grande em um repositório aumenta o tamanho do código-fonte, use com parcimônia.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/imagem-base64"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Imagem para Base64"
></iframe>É uma forma de representar dados binários (como uma imagem) usando apenas caracteres de texto ASCII, no formato data:image/png;base64,XXXX. Isso permite embutir a imagem diretamente no código HTML ou CSS, sem um arquivo separado.
A codificação e a decodificação acontecem inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.