Softonic

Codificador de Imagem Base64

Etapa 1 / 3 Largue a sua imagem aqui

A processar...

Incluir uma imagem pequena como URI de dados Base64 pode evitar uma solicitação HTTP e mantém o recurso junto ao HTML ou CSS que o utiliza. Esta ferramenta no navegador aceita arquivos PNG, JPEG, GIF e WebP validados, além de texto SVG analisado com uma raiz <svg>, até 5 MiB. Gera Base64 bruto, URI de dados, CSS, HTML ou JSON. Verifique se a forma escolhida é adequada ao destino. O SVG recebe apenas uma verificação estrutural e ainda pode conter conteúdo ativo ou inseguro.

Como codificar uma imagem

  1. 1

    Solte sua imagem

    Escolha um arquivo PNG, JPG, GIF, WebP ou SVG de até 5 MiB. Imagens raster não podem ultrapassar 16.384 pixels em nenhum dos lados nem 33.554.432 pixels no total. O texto codificado permanece abaixo de 7 MiB.

  2. 2

    A codificação ocorre no navegador

    Os bytes da imagem são lidos, codificados em Base64 e prefixados com o cabeçalho URI `data:` correto.

  3. 3

    Escolha o formato de saída

    Base64 bruto, regra CSS `background-image`, tag HTML `<img>` ou string segura para JSON.

  4. 4

    Copie o resultado

    Cole em uma folha de estilo, modelo ou corpo de API.

Quando incluir imagens vale a pena

Candidatos a avaliar e testar antes da inclusão:

  • Ícones abaixo de 2 KB, Economiza uma solicitação HTTP com sobrecarga negligenciável.
  • Modelos de e-mail - Os clientes de e-mail não oferecem suporte uniforme a URIs de dados. Teste os clientes de destino e use imagens CID ou hospedadas quando necessário.
  • Substitutos de herói (LQIP), Versão borrada de baixa qualidade incluída, imagem completa carregada depois.
  • SVGs usados uma vez, Como SVG é texto, um URI de dados corretamente codificado por percentuais pode ser menor que Base64, dependendo dos caracteres e da formatação.

Maus candidatos:

  • Imagens grandes, Inflar em 33% para uma imagem de 500 KB é 166 KB de desperdício.
  • Imagens reutilizadas em várias páginas, A inclusão desabilita o cache do navegador entre rotas.
  • CSS crítico, Incluir imagens pesadas explode o caminho crítico.

Expectativas de tamanho

Tamanho da imagem Tamanho da string Base64
500 bytes ~680 caracteres
2 KB ~2,7 KB
20 KB ~27 KB
200 KB ~270 KB

Formato URI de dados

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • Esquema data:
  • Tipo MIME
  • Indicador ;base64,
  • Os bytes codificados

SVG é um caso especial

Base64 aumenta os bytes originais do SVG em cerca de um terço antes da sintaxe envolvente, enquanto a codificação por percentuais só aumenta os caracteres que precisam ser escapados. A forma mais curta depende do SVG. A forma textual deve usar um valor data:image/svg+xml,... corretamente codificado por percentuais: o token isolado ;utf8 não é um parâmetro padrão de URI de dados, e caracteres #, %, aspas ou espaços não escapados podem quebrar o URI. Esta ferramenta verifica a estrutura do SVG, mas não remove scripts, manipuladores de eventos nem referências externas. Revise SVGs não confiáveis antes de usar a saída.

Perguntas frequentes

O texto Base64 ocupa cerca de 4/3 dos bytes de origem, mais o URI de dados ou o invólucro. O desempenho depende de multiplexação, compressão, cache, reutilização, tamanho do pacote e política de segurança de conteúdo. Meça a página real: não existe um limite universal de 4 KB.

A inclusão por si só não tem efeito garantido sobre SEO. Um fundo CSS não oferece semântica de texto alternativo. Para imagens informativas, use um elemento <img> com um atributo alt significativo e mantenha fundos decorativos fora da estrutura do conteúdo.

Não. O codificador lê o arquivo localmente com a API FileReader e produz a string Base64 no navegador. Nada sai da sua máquina.

Sim, use a ferramenta Base64 para Imagem para transformar um URI data:image/... de volta em um arquivo baixável.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Criador de Crachás

Crie até 60 crachás imprimíveis a partir de uma lista Nome | segunda linha. Escolha 8 cartões ou 15 etiquetas por página em A4 ou US Letter e imprima localmente.

Gerador de letras de grafite

Crie letras de grafite com efeitos tag, bubble, block, estêncil, neon e wild. Ajuste as cores e exporte PNG ou SVG diretamente no navegador.

Ferramenta disponível em outros idiomas