PNG para Base64

Como converter um PNG para Base64

1. Arraste um arquivo .png para a caixa ou escolha-o no seletor de arquivos. Para codificar uma captura de tela, copie-a e pressione Ctrl+V (Cmd+V no Mac) nesta página; não precisa salvar antes.
2. Se o PNG for maior que o necessário, defina Largura máx. ou escolha WebP em Converter para. Remover metadados (EXIF) descarta chunks de texto e EXIF.
3. Deixe Saída como em Data URI, ou troque para CSS, <img>, Markdown, JSON ou Base64 puro.
4. Clique em Copiar saída. A prévia mostra o tamanho em pixels e, depois da recodificação, o novo tamanho do arquivo.

Como é um PNG em Base64

Todo PNG começa com os mesmos 16 bytes: a assinatura de 8 bytes e o cabeçalho do chunk IHDR, que precisa vir primeiro. Em Base64, isso gera uma abertura fixa de 22 caracteres:

iVBORw0KGgoAAAANSUhEUg

Então qualquer string que começa com iVBORw0KGgo é um PNG, seja numa resposta JSON, num arquivo de log ou numa coluna de banco de dados. A largura e a altura vêm logo depois, empacotadas nos caracteres seguintes.

Para referência, este é um PNG completo de 1×1 totalmente transparente. O arquivo tem 70 bytes e o Base64, 96 caracteres:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

Colar tem um porém. Navegadores e visualizadores de imagens normalmente põem a imagem copiada na área de transferência como PNG, qualquer que seja o formato original, então uma foto JPEG colada chega como um PNG que pode ficar bem maior que o arquivo em disco. Arraste o arquivo original quando o formato de origem importar.

Se o PNG codificado começar com qualquer outra coisa, o arquivo não era PNG. Um arquivo .png que na verdade é JPEG começa com /9j/, e um WebP renomeado para .png começa com UklGR. O MIME type na prévia mostra o que o navegador detectou.

PNG, JPEG ou WebP antes de codificar

O PNG não tem perdas, então é a escolha certa para logos, ícones, gráficos de interface e capturas de tela com texto. Para fotos é a errada: um PNG fotográfico muitas vezes fica várias vezes maior que um bom JPEG ou WebP da mesma imagem. Como o Base64 infla o que recebe em cerca de 33%, o formato escolhido decide a maior parte do tamanho final.

O conversor recodifica pelo canvas do navegador. Isso tem três consequências:

• Converter para JPEG perde a transparência. Os pixels transparentes ficam brancos.
• O Safari não tem codificador WebP. Peça WebP nele e você recebe PNG, com um aviso.
• O codificador do canvas não otimiza PNGs. Recodificar um PNG que já foi compactado por um otimizador dedicado pode deixá-lo maior. Compare os tamanhos na prévia e fique com o original se ele ganhar.

Remover metadados (EXIF) também tira dados auxiliares como EXIF e chunks de texto no caminho. A maioria dos PNGs tem pouco disso, mas capturas de tela e exportações de alguns apps incluem nomes de software ou timestamps.

Onde aparecem PNGs em Base64

• Ícones em CSS: background-image: url("data:image/png;base64,...") para ícones pequenos que não deveriam custar uma requisição extra. Para ícones vetoriais, um SVG costuma ser menor; veja SVG para Base64.
• Saída de canvas: canvas.toDataURL() devolve um data URI PNG por padrão, e é por isso que campos de assinatura, gráficos e editores de imagem geram esse formato com tanta frequência. O Base64 para PNG o transforma de volta em arquivo.
• Payloads de API: serviços de captura de tela, test runners e APIs de IA com visão trocam PNGs em Base64 dentro de JSON. Veja se a API quer o prefixo data:image/png;base64, ou Base64 puro, e escolha Data URI ou Base64 puro de acordo.
• Snapshots de teste e relatórios de bug: testes visuais e ferramentas de relatório de falhas costumam colocar capturas de tela nos relatórios JSON ou HTML como PNG em Base64, e o relatório continua sendo um arquivo só.
• Favicons e páginas de arquivo único: um favicon PNG pequeno embutido em <link rel="icon"> mantém o HTML autossuficiente. A página de favicon cobre os detalhes.

Codificar um PNG no código

O Node.js lê o arquivo num Buffer e o codifica numa chamada:

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

No navegador, um canvas entrega o data URI PNG direto:

const uri = canvas.toDataURL("image/png");

Veja Base64 em Node.js para streaming e saída URL-safe, e Base64 em JavaScript para arquivos e Blobs no navegador.

Corrigir um data URI PNG que não aparece

• O prefixo está errado. Ele precisa ser data:image/png;base64,, com a vírgula. Sem o ;base64, o navegador lê os caracteres como texto bruto.
• URL-safe está marcado. Os navegadores só decodificam o alfabeto padrão em URLs data:. Um PNG em Base64 com - e _ aparece como imagem quebrada.
• Quebras de linha no CSS. Quebrar em 76 é para e-mail. Numa folha de estilos, uma quebra de linha dentro de url("...") invalida a declaração.
• A string foi cortada. Um PNG termina com um chunk IEND fixo de 12 bytes, então o Base64 dele termina em AAAAAElFTkSuQmCC, AABJRU5ErkJggg== ou AAAASUVORK5CYII=, conforme o resto da divisão do tamanho do arquivo por 3. Se o final parecer diferente e a imagem aparecer pela metade ou não aparecer, a cópia foi truncada. Valide a string para conferir o tamanho e o preenchimento.

Perguntas frequentes