Como usar
- Cole a string Base64 ou o URI data:image/png;base64 completo.
- Confira a prévia. As áreas transparentes aparecem sobre um padrão quadriculado.
- Deixe Baixar como em PNG. Se os dados forem JPEG, WebP ou outro formato, eles são convertidos para PNG no seu navegador.
- Baixe o arquivo .png.
De onde vêm os PNGs em Base64
O PNG é o formato que você tem mais chance de encontrar em Base64. Chamar canvas.toDataURL() sem argumentos retorna um data URI PNG. Ferramentas de automação de navegador devolvem capturas de tela como PNG em Base64, por exemplo page.screenshot({ encoding: 'base64' }) no Puppeteer ou get_screenshot_as_base64() no Selenium. Renderizadores de gráficos, geradores de QR code e APIs de geração de imagens costumam retornar a imagem como um campo Base64 dentro de um JSON.
Uma string PNG é fácil de reconhecer: ela sempre começa com iVBORw0KGgo, a codificação da assinatura PNG de 8 bytes que começa com 89 50 4E 47. Em seguida vem AAAANSUhEUg, que é o início do chunk IHDR, onde ficam a largura e a altura.
Strings copiadas de um JSON precisam de uma verificação rápida antes. O json_encode do PHP, por exemplo, escapa as barras por padrão, então um PNG vindo de uma API em PHP pode chegar com sequências \/. Substitua-as por / e remova as aspas ao redor antes de colar.
Por que salvar em PNG
O PNG comprime sem perder nenhum detalhe e armazena um canal alfa completo, então sombras suaves e bordas suavizadas (antialiasing) ficam intactas. Isso faz dele a escolha natural para capturas de tela, elementos de interface, diagramas e qualquer coisa que contenha texto. Para fotografias, JPG ou WebP geram arquivos bem menores.
Converter um JPEG ou WebP para PNG mantém exatamente o que aparece na tela, mas não recupera detalhes que a compressão com perdas já removeu, e o PNG costuma ficar maior que o original.
Salvar um PNG em Base64 no código
# Python
import base64
with open('screenshot.png', 'wb') as f:
f.write(base64.b64decode(b64_string))
// Navegador: data URI para Blob, sem decodificação manual
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);Precisa do caminho inverso? PNG para Base64 codifica um arquivo em uma string ou data URI.
Perguntas frequentes
Como saber se uma string Base64 é um PNG?
iVBORw0KGgo. A ferramenta também lê os bytes da assinatura diretamente, então informa o formato real mesmo que o data URI diga outra coisa.Converter para PNG reduz a qualidade?
Não. O PNG é sem perdas, então os pixels são armazenados exatamente como o navegador os decodificou. A única perda seria uma que já tivesse acontecido no arquivo de origem.
A transparência é mantida?
Sim. A saída em PNG mantém o canal alfa completo. A saída em JPEG preenche as áreas transparentes com branco, e a saída em GIF torna cada pixel totalmente transparente ou totalmente opaco.
Meu data URI PNG mostra uma imagem quebrada. O que há de errado?
\/ antes de colar.