Como embutir uma imagem Base64 no HTML?

Use a saída data URL e cole como `src` de uma tag ` `, ou use direto a opção de saída **HTML ` `** — a ferramenta já gera a tag completa.

Como usar uma imagem Base64 no CSS?

Copie a saída `CSS url()`. Ela gera algo como `url('data:image/png;base64,...')`, pronto pra colar em `background-image` ou `content`.

Qual a diferença entre Base64 puro e Data URL?

**Raw Base64** é só a string codificada, sem contexto — útil pra campos JSON ou payloads de API. **Data URL** já vem com o prefixo `data:mimetype;base64,`, pronta pra funcionar como `src` de imagem ou valor de CSS direto.

Por que o arquivo em Base64 fica maior que o original?

Codificar binário em texto Base64 adiciona cerca de 33% ao tamanho original — é o custo de representar cada 3 bytes como 4 caracteres. Pra ícones pequenos o overhead é desprezível, mas pra fotos grandes pode pesar bastante no HTML/CSS final.

Qual o tamanho máximo suportado?

Até 20 MB. Pra imagens maiores a string fica muito longa e pode causar lentidão — considere hospedar separadamente.

Codificar reduz a qualidade da imagem?

Não. Base64 é uma codificação sem perdas — converte o binário pra texto e de volta sem alterar nenhum pixel.

Minha imagem é enviada pra algum servidor?

Não. Toda a conversão acontece localmente com a `FileReader API`. Sua imagem nunca sai do dispositivo.

Devo usar Base64 pra todas as imagens do meu site?

Não. Faz sentido pra ícones e logos pequenos (abaixo de 5–10 KB) onde eliminar a requisição HTTP compensa o overhead de ~33%. Fotos maiores costumam carregar mais rápido hospedadas separadamente, com cache do navegador.

Como decodificar Base64 de volta pra imagem?

Cole a string Base64 no conversor [Base64 to Image](/pt/tools/base64-to-image) — ele faz o caminho inverso e mostra a imagem decodificada com opção de download.

Imagem para Base64 — Image to Base64 e Data URL

Converta imagem (PNG, JPG, WebP, SVG) em Base64 ou data URL pronta para HTML e CSS. Cole ou arraste o arquivo. 100% no navegador, sem upload.

Atualizado em março de 2026

Codificar Decodificar Image → Base64 Base64 → Image

Solte uma imagem aqui ou escolha um arquivo

PNG, JPG, GIF, SVG, WebP · Máx 20 MB

PNGJPGSVGWEBPGIF

Velocidade

—

Privacidade

Apenas Local

Payload

0 KB

Codificação Rápida

Processamento assíncrono lida com arquivos grandes sem travar a interface.

Processamento Local

Os assets são codificados no browser. Os dados nunca saem do seu dispositivo.

Suporte a Data URI

Gere formatos prontos para CSS, HTML e Data URL diretamente.

Como funciona

Quatro formatos de saída, um clique pra copiar

1. Solte a imagem

PNG, JPG, GIF, SVG ou WebP até 20 MB — arraste ou clique em navegar.

2. Escolha o formato

Raw Base64, Data URL, HTML `<img>` ou CSS `url()`.

3. Copie

Clique em Copiar ou pressione Shift+Enter pra levar o resultado.

O que esta ferramenta faz

Além de gerar a string Base64

Quatro formatos de saída

Base64 puro, data URL completa, tag <img> pronta ou valor url() de CSS.

Mostra metadados

Dimensões, tamanho original e tamanho codificado antes de copiar.

Pré-visualização com zoom

Confirme visualmente a imagem antes de embutir no código.

100% no navegador

Usa a FileReader API — sua imagem nunca sai do dispositivo, funciona offline.

Atalhos de teclado

Shift+Enter copia o resultado, e Shift+seta navega entre os quatro conversores Base64 (encode, decode, imagem→Base64, Base64→imagem) sem tocar no mouse.

Mostra o tempo de processamento

Um cronômetro em milissegundos mede quanto tempo a leitura e codificação do arquivo levaram, útil pra confirmar que imagens grandes não travam o navegador.

Exemplos

Formato de saída

Resultado

Raw Base64

iVBORw0KGgoAAAANSUhEUgAA...

Data URL

data:image/png;base64,iVBORw0K...

HTML <img>

CSS url()

url('data:image/png;base64,...')

SVG (mime automático)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...

Quando você vai usar isso

Os cenários mais comuns entre quem usa a ferramenta

Eliminar requisições HTTP

Ícones e logos pequenos (abaixo de 5–10 KB) carregam junto com o HTML/CSS, sem requisição extra.

HTML autocontido

Demos de arquivo único, templates de e-mail ou docs offline funcionam sem dependências externas.

Imagens em e-mail

Muitos clientes bloqueiam imagens remotas mas renderizam data URLs inline sem problema.

Payload de API

Webhooks e APIs REST que transferem imagens costumam esperar uma string Base64.

Canvas e WebGL

Strings Base64 evitam restrições de CORS que se aplicam a imagens hospedadas externamente.

Caminho inverso

Pra colar Base64 e visualizar a imagem, use o [Base64 to Image](/pt/tools/base64-to-image).

Dúvidas comuns

Colar Base64 puro como se fosse Data URL

A saída Raw Base64 não tem o prefixo data:image/...;base64, — colar direto no src de uma <img> ou em url() do CSS gera imagem quebrada. Use a saída Data URL ou HTML <img> quando for colar direto no código.

Imagem grande demais pra embutir

Acima de 20 MB o upload é rejeitado, e mesmo abaixo disso fotos grandes em Base64 pesam ~33% mais que o arquivo original e perdem o cache separado do navegador. Pra imagens grandes, considere hospedar o arquivo à parte.

Selecionar um arquivo que não é imagem

PDFs, vídeos e outros documentos disparam mensagem de erro — só formatos image/* (PNG, JPG, GIF, SVG, WebP) são aceitos.

Qualidade não muda

Base64 é sem perdas — a string representa exatamente os mesmos pixels do arquivo original.

Copiar a tag `<img>` sem preencher o `alt`

A saída HTML <img> vem com alt="" vazio por padrão — edite o atributo com uma descrição real da imagem antes de publicar, senão você perde acessibilidade e um sinal de SEO.

Tratar SVG em Base64 como sempre seguro

Um SVG pode conter <script> embutido. Usado como src de <img> esse script não roda, mas se o data URL for aberto direto ou usado em <object>/<iframe>, o conteúdo ativo do arquivo original é preservado. Só reaproveite SVGs de origem confiável.

Por que codificar aqui

Toda a conversão acontece no navegador com a FileReader API — sua imagem nunca sai do dispositivo, e a ferramenta funciona offline depois de carregada.

Os quatro formatos de saída poupam o passo manual de montar a tag <img> ou o url() do CSS — copie e cole direto no código.

A ferramenta faz parte de uma família de quatro conversores Base64 — encode, decode, imagem→Base64 e Base64→imagem — e dá pra alternar entre eles com Shift+seta sem sair do teclado.

Perguntas frequentes

Use a saída data URL e cole como src de uma tag <img>, ou use direto a opção de saída HTML <img> — a ferramenta já gera a tag completa.

Referências

MDN — FileReader API

Documentação oficial da API usada pra ler arquivos de imagem localmente.

MDN — Data URLs

Referência completa pro formato data:image/...;base64,... usado em HTML e CSS.

RFC 2397 — The "data" URL scheme

Especificação original do IETF que define o esquema data: usado por toda saída Data URL gerada aqui.