VoriTools

Codificar uma imagem como URL de dados Base64

Escolha a imagem para codificar seus bytes. Base64 representa dados em texto; não comprime a imagem e costuma aumentar o tamanho codificado.

Funciona localmente no seu navegador

Como transformar um arquivo de imagem em URL de dados Base64

A ferramenta funciona nos dois sentidos: escolha uma imagem e os bytes do arquivo voltam como uma URL data:image/…;base64,…; ou cole uma URL dessas (ou um payload Base64 sem prefixo) e a página mostra o que ele contém.

Tudo acontece nesta aba com o FileReader e o decodificador de imagens do navegador; o arquivo não é enviado. Aqui não há compressão, redimensionamento nem remoção de metadados: isso exige um editor de imagens.

  1. Clique em Selecionar imagem e escolha um arquivo. A caixa é preenchida com uma URL data:image/…;base64,… que começa pelo tipo detectado, e a prévia abaixo mostra a imagem.
  2. Clique em Copiar para levar a URL completa ao CSS (background-image:url("data:…")), ao HTML (<img src="data:…">) ou a um payload JSON.
  3. Para conferir algo recebido, cole a URL de dados ou o payload Base64 sem prefixo na caixa e clique em Ver prévia. A página lê os primeiros bytes (PNG, JPEG, GIF, WebP, BMP, ICO ou SVG), acrescenta o prefixo que falta e desenha a imagem.
  4. Clique em Envolver em uma tag img quando a caixa deve conter um elemento <img src="…" alt="…" /> pronto para colar em vez da URL pura.
  5. Clique em Limpar para esvaziar a caixa, a prévia e o seletor de arquivos antes da próxima imagem. Um payload cortado, que não seja Base64 ou que não seja uma imagem avisa em vez de deixar uma imagem quebrada.

O que o Base64 muda e o que ele não resolve

O que o Base64 faz com uma imagem

O Base64 mapeia cada três bytes em quatro caracteres imprimíveis, então os mesmos bytes sobrevivem a canais de texto que corromperiam ou cortariam dados binários: HTML, CSS, JSON, XML ou o corpo de um e-mail. Não há compressão — o texto codificado fica cerca de um terço maior que o arquivo — e o navegador decodifica a URL de dados ao interpretar a página, nunca como um arquivo em cache separado.

Também não é criptografia: quem tiver a página ou o e-mail pode decodificar o payload e recuperar os bytes originais com qualquer decodificador Base64, então uma URL de dados não deve carregar nada que você não publicaria.

Quando uma URL de dados compensa

Um logotipo pequeno, um ícone de lista ou uma textura de fundo que custaria uma requisição HTTP por página pode viajar dentro da folha de estilo. Isso elimina uma ida e volta e garante que a imagem esteja presente antes da primeira renderização.

O custo cresce com o arquivo: a marcação fica ilegível, o HTML comprime pior e nenhum navegador consegue armazenar a imagem em cache sem a página. Guarde URLs de dados para recursos bem abaixo de 10 KB e deixe fotografias, sprites e tudo o que se repete entre páginas como arquivos separados.

Conferir um payload que não foi você que gerou

O Base64 colado costuma chegar sem o tipo de mídia. Esta página lê os primeiros bytes dos dados decodificados — a assinatura PNG, JPEG, GIF, WebP, BMP ou ICO, ou a raiz <svg de um documento SVG — e escreve o prefixo data:image/…;base64, correspondente, então um payload sem prefixo deixa de ser uma imagem quebrada.

Se os bytes não corresponderem a nenhum formato conhecido, se o alfabeto ou o preenchimento Base64 estiverem errados, ou se o navegador não conseguir desenhar os dados decodificados, a linha de status diz qual desses casos aconteceu. Teste primeiro com um arquivo pequeno cuja imagem você conhece e decodifique também com outra ferramenta o que for para produção.

Ferramentas recentes: