Embutir um ícone pequeno no CSS
Transforme um ícone de alguns KB em um trecho background-image e economize uma requisição HTTP.
Guide
Imagem para Base64 converte nos dois sentidos entre um arquivo de imagem e sua codificação em texto. Na codificação, ao escolher uma imagem você recebe quatro saídas de uma vez — a Data URL completa (data:image/png;base64,…, pronta para entrar em src ou url()), o Base64 puro sem prefixo, um trecho CSS background-image: url('…'); e um trecho HTML — cada uma com seu próprio botão de copiar, e o título do cartão mostra o tamanho codificado e o quanto ele cresceu. Na decodificação, cole uma Data URL ou um Base64 puro e a ferramenta fareja o cabeçalho para identificar PNG / JPEG / GIF / WebP / BMP / SVG, mostra a prévia e permite baixar. Tudo acontece localmente no navegador.
Atualizado em 2026-09-093 min read
Imagem para Base64 converte nos dois sentidos entre um arquivo de imagem e sua codificação em texto. Na codificação, ao escolher uma imagem você recebe quatro saídas de uma vez — a Data URL completa (data:image/png;base64,…, pronta para entrar em src ou url()), o Base64 puro sem prefixo, um trecho CSS background-image: url('…'); e um trecho HTML <img src=… alt=nome-do-arquivo /> — cada uma com seu próprio botão de copiar, e o título do cartão mostra o tamanho codificado e o quanto ele cresceu. Na decodificação, cole uma Data URL ou um Base64 puro e a ferramenta fareja o cabeçalho para identificar PNG / JPEG / GIF / WebP / BMP / SVG, mostra a prévia e permite baixar. Tudo acontece localmente no navegador.
A diferença para o “Codificar/decodificar Base64” genérico é que aqui o foco é imagem: a ferramenta acrescenta o prefixo MIME, gera CSS / HTML prontos para colar e transforma o texto de volta em uma imagem que você pode ver.
data:image/...;base64, ou um Base64 puro (espaços e quebras de linha são removidos) e clique em “Prévia da decodificação”.base64-imagem.png.O Base64 ocupa cerca de 1,33× o tamanho do arquivo original
Sem prefixo, o formato é lido no cabeçalho do arquivo
Ícone PNG de 12 KBData URL de cerca de 16 KB (+33%); trecho CSS `background-image: url('data:image/png;base64,iVBOR…');`Colar um Base64 puro que começa com `iVBORw0KGgo`Identificado como image/png, prévia exibida, download em `.png`Colar uma string cortada ao meio“Falha ao decodificar: não é um conteúdo Base64 válido, verifique se está completo”data:image/svg+xml;base64,…; a forma embutida com URL encoding não é geradaTransforme um ícone de alguns KB em um trecho background-image e economize uma requisição HTTP.
Converta a imagem de assinatura em um trecho <img> para um editor que só aceita HTML.
Cole o campo Base64 que a API retornou e veja que imagem é de fato.
Quando não há onde hospedar a imagem, escreva a Data URL direto no documento.
O Base64 representa 3 bytes com 4 caracteres, uma expansão fixa de cerca de 33%, e o prefixo data: ainda entra por cima; imagens grandes não são boas candidatas a embutir.
Sim — todos os espaços em branco são removidos antes da decodificação.
O navegador não exibe HEIC diretamente, então a ferramenta converte para JPEG (qualidade 0,92) antes de codificar; o MIME fica image/jpeg.
A codificação e a decodificação rodam dentro do seu navegador com FileReader e atob; nem a imagem nem o texto Base64 são enviados a servidor algum.
Atualizado em 2026-09-09
Imagem para Base64 (DataURL, CSS ou trecho HTML) e de Base64 para uma imagem com pré-visualização
Esta ferramenta ainda não está totalmente traduzida; parte do conteúdo usa o idioma de origem ou um idioma de reserva.