Imagem para Base64: data URI, HTML e CSS
Converta uma imagem em string Base64 ou data URI, com tag HTML img, fundo CSS e saída JSON prontos para colar. No navegador.
Carregando Conversor de imagem para Base64…
Seus arquivos nunca saem do seu dispositivo
Como usar Conversor de imagem para Base64
- 1
Abra Conversor de imagem para Base64 nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Como converter uma imagem para Base64
Base64 transforma os dados binários de uma imagem em texto feito de letras, números e alguns símbolos. Esse texto pode ser embutido onde só texto é permitido: em HTML ou CSS como data URI, num JSON enviado a uma API, num modelo de e-mail ou num arquivo de configuração. O navegador o decodifica de volta na imagem original ao exibi-la.
O conversor lê sua imagem no navegador e gera na hora a string codificada, junto com trechos prontos: um data URI completo (data:image/png;base64,…), só a string Base64, uma tag HTML img, uma regra CSS background-image e um objeto JSON. Você pode copiar qualquer um para a área de transferência ou baixar a saída como arquivo de texto ou JSON. Imagens de até 10 MB são aceitas.
Como usar: Conversor de imagem para Base64
- Envie ou arraste uma imagem (JPG, PNG, WebP, GIF, SVG e outros formatos lidos pelo navegador, até 10 MB). O formato, as dimensões e o tamanho do original aparecem.
- Escolha o formato de saída: Data URI, Base64 Only, CSS Background, HTML Image ou JSON.
- Copie o resultado com um clique ou baixe-o e cole no seu HTML, CSS, JavaScript ou requisição de API.
- Confira a contagem de caracteres e o tamanho codificado no painel de estatísticas antes de usar imagens grandes.
Quando imagens em Base64 fazem sentido
- Ícones e logos pequenos em CSS ou HTML, economizando uma requisição HTTP separada.
- Modelos de e-mail HTML em que imagens externas podem ser bloqueadas.
- APIs e JSON que só aceitam imagens como campos de texto.
- Demos e protótipos de arquivo único que precisam funcionar sem recursos externos.
Exemplos de saída
Um data URI tem a forma data:image/png;base64,iVBORw0KGgo… e pode ser usado onde se espera uma URL. Em HTML vira <img src="data:image/png;base64,…" alt=""> e em CSS background-image: url(data:image/png;base64,…). A saída JSON envolve a string com o tipo MIME e as dimensões, prático para requisições de API e dados de teste.
Tamanho e desempenho
Como o Base64 é cerca de 33 % maior que o arquivo binário e é processado junto com o HTML ou CSS que o contém, embutir compensa principalmente para imagens de poucos kilobytes, como ícones, logos pequenos e placeholders. Comprima ou redimensione a imagem antes, de preferência para o tamanho exato de exibição, para a string ficar curta e as páginas rápidas.
O Base64 deixa os dados cerca de um terço maiores que o arquivo original, e imagens embutidas não podem ser armazenadas em cache separadamente. Use para imagens pequenas; para fotos e gráficos grandes, um arquivo de imagem comum comprimido com o compressor de imagens é mais rápido.
Privado, grátis e rápido
A ferramenta funciona inteiramente no seu navegador: seus arquivos e textos são processados no seu próprio dispositivo e não são enviados a nenhum servidor. Sem cadastro, sem marca d'água e sem limite diário.
Recursos
- Saída data URI e Base64 puro
- Trechos HTML img e fundo CSS prontos
- Saída JSON para APIs
- Copiar para a área de transferência ou baixar
- Contagem de caracteres e tamanho codificado
- Imagens de até 10 MB, processadas no navegador
Perguntas frequentes
O que é uma imagem em Base64?
Uma imagem cujos dados binários foram codificados como texto. Como data URI, ela pode ser colocada direto no HTML ou CSS em vez de apontar para um arquivo separado.
O Base64 deixa as imagens maiores?
Sim, cerca de 33 %, porque cada 3 bytes viram 4 caracteres. É melhor para imagens pequenas.
Como uso uma imagem Base64 em HTML?
Escolha a saída HTML Image e cole a tag img gerada, ou coloque o data URI no atributo src de qualquer elemento img.
Como uso em CSS?
Escolha a saída CSS Background: ela gera uma regra background-image com o data URI para colar na sua folha de estilo.
Como converto Base64 de volta em imagem?
Cole o data URI na barra de endereço do navegador para ver a imagem, ou decodifique a string com qualquer decodificador Base64 e salve os bytes com a extensão certa.
Meus arquivos são enviados a um servidor?
Não. Tudo é processado localmente no seu navegador e nada é enviado a um servidor. Ao fechar a aba, seus dados são descartados.