> PNG | encode | data-uri <

R: Ela converte o conteúdo binário de um arquivo .png em uma string ASCII usando o alfabeto Base64 definido na RFC 4648. O texto codificado pode ser inserido diretamente em uma tag HTML <img>, em uma background-image CSS, em uma mensagem de e-mail, em um payload de API JSON ou em qualquer outro transporte apenas de texto. Os bytes do PNG em si permanecem inalterados — cada chunk IHDR, IDAT, tRNS e IEND é codificado e pode ser recuperado exatamente.

R: Arraste seu PNG para a zona de soltura (ou clique para procurar). A ferramenta lê o arquivo com FileReader.readAsDataURL(), que já retorna um URI data:image/png;base64,… pronto para uso. Escolha Data URI se quiser colá-lo diretamente em <img src="…">, ou Apenas payload Base64 se sua API/banco de dados esperar apenas a parte Base64 bruta sem o prefixo data:image/png;base64,.

R: Não. O Base64 é uma transformação pura de binário para texto — cada byte do PNG original é preservado, incluindo o canal alfa, a paleta e o perfil de cor (chunks iCCP/sRGB). Quando você decodifica a string de volta, o arquivo é idêntico bit a bit ao original. Um hash SHA-256 do PNG decodificado corresponderá ao original. É por isso que o Base64 é a ferramenta correta para incorporar ícones, logotipos e capturas de tela onde a precisão dos pixels importa.

R: O Base64 usa 4 caracteres para cada 3 bytes de entrada, então a string codificada é ~33% maior que o arquivo PNG original. O tamanho exato é 4 × ⌈n / 3⌉ caracteres, onde n é o tamanho do PNG em bytes. Um PNG de 10 KB torna-se ~13,6 KB de texto Base64. Como a compressão HTTP (gzip, Brotli) lida razoavelmente bem com texto Base64, a sobrecarga na transmissão costuma ficar mais próxima de 10–15% na prática.

R: Toda string Base64 de um PNG começa com iVBORw0KGgo. Esse prefixo é a assinatura PNG de 8 bytes 89 50 4E 47 0D 0A 1A 0A recodificada para Base64. Portanto iVBORw0KGgoAAAANSUhEUg... é sempre um PNG, e ver esse prefixo é uma verificação visual rápida de que seus dados estão intactos. Quando envolvido como um data URI, fica assim:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

R: Cole o data URI completo no atributo src de uma tag <img>:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
O navegador decodifica o payload Base64 e renderiza o PNG exatamente como se tivesse sido carregado de uma URL. Nenhuma requisição HTTP adicional é feita, o que é útil para ícones de caminho crítico, assinaturas de e-mail e aplicativos offline-first.

R: Envolva o data URI na função url():
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Para reutilização, armazene-o em uma propriedade personalizada CSS:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
Fundos inline eliminam uma requisição HTTP por ícone, mas incham seu arquivo CSS, então use-os apenas para ícones pequenos (< 4 KB).

R:
JavaScript (navegador): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

R: Use data URIs de PNG Base64 quando:
• a imagem tem < 4 KB (para economizar uma ida e volta HTTP)
• você precisa incorporá-la em um e-mail HTML (muitos clientes bloqueiam imagens remotas)
• você está distribuindo um relatório ou painel HTML em arquivo único
• você está armazenando a imagem dentro de um payload JSON ou de uma coluna de banco de dados
Prefira um arquivo .png externo quando a imagem é grande, reutilizada em muitas páginas ou precisa de cache de CDN separado.

R: Sim. Como o Base64 é uma transformação bit a bit, todos os modos de cor PNG são suportados igualmente:
• RGBA / truecolor + alfa — cor de 32 bits, transparência total
• Paleta (PLTE) + tRNS — PNGs de paleta indexada com transparência de 1 bit
• Escala de cinza + alfa — escala de cinza de 8/16 bits com alfa
• PNGs deep color de 16 bits — PNGs no estilo HDR usados em imagem médica e visualização científica
Todos esses passam de forma limpa pelo round-trip do Base64 e são exibidos corretamente em navegadores que entendem PNG.

R: Não. O Base64 é uma codificação, não uma criptografia. Qualquer pessoa que possa ler a string pode decodificá-la de volta para o PNG original em milissegundos. Se uma captura de tela contém uma senha, um token de API ou informações pessoais, codificá-la como Base64 não a protege — use uma camada de criptografia real (AES-GCM, age, PGP) sobre a saída Base64, ou transporte a imagem por TLS para um servidor que aplique controles de acesso.

R: Não há limite artificial. Como a codificação é executada localmente, o limite é a memória do seu navegador — geralmente 100 MB+ no desktop e 40–60 MB no celular. Para PNGs muito grandes (imagens médicas ou de satélite de alta resolução), lemos o arquivo em blocos e chamamos btoa() em cada bloco para que a thread principal permaneça responsiva. Se sua imagem for maior que ~100 MB, considere transmiti-la diretamente de um codificador no lado do servidor em vez de carregá-la no navegador.

R: Use PNG → Base64 para logotipos, ícones de interface, capturas de tela, diagramas e qualquer coisa com transparência ou bordas nítidas (texto, gráficos). O PNG é sem perdas e reconhece alfa. Use JPG → Base64 para fotografias ou imagens com muitas cores onde a compressão com perdas é aceitável. Arquivos JPEG são tipicamente 5–20× menores que PNG para fotos, então o payload Base64 é muito mais curto. Como regra geral: se a imagem veio de uma câmera ou contém gradientes fotográficos, use JPG; caso contrário, PNG.