Conversor de Imagem para BASE64

Restaurando o arquivo selecionado...

Uma URL de dados Base64 reúne o tipo de mídia e os bytes codificados de uma imagem em um único valor de texto, como data:image/png;base64,.... Escolha uma imagem de até 20 MiB e o conversor criará esse valor localmente no navegador. Antes de copiar, você verá os dados do arquivo original e o comprimento aproximado da URL gerada.

Como codificar uma imagem em base64

  1. 1

    Escolha uma imagem

    Selecione um arquivo de imagem de até 20 MiB.

  2. 2

    Codifique localmente

    O navegador lê o arquivo e cria uma URL de dados Base64 completa sem enviá-lo ao servidor.

  3. 3

    Confira o resultado

    Verifique o tipo de mídia, os dados do arquivo e o comprimento aproximado da URL gerada.

  4. 4

    Copie a URL de dados

    Copie o valor completo `data:image/...;base64,...` para a área de transferência.

Quando usar inline, quando usar link

A incorporação em Base64 economiza uma solicitação HTTP à custa de um aumento de tamanho de 33%, vale a pena para alguns ativos, desperdício para outros.

Cálculo de tamanho

Tamanho original Tamanho Base64 Bytes extras
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

Guia de decisão

Caso de uso Inline ou externo
Ícone abaixo de 2 KB (logotipo SVG, sprite) Inline
Imagem do cursor em CSS (cursor: url()) Inline
Pequena demonstração HTML ou CSS autônoma Inline
Ícone incluído em uma carga JavaScript Inline
Imagem hero, > 50 KB Externo
Qualquer coisa que possa ser armazenada separadamente Externo

Formato de URI de dados

data:[<mediatype>][;base64],<data>

Exemplos:

  • data:image/png;base64,iVBORw0KGgo..., PNG
  • data:image/svg+xml;utf8,<svg>...</svg>, SVG, muitas vezes melhor inline sem base64
  • data:image/jpeg;base64,/9j/4AAQS..., JPG

Dicas

  • SVG é frequentemente melhor como url() com codificação utf8 em vez de base64; mais curto, legível.
  • A codificação não inspeciona nem higieniza a imagem. Incorpore somente arquivos confiáveis, principalmente SVG, que pode conter conteúdo ativo ou externo.
  • Imagens grandes dentro de cargas JSON bloqueiam a análise se forem muito grandes; considere referências multipart ou externas.
  • A imagem de fundo CSS com base64 é incorporada de forma limpa, mas derrota o cache entre páginas.

Perguntas frequentes

Base64 codifica 3 bytes de entrada como 4 caracteres, então a saída é sempre ~33% maior que a entrada. Uma imagem de 10 KB produz uma string de cerca de 13.600 caracteres. Longo é normal.

O conversor aceita uma imagem de até 20 MiB. Esse é um limite de processamento, não uma recomendação: URLs de dados devem ser pequenas, pois Base64 acrescenta cerca de um terço ao tamanho original e impede o cache separado.

Não. A codificação Base64 é executada no seu navegador. A imagem nunca sai do seu dispositivo.

Não neste codificador. Use a ferramenta separada Base64 para imagem para transformar uma URL de dados ou string Base64 bruta em um arquivo de imagem para download.

Ferramentas relacionadas