Conversor de imagem para Base64 (e de Base64 para imagem)

O que é um conversor de imagem para Base64?

Base64 é uma forma de codificar dados binários usando apenas 64 caracteres de texto seguros (A–Z, a–z, 0–9, + e /). Converter uma imagem para Base64 permite que você a incorpore diretamente em HTML, CSS, JSON ou em um modelo de e-mail como um URI de dados, em vez de criar um link para um arquivo separado:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

A parte antes da vírgula declara o tipo MIME; o resto é o arquivo codificado. Os navegadores tratam isso exatamente como uma URL de imagem, então funciona em <img src>, CSS background-image, <link rel="icon"> e em código de canvas.

O aumento de tamanho de 33%

O Base64 armazena cada 3 bytes do arquivo como 4 caracteres, então a string codificada fica cerca de 33% maior que o original (mais o prefixo curto data: ). O Gzip ou o Brotli no seu servidor recuperam parte disso, mas os maiores custos são estruturais: uma imagem incorporada é baixada de novo a cada arquivo HTML ou CSS que a contém, não pode ser armazenada em cache sozinha e deixa sua folha de estilo — que bloqueia a renderização — mais pesada.

Quando incorporar imagens (e quando não fazer isso)

• Ideal: ícones pequenos, indicadores de carregamento e sprites de interface com menos de alguns KB, imagens em assinaturas de e-mail em HTML onde imagens externas são bloqueadas, relatórios HTML em um único arquivo e fixtures de teste no código.
• Não é uma boa ideia: fotos, imagens de destaque e qualquer coisa acima de cerca de 10–20 KB. Sirva esses arquivos normalmente, com cache, compactação e loading="lazy". Reduza-as primeiro com o Image Compressor.

SVG: a codificação de URL é melhor que Base64

O SVG já é texto, então você nem precisa do Base64. Um URI de dados codificado por URL, como data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… escapa apenas alguns caracteres (<, >, #, %) e costuma ser 20–30% mais curto que a versão em Base64 — além de continuar legível e ser melhor compactado com gzip. Essa ferramenta oferece as duas opções para arquivos SVG. Se você trabalha bastante com SVG no CSS, a ferramenta SVG para CSS também ajuda.

Decodificando Base64 de volta para uma imagem

Cole um URI de dados completo ou uma string Base64 pura (base64url com - e _ também funciona). A ferramenta detecta o formato real a partir dos bytes mágicos do arquivo — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO ou BMP — mostra uma pré-visualização com as dimensões e permite que você baixe o arquivo com a extensão correta. Para Base64 que não seja uma imagem, use o Codificador/Decodificador Base64 geral.

Também pesquisado como: imagem em base64, uri de dados, de base64 para imagem, png para base64, svg para uri de dados, img src base64, fundo em css com base64, imagem do decodificador base64.

Ferramentas que combinam com: Imagem para Base64

• Gerador de favicons — Crie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico com vários tamanhos, o ícone de toque da Apple, ícones para Android/PWA, um webclip do Webflow, o manifesto da web e as tags HTML para colar.
• URL Encode / Decode — Percent-encode text for safe use in URLs, decode encoded strings back to readable text, and break any URL down into its parts and query parameters.
• Gerador de códigos de barras — Crie códigos de barras que podem ser lidos por leitores ópticos para produtos, estoque, remessas e bibliotecas — os dígitos de verificação são calculados automaticamente, e você pode baixar um arquivo SVG de alta qualidade para impressão ou um PNG para documentos.
• Leitor de código QR — Aponte sua câmera para um código QR ou envie uma imagem ou captura de tela que contenha um.