Como usar
- Solte um PNG na área de arrastar e soltar, clique para escolher um arquivo ou cole uma captura de tela da área de transferência.
- Deixe Converter para em Manter o original para codificar os bytes originais do PNG, ou defina uma Largura máxima para reduzir uma imagem grande.
- Compare o tamanho original com o tamanho codificado exibido para a imagem.
- Copie ou baixe a saída em data URI, Base64 puro, tag img, CSS ou Markdown.
PNG e Base64
O PNG (Portable Network Graphics, tipo MIME image/png) é um formato raster sem perdas com canal alfa completo, o que o torna a escolha habitual para ícones, logotipos, diagramas e capturas de tela. Todo arquivo PNG começa com a mesma assinatura de 8 bytes, então todo data URI de PNG começa do mesmo jeito: data:image/png;base64,iVBORw0KGgo....
O Base64 não mexe nos pixels. Decodificar a string devolve um arquivo idêntico byte a byte, com as mesmas cores e as mesmas áreas transparentes.
Bons usos para data URIs de PNG
- Pequenos ícones de interface e logotipos que precisam de fundo transparente.
- Capturas de tela dentro de relatórios HTML autossuficientes, relatórios de bugs ou documentação exportada.
- Gráficos e QR codes gerados em um servidor e devolvidos em uma resposta JSON.
- Imagens criadas com
canvas.toDataURL(), que por padrão já produz data URIs de PNG.
Com fotos, a história é outra. O PNG as armazena sem perdas e os arquivos ficam grandes; JPEG ou WebP geram uma string bem mais curta.
Reduza o PNG antes de codificar
Cada byte que você remove do PNG economiza cerca de 1,33 caractere de Base64. Antes de tudo, passe o arquivo por um otimizador como oxipng ou zopflipng (sem perdas) ou pngquant (reduz a paleta). Confira também o tamanho em pixels: um ícone exportado com o triplo do tamanho de exibição geralmente pode ser reduzido com a opção Largura máxima.
Converter para WebP mantém a transparência e costuma gerar um arquivo bem menor. Converter para JPEG remove a transparência, e as áreas transparentes viram uma cor sólida. Recodificar para PNG no navegador não otimiza a compressão, então o resultado pode ficar maior que um original bem otimizado; compare os tamanhos antes de copiar.
Como usar a saída
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Linha de comando: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngPerguntas frequentes
O Base64 mantém a transparência do PNG?
Sim. O Base64 codifica os bytes do arquivo sem alterá-los, então o canal alfa é preservado. A transparência só se perde se você converter a imagem para JPEG.
Por que toda string Base64 de PNG começa com iVBORw0KGgo?
Esses caracteres são a forma em Base64 da assinatura de arquivo do PNG. Se uma string que deveria ser um PNG começa de outro jeito, ela é de outro formato ou está corrompida.
Posso colar uma captura de tela diretamente?
data:image/png.Até que tamanho vale a pena incorporar um PNG em Base64?
Uma regra prática comum é de poucos kilobytes, até cerca de 10 KB. Imagens maiores ficam melhor como arquivos separados, que o navegador pode armazenar em cache e carregar em paralelo.