O que é Codificador de imagem para Base64?

O Codificador de Imagem para Base64 converte arquivos de imagem (PNG, JPEG, GIF, SVG, WebP) em strings de texto codificadas em Base64. Incorpore imagens diretamente em HTML, CSS ou JSON sem hospedar arquivos separados — menos requisições HTTP e marcação mais simples.

O codificador lê os bytes da imagem no seu dispositivo e produz oito saídas: Base64 puro, um data URI pronto para atributos src=, uma tag <img> completa, uma declaração CSS background-image, um link de favicon HTML, um envelope XML, um trecho de JavaScript com Image e um objeto JSON reunindo o nome do arquivo, o tipo MIME, o tamanho e o data URI. Ative Otimizar para redimensionar o lado mais longo e recodificar primeiro como JPEG ou WebP, o que pode reduzir a string pela metade antes de embuti-la. Solte ou cole várias imagens de uma vez e cada uma ganha sua própria saída identificada. Precisa do caminho inverso? A seção Decodificar Base64 de volta para imagem transforma qualquer string em uma imagem visível e baixável. Formatos suportados: PNG, JPEG, GIF, SVG, WebP, BMP, ICO, AVIF e HEIC até 20 MB cada.

Como usar

  1. Passo 1 — Envie uma imagem arrastando, clicando na área de upload ou colando com Ctrl+V. Para encolher antes, abra Opções de codificação e defina uma dimensão máxima ou a qualidade.
  2. Passo 2 — Escolha um formato de saída: Base64 puro, data URI, tag img HTML, background-image CSS, link de favicon HTML, XML, um trecho de JavaScript com Image ou um objeto JSON para cargas de API.
  3. Passo 3 — Copie o resultado para a área de transferência ou baixe como arquivo de texto.

Quando usar

  • Embutir logos ou ícones pequenos em e-mail HTML para que apareçam sem hospedagem externa.
  • Inserir sprites SVG pequenos dentro de uma folha de estilo, eliminando uma requisição HTTP bloqueante.
  • Levar uma imagem dentro de payload JSON, claim de JWT ou config YAML quando URLs não são permitidas.

Resultado

Você tem um ícone de logotipo de 2 KB que deseja incorporar diretamente em um template de e-mail. Faça o upload do arquivo PNG, copie a saída do URI de dados e cole no atributo src da tag img HTML — sem necessidade de hospedagem externa.

Perguntas frequentes

Codificar em Base64 aumenta o tamanho do arquivo?
Sim, em cerca de 33%. Base64 representa três bytes binários com quatro caracteres ASCII, então um PNG de 30 KB vira mais ou menos 40 KB de texto. Compensa só para arquivos abaixo de 5 KB, onde economizar uma requisição HTTP vale os bytes extras.
Quando inlinar a imagem em Base64 e quando deixar como link?
Inline qualquer coisa abaixo de 4 a 5 KB que apareça acima da dobra e seja difícil de cachear (avatares por usuário, ícones de uso único). Deixe como link tudo que se repete em várias páginas — assim o cache do navegador serve da segunda vez em diante.
Por que meu data URI começa com data:image/png;base64,?
Esse prefixo é o tipo MIME. data:image/png avisa o navegador que os bytes seguintes são PNG, base64 indica a codificação, e a vírgula separa o cabeçalho do conteúdo. Sem isso, o decodificador não consegue saber o formato.
Dá para decodificar o Base64 de volta numa imagem visível?
Dá. Abra a seção «Decodificar Base64 de volta em imagem» nesta página, cole sua data URI ou o Base64 puro, e a imagem aparece para você visualizar e baixar. Base64 seguro para URL (a variante com - e _) também funciona.
Vale a pena codificar SVG em Base64?
Geralmente não. SVG já é texto, então usar URL-encoding dentro do data URI fica menor que Base64. A ferramenta aceita SVG mesmo assim, para os casos em que você precisa de uma string única e transportável.

Ferramentas relacionadas