Converta imagens para Base64 - instantaneo, privado, pronto para copiar.

Base64 e uma codificacao de binario para texto que representa dados binarios usando 64 caracteres ASCII (A-Z, a-z, 0-9, +, /). Ela converte cada 3 bytes de dados binarios em 4 caracteres ASCII. Um icone de 3 KB se torna uma string de texto de 4 KB. A codificacao existe porque muitos sistemas - email (SMTP), APIs JSON, valores CSS url(), atributos HTML - aceitam apenas texto, nao binario puro. O Base64 faz essa ponte transformando qualquer arquivo em uma representacao de texto segura.

Use Base64 para imagens com menos de 10 KB - favicons, icones pequenos, logos simples, pixels de rastreamento 1x1 e pequenos elementos de interface. Nesse tamanho, o custo da requisicao HTTP (busca DNS, handshake TCP, negociacao TLS) e maior que o aumento de 33% no tamanho do Base64. Para imagens acima de 10 KB, arquivos externos sao melhores porque navegadores podem armazena-los em cache independentemente, carrega-los em paralelo e evitar inchar seu CSS ou HTML. Templates de email HTML sao a excecao - sempre use Base64 inline porque clientes de email bloqueiam carregamento de imagens externas por padrao.

O Base64 aumenta o tamanho do arquivo em exatamente 33% (proporcao 4/3) mais alguns bytes de padding. Um PNG de 9 KB se torna uma string Base64 de 12 KB. Um JPG de 30 KB se torna 40 KB de texto. Esse overhead se acumula quando a string Base64 fica dentro de um arquivo CSS ou HTML que tambem e comprimido com gzip para transferencia - o gzip recupera parte do excesso (tipicamente 10-15%), mas o tamanho decodificado no DOM do navegador ainda e 33% maior. Para um data URI, adicione mais 20-30 bytes para o prefixo data:image/png;base64,.

Um data URI inclui um cabecalho que diz ao navegador como interpretar os dados: data:image/png;base64,iVBORw0KGgo... O cabecalho especifica o tipo MIME (image/png) e a codificacao (base64). Base64 puro e apenas a string codificada sem o cabecalho: iVBORw0KGgo... Use data URIs em valores CSS background-image url() e atributos HTML src. Use Base64 puro ao enviar dados de imagem para APIs que esperam o payload sem o prefixo data URI, ou ao armazenar em bancos de dados onde o tipo MIME e rastreado separadamente.

Mantenha imagens Base64 com menos de 10 KB (tamanho original do arquivo) para incorporacao em CSS. O Google Lighthouse sinaliza CSS bloqueante de renderizacao, e uma imagem Base64 de 100 KB dentro da sua folha de estilos adiciona 133 KB de texto nao comprimido a cada carregamento de pagina. Para tags img inline em HTML, 20-30 KB e um limite superior razoavel - acima disso, o documento HTML fica pesado demais para um First Contentful Paint rapido. Templates de email podem ir mais alto (ate 100 KB por imagem) porque nao ha alternativa de arquivo externo, mas mantenha o tamanho total do email abaixo de 102 KB para evitar o corte do Gmail.

Todos os navegadores modernos suportam data URIs - Chrome, Firefox, Safari, Edge e todos os navegadores mobile de 2012 em diante. O Internet Explorer 8 adicionou suporte parcial com limite de 32 KB por data URI. O IE 9+ removeu esse limite. A unica restricao pratica hoje e que algumas configuracoes de Content Security Policy (CSP) bloqueiam URIs data: por padrao. Se seu site usa uma CSP restrita, adicione data: a diretiva img-src para permitir imagens Base64 inline.

Nenhuma imagem sai do seu dispositivo. A conversao usa a API FileReader do navegador para ler o arquivo localmente e gerar a string Base64 inteiramente em JavaScript. Abra as ferramentas de desenvolvedor do seu navegador (F12), va para a aba Network e converta uma imagem - voce vera zero requisicoes de saida. A ferramenta roda em HTML e JavaScript estaticos sem backend de servidor. Feche a aba e todos os dados sao limpos da memoria.

Sim, mas SVG ja e XML baseado em texto, entao codificar um SVG em Base64 geralmente e desnecessario. Um data URI de SVG puro (data:image/svg+xml,...) sem Base64 e tipicamente 20-30% menor porque voce evita o overhead de 33% da codificacao. Esta ferramenta fornece a versao Base64 para compatibilidade com sistemas que exigem Base64, mas para imagens de fundo CSS, considere usar o SVG puro em um url() com codificacao percentual. A versao Base64 funciona em todo lugar, enquanto a versao nao codificada falha em alguns clientes de email antigos.