DEVELOP.07 BASE64 IMAGE

Conversor de imagens Base64

Edite ou cole Base64 e veja a pré-visualização ao vivo; as imagens ficam no navegador.

SOURCE

Enviar imagem

Arraste uma imagem para cá

ou clique para JPG, PNG, GIF, WebP, SVG, BMP ou ICO

Máximo de 10 MB · o arquivo fica neste navegador

Escolha uma imagem para codificar e visualizar

BASE64

Código Base64

Aguardando imagem ou código Base64Processamento local com FileReader e Data URI · sem upload ou armazenamento

§ 01

Um fluxo previsível para codificar e decodificar

Adicione conteúdo

Cole ou edite uma Data URI ou Base64, ou arraste uma imagem para substituir o conteúdo atual.

Confira a prévia

O lado direito analisa o conteúdo, limpa espaços, corrige o preenchimento e detecta formatos comuns.

Copie ou baixe

Confira a prévia, as dimensões e o tamanho; depois copie o código ou baixe a imagem.

§ 02

Base64 muda a representação, não os pixels

Base64 mapeia grupos de 6 bits binários para caracteres imprimíveis, permitindo usar os dados em JSON, HTML ou CSS. É codificação, não compressão, e não reduz a qualidade.

O custo costuma ser cerca de um terço a mais de tamanho. Ícones pequenos podem ser embutidos; imagens grandes aumentam o documento e perdem cache independente.

§ 03

Entradas e usos nos dois sentidos

Direção

Entrada

Bom para

Imagem para Base64

JPG, PNG, GIF, WebP, SVG, BMP, ICO

Web, JSON de API, relatórios em um arquivo

Base64 para imagem

Data URI ou Base64 puro

Inspecionar API, restaurar recursos, conferir MIME

§ 04

Use Data URI para recursos pequenos e estáveis

Uma Data URI combina tipo MIME e dados Base64 em um endereço utilizável. A URI completa serve para atributos de imagem, Base64 puro para APIs com MIME separado e HTML ou CSS evita montagem manual.

Prefira embutir ícones de poucos KB. Imagens reutilizadas, grandes ou com cache independente normalmente devem usar uma URL comum.

§ 05

Converter imagem para Base64 no código

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

Perguntas frequentes

Q1Base64 puro pode ser visualizado sem prefixo Data URI?

Sim. O utilitário detecta assinaturas de PNG, JPEG, GIF, WebP e SVG e usa o MIME padrão quando não reconhece a assinatura.

Q2Por que Base64 aumenta o tamanho?

Quatro caracteres representam três bytes originais, então o corpo cresce cerca de um terço, além do pequeno prefixo da Data URI.

Q3A conversão reduz a qualidade?

Não. Os bytes originais são lidos e apenas a representação muda; não há redimensionamento nem compressão.

Q4As imagens são enviadas ou os códigos são salvos?

Não. Leitura, validação, prévia e download ocorrem na página atual sem upload ou armazenamento.

Q5Por que uma string Base64 não aparece?

Ela pode estar truncada, conter caracteres não aceitos, declarar um MIME diferente ou não representar uma imagem decodificável pelo navegador.