Quatro saídas úteis
Copie Base64 puro, um URI de dados completo, um elemento de imagem HTML ou uma declaração de fundo CSS pronta para uso.
Ferramentas de imagem
•
Ferramenta online grátis
Imagem para Base64
Codifique imagens PNG, JPG, WebP, GIF e SVG como Base64 diretamente no navegador.
Grátis
Sem cadastro
No navegador
Ferramenta online
Imagem para Base64
Pronta
Codificador privado de imagens no navegador
Converta imagens para Base64 sem enviá-las
Codifique uma imagem como string Base64 pura, URI de dados completo, tag de imagem HTML ou valor de fundo CSS. O processamento ocorre localmente no seu navegador.
Análise precisa do tamanho
Compare o arquivo original com o resultado codificado e veja o aumento exato de tamanho antes de usá-lo de forma incorporada.
Local e privado
A imagem original e os dados Base64 gerados permanecem na memória do navegador e não são enviados para conversão.
Envie uma imagem para codificar
Arraste e solte, cole da área de transferência ou escolha uma imagem do seu dispositivo
Copie uma imagem e pressione Ctrl+V ou Command+V Processado localmente no seu navegador
Imagem selecionada
- Nome do arquivo
- Tipo de arquivo
- Dimensões
- Tamanho original
- Tamanho Base64 estimado
Arquivo grande detectado
A saída Base64 é aproximadamente 33% maior que o arquivo original e pode exigir uma quantidade considerável de memória do navegador.
Os dados de GIF animado são preservados durante a codificação Base64.
SVG já é baseado em texto. O código SVG incorporado pode ser menor e mais flexível que Base64 para uso em HTML.
Conclua a verificação antes de codificar a imagem.
Codificando imagem
Lendo e codificando a imagem localmente no seu navegador…
Saídas Base64 geradas
Imagem codificada com sucesso.
Saídas Base64 geradas
Escolha o formato necessário para o projeto e copie ou baixe o texto gerado.
Codificando imagem
Lendo e codificando a imagem localmente no seu navegador…
Resumo do tamanho da codificação
- Arquivo original
- String Base64
- URI de dados completo
- Aumento de tamanho
- :percent% do tamanho original
Base64 normalmente aumenta o tamanho em cerca de 33%, pois cada três bytes originais são representados por quatro caracteres de texto.
Considere usar uma imagem externa
Imagens Base64 grandes aumentam o tamanho do HTML ou CSS, não podem ser armazenadas em cache separadamente e podem atrasar a renderização da página.
Sua imagem nunca sai deste dispositivo
A codificação é realizada por JavaScript na memória do navegador. A imagem e a saída gerada não são enviadas a um endpoint de conversão da CyberTools.
Sem perda de qualidade da imagem
Base64 é uma codificação de texto reversível. Ela preserva os bytes originais sem redimensionar, recomprimir ou alterar a qualidade da imagem.
Use Base64 de forma seletiva
Base64 incorporado é mais útil para recursos muito pequenos. Arquivos externos normalmente são melhores para imagens grandes que se beneficiam de cache e carregamento adiado.
Codificador privado de imagens online
Imagem para Base64: codifique imagens para uso incorporado na Web
Converta imagens PNG, JPG, JPEG, WebP, GIF ou SVG em texto Base64 diretamente no navegador. A ferramenta gera uma string Base64 pura, um URI de dados completo, um exemplo de imagem HTML e um exemplo de fundo CSS.
A imagem é processada localmente e não é enviada para um servidor de conversão. Você pode verificar o tamanho codificado exato, compará-lo com o arquivo original e copiar apenas o formato necessário para o projeto.
Código pronto para usar
Gere Base64 puro, URI de dados, HTML e CSS sem montar manualmente prefixos, tipos MIME ou marcação.
Entenda o custo de tamanho
Veja a contagem exata de caracteres e o aumento percentual causado pelo Base64 antes de adicionar o resultado a uma página.
Processamento somente no navegador
Mantenha designs privados, capturas internas e recursos de clientes no seu dispositivo durante toda a conversão.
O que a ferramenta Imagem para Base64 faz
O codificador lê os bytes binários de uma imagem e os representa usando o alfabeto Base64. Ele produz um valor de texto que pode ser usado em HTML, CSS, JSON, XML, e-mails e outros formatos baseados em texto sem corromper os dados binários originais.
São oferecidas quatro saídas: caracteres Base64 puros, URI de dados completo com o tipo MIME, elemento img HTML e exemplo CSS background-image. Você pode copiar a versão necessária sem montar o código manualmente.
Como codificar uma imagem em Base64
Escolha um arquivo PNG, JPG, JPEG, WebP, GIF ou SVG, arraste-o para a área de envio ou cole uma imagem da área de transferência. Confira as informações e a pré-visualização, conclua a verificação quando necessário e inicie a codificação.
Após a conversão, compare os tamanhos original e codificado. Selecione Base64 puro, URI de dados, HTML ou CSS e copie a saída ou baixe-a como arquivo de texto. Redefina a ferramenta antes de processar outra imagem.
Como funciona a codificação Base64
Arquivos binários contêm valores de bytes de 0 a 255, incluindo valores que não podem ser representados com segurança como texto visível. Base64 agrupa a entrada em blocos de três bytes e mapeia cada bloco para quatro caracteres ASCII imprimíveis escolhidos de um alfabeto de 64 caracteres.
O processo é determinístico e sem perdas. Decodificar a string Base64 reconstrói os mesmos bytes originais. Caracteres de preenchimento podem ser adicionados ao bloco final quando o tamanho da entrada não é divisível por três.
Por que a saída Base64 é cerca de 33% maior
Cada três bytes dos dados originais se tornam quatro caracteres Base64. Essa proporção de quatro para três faz com que o texto codificado seja normalmente cerca de um terço maior que o arquivo original, além de uma pequena diferença causada pelo preenchimento e pelo prefixo do URI de dados.
Uma imagem de 30 KB produz aproximadamente 40 KB de caracteres Base64. Esse aumento faz parte do método de codificação e não pode ser eliminado sem escolher outra representação ou reduzir primeiro o arquivo original.
Entendendo os URIs de dados Base64
Uma string Base64 pura não identifica o tipo do arquivo. Um URI de dados adiciona o prefixo data:, o tipo MIME da imagem e o marcador ;base64 antes dos caracteres codificados. O navegador pode então tratar o valor completo como uma URL de imagem incorporada.
URIs de dados podem ser usados no atributo src de img em HTML, em um valor CSS background-image ou em qualquer outro contexto que aceite URL. Os exemplos gerados incluem o tipo MIME correto obtido do arquivo selecionado.
Quando imagens Base64 incorporadas são úteis
Base64 pode ser útil para pequenos ícones de interface, indicadores de carregamento, recursos de e-mail, relatórios portáteis, dados de teste e arquivos HTML independentes. Nesses casos, eliminar uma solicitação separada ou manter tudo em um único documento pode ser vantajoso.
Também é útil quando um recurso precisa ser transportado dentro de JSON ou de outra carga composta apenas por texto. Ferramentas como Vite e webpack costumam incorporar automaticamente recursos pequenos abaixo de um limite configurado.
Quando uma imagem externa é a melhor escolha
Fotografias grandes, imagens principais, ícones repetidos e mídias abaixo da dobra normalmente funcionam melhor como arquivos externos. Imagens externas podem ser armazenadas em cache separadamente, obtidas em paralelo, comprimidas pela infraestrutura de entrega e carregadas de forma adiada quando necessárias.
Uma imagem Base64 incorporada passa a fazer parte do arquivo HTML ou CSS. Ela aumenta o trabalho de análise, não pode ser armazenada em cache separadamente e precisa ser baixada novamente sempre que o documento que a contém mudar.
Privacidade e imagens confidenciais
Base64 é codificação, não criptografia. Qualquer pessoa que receba a saída pode decodificá-la e reconstruir a imagem original. Não trate uma string Base64 como uma forma de esconder informações visuais confidenciais.
Esta ferramenta realiza a codificação localmente na memória do navegador e não envia a imagem para um endpoint de conversão da CyberTools. O processamento local é útil para diagramas internos, recursos de clientes, capturas privadas e arquivos sujeitos a confidencialidade.
Considerações sobre SVG e GIF animado
Um GIF animado continua animado porque Base64 preserva todos os bytes, incluindo todos os quadros da animação. Quando usado em um elemento de imagem HTML compatível, o URI de dados resultante se comporta como o GIF original.
SVG já é um formato XML baseado em texto. O código SVG incorporado diretamente costuma ser menor e permite aplicar estilos ou scripts a elementos individuais. SVG codificado em Base64 é mais útil quando um valor de URL é necessário, como em um fundo CSS.
Usando Base64 em projetos Web modernos
React, Vue e outros frameworks podem usar URIs de dados em atributos de imagem ou vinculações de estilo. Isso pode ser conveniente para pequenos recursos isolados, mas imagens maiores normalmente devem ser importadas como arquivos para que o sistema de compilação otimize nomes, cache e entrega.
Muitos empacotadores oferecem limites configuráveis para incorporação. Recursos abaixo do limite se tornam URIs de dados, enquanto arquivos maiores são gerados separadamente. Isso equilibra a sobrecarga de solicitações, o aumento do Base64 e o comportamento do cache.
Saídas geradas pelo codificador
| Saída | Conteúdo |
|---|---|
| String Base64 pura | Apenas os caracteres codificados, sem tipo MIME ou prefixo de URI de dados. |
| URI de dados Base64 | O valor completo data:[tipo-mime];base64,[conteúdo] para uso como URL incorporada. |
| Exemplo de uso em HTML | Um elemento img com o URI de dados gerado no atributo src. |
| Exemplo de uso em CSS | Uma declaração background-image contendo o URI de dados gerado. |
Usos comuns da codificação de imagem para Base64
- Incorporar um pequeno ícone sem uma solicitação adicional
- Criar um documento HTML independente que funcione offline
- Incluir uma imagem em uma carga JSON ou XML
- Gerar uma imagem incorporada para um modelo de e-mail HTML
- Adicionar uma pequena imagem de fundo diretamente ao CSS
- Preparar dados de teste portáteis para desenvolvimento e depuração
- Verificar a saída de um processo de compilação frontend
- Transportar bytes binários de imagem por um campo somente de texto
Quando evitar imagens Base64
- Fotografias grandes ou imagens principais
- Imagens que precisam de carregamento adiado
- Recursos reutilizados em várias páginas
- Arquivos que se beneficiam de cache independente do navegador
- HTML ou CSS alterado com frequência contendo imagens grandes
- Imagens entregues com eficiência por uma CDN
Especificações do codificador de imagem para Base64
| Propriedade | Detalhes |
|---|---|
| Formatos aceitos | PNG, JPG, JPEG, WebP, GIF e SVG |
| Tamanho máximo no navegador | 200 MB, sujeito à memória disponível do navegador e dispositivo |
| Métodos de entrada | Seleção de arquivo, arrastar e soltar ou colar da área de transferência |
| Saídas geradas | Base64 puro, URI de dados completo, exemplo HTML e exemplo CSS |
| Comportamento da codificação | Conversão de bytes para texto sem perdas, redimensionamento ou recompressão |
| Suporte a GIF animado | Os bytes da animação são preservados na saída codificada |
| Aumento esperado de tamanho | Aproximadamente 33%, mais o curto prefixo do URI de dados |
| Local de processamento | Memória local do navegador sem envio da imagem para conversão |
Perguntas frequentes sobre Imagem para Base64
Por que a string Base64 é maior que a imagem original?
Base64 representa cada três bytes originais com quatro caracteres de texto. Por isso, a string resultante normalmente é cerca de 33% maior, com uma pequena quantidade adicional causada pelo preenchimento e pelo prefixo do URI de dados.
A codificação Base64 reduz a qualidade da imagem?
Não. Base64 não causa perdas e preserva os bytes do arquivo original. Ela não redimensiona, recomprime ou altera a qualidade visual da imagem.
Posso abrir um URI de dados Base64 diretamente no navegador?
Sim. Cole um URI de dados de imagem válido na barra de endereço do navegador ou use-o como origem de uma imagem para verificar rapidamente o resultado codificado.
Os GIFs animados são preservados?
Sim. Todos os bytes do arquivo GIF, incluindo os quadros de animação e os dados de tempo, são codificados. O resultado continua animado em ambientes compatíveis com GIF animado.
Devo usar imagens Base64 no React ou Vue?
Base64 pode ser útil para recursos muito pequenos. Imagens maiores normalmente devem ser importadas como arquivos para que o framework ou empacotador otimize cache, nomes de arquivo e entrega.
Imagens SVG devem ser codificadas como Base64?
Somente quando um valor de URL for necessário. Para HTML, o código SVG incorporado diretamente costuma ser menor e permite que CSS ou JavaScript acesse elementos SVG individuais.
Base64 é uma forma segura de criptografia?
Não. Base64 é uma codificação reversível e não oferece confidencialidade. Qualquer pessoa com a string pode reconstruir a imagem original.
Minha imagem é enviada durante a conversão?
Não. A imagem é lida e codificada localmente pelo JavaScript no seu navegador e não é enviada a um endpoint de conversão de imagens da CyberTools.
Codificador online gratuito de imagem para Base64 para arquivos PNG, JPG, JPEG, WebP, GIF e SVG. Gere localmente a string Base64 pura, o URI de dados completo, uma tag de imagem HTML e um exemplo de fundo CSS sem enviar sua imagem.
Contato
Está faltando algo?
Solicite ferramentas que estejam faltando ou envie seu feedback pelo nosso formulário de contato.
Fale conosco