Imagem para Base64

Novo

Converta qualquer imagem em uma string de URL de dados Base64

Ferramentas para desenvolvedores

Como usar Imagem para Base64

  1. 1Carregue sua imagem
  2. 2Copie a string Base64 gerada
  3. 3Cole em HTML img src, CSS background-image ou payload JSON
  4. 4Paste it directly into your HTML or CSS

Sobre Imagem para Base64

Image to Base64 converts your image file into a Base64 text string that can be embedded directly into HTML img tags, CSS backgrounds, or JSON payloads — no separate image file needed. The tool shows the full data URL, the pure Base64 portion, and an example HTML snippet.

Base64 encoding is the standard technique for embedding binary image data inside text-based formats. It is used everywhere: HTML email templates that cannot reference external files, CSS files that inline background icons, JSON API responses that carry image thumbnails, and SVG files that embed raster images. This tool automates the conversion instantly in your browser.

Three output views are provided: the full data URL (ready to paste into an src attribute), the raw Base64 string (for APIs that expect just the encoded data), and a complete HTML img tag example. One-click copy buttons make it easy to grab each piece without manual selection.

Principais recursos de Imagem para Base64

  • Converte PNG, JPG, WEBP, GIF e SVG para Base64
  • Gera uma string de URI de dados pronta para uso
  • Cópia com um clique da saída codificada completa
  • Mostra comprimento da string codificada e tamanho estimado
  • Suporta upload de imagem por arrastar e soltar
  • Codificação instantânea sem upload para servidor
  • 100% do lado do cliente usando a API FileReader
  • Funciona com qualquer tamanho de imagem

Formatos suportados

Formatos de entrada

PNGJPGWEBPGIFSVGBMPICO

Formatos de saída

Base64 data URL stringRaw Base64 stringHTML img snippet

The output data URL includes the correct MIME type prefix (data:image/png;base64, etc.) automatically.

Exemplos

Ícone inline em email HTML

Incorpore o ícone diretamente no HTML do email para que apareça mesmo quando imagens externas estão bloqueadas.

Entrada

Small 32x32 PNG icon

Saída

data:image/png;base64,iVBOR... (full data URL)

Imagem de fundo CSS

Use a URL de dados em uma propriedade CSS background-image para evitar uma solicitação HTTP adicional.

Entrada

Small decorative PNG texture

Saída

background-image: url("data:image/png;base64,...")

Image in JSON API response

Copy the raw Base64 string to use as the value of an "avatar" field in a JSON payload without the data URL prefix.

Entrada

User avatar PNG

Saída

Raw Base64 string for JSON field value

Casos de uso comuns

  • Incorporar ícones pequenos diretamente em HTML para evitar solicitações HTTP extras
  • Incluir imagens inline em CSS para gráficos de fundo
  • Armazenar dados de imagem em cargas úteis JSON de API ou arquivos de configuração
  • Criar modelos de e-mail HTML autossuficientes com imagens incorporadas
  • Codificar imagens de assinatura para incorporação em scripts de geração de PDF
  • Agrupar sprites pequenos diretamente em arquivos fonte JavaScript

Solução de problemas

A string de saída é extremamente longa e deixa o editor lento

Solução

A codificação Base64 aumenta o tamanho em ~33%. Para imagens maiores que 100 KB, considere servi-las como arquivos regulares.

O URI de dados não é exibido no navegador

Solução

Certifique-se de que o URI de dados inclua o prefixo MIME correto, ex: "data:image/png;base64," — a ferramenta gera isso automaticamente, verifique truncamento acidental.

A codificação SVG produz saída quebrada

Solução

Para arquivos SVG, a codificação URL às vezes é mais confiável que Base64. Use o código-fonte SVG bruto ou codifique a string SVG em URL.

Perguntas frequentes

Por que usar Base64 para imagens?

Base64 permite incorporar imagens diretamente no código sem requisições de arquivo separadas.

O Base64 aumenta o tamanho do arquivo?

Sim, em cerca de 33%. Use apenas quando a incorporação for necessária.

What is the difference between the data URL and the raw Base64 string?

The data URL includes the MIME type prefix (e.g., data:image/png;base64,) followed by the Base64 data. The raw Base64 string is just the encoded data without that prefix. Use the full data URL in HTML src attributes and CSS url() values; use the raw string when an API expects Base64-only input.

Is there a file size limit?

There is no server-side limit since all encoding happens in your browser. Images up to 10 MB encode reliably on modern devices. Very large images may slow down or crash the browser tab.

Which image formats are supported?

Any format your browser can load: PNG, JPG, WEBP, GIF, SVG, BMP, and ICO are all supported. The MIME type is detected automatically from the file.

Can I use the Base64 output in CSS?

Yes. Use the full data URL as the value of a CSS background-image property: background-image: url("data:image/png;base64,..."). Useful for small decorative images and icons.

Posso usar a saída Base64 em uma API JSON?

Sim. Copie a string Base64 pura (sem o prefixo data URL) para usar como valor de um campo de imagem em um payload JSON.

O que acontece com a transparência na saída Base64?

A transparência é preservada na URL de dados quando a fonte é um PNG. O tipo MIME no prefixo garante renderização correta.