Codificador e decodificador de imagem Base64: arraste uma imagem para copiar seu Data URI com trechos de HTML e CSS, ou cole um Data URI para visualizar e baixar.
Codificador de Imagem Base64
Codificador e decodificador de imagem Base64: arraste uma imagem para copiar seu Data URI com trechos de HTML e CSS, ou cole um Data URI para visualizar e baixar.
O Codificador / Decodificador de Imagem Base64 roda inteiramente no seu navegador. As imagens que você solta e os Data URIs que você cola são processados no seu dispositivo e nunca são enviados à ArrayKit.
Sobre Codificador / Decodificador de imagem Base64
O Codificador de Imagem Base64 transforma qualquer imagem em um Data URI Base64 que você cola direto em HTML ou CSS. Solte um PNG, JPEG, WebP, SVG ou GIF e ele mostra na hora o Data URI mais trechos prontos para produção — uma tag <img> com texto alternativo editável e uma regra CSS background-image —, cada um com cópia em um clique. Ele também informa o tipo MIME, o tamanho do arquivo, as dimensões em pixels e o comprimento da string, para que você saiba exatamente o que está incorporando. Mude para o modo de decodificação para colar um Data URI, visualizar a imagem e baixá-la com a extensão de arquivo correta. Foi feito para desenvolvedores front-end, autores de e-mails e templates, e qualquer pessoa que incorpore ícones pequenos para economizar uma requisição. Tudo roda localmente no seu navegador, então suas imagens permanecem no seu dispositivo.
Recursos
Arraste e solte ou clique para codificar PNG, JPEG, WebP, SVG e GIF em um Data URI Base64
Cópia em um clique do Data URI puro, de uma tag HTML <img> pronta e de uma regra CSS background-image
Texto alternativo editável que entra direto no trecho <img> gerado para acessibilidade
Mostra o tipo MIME, o tamanho do arquivo, as dimensões em pixels e o comprimento do Data URI de relance
O modo de decodificação cola um Data URI para visualizar a imagem e baixá-la com a extensão correta
Avisa quando uma imagem é grande demais para incorporar de forma eficiente como Base64
Lida com SVG e GIF além de fotos rasterizadas, com extensões de download sensatas
Roda inteiramente no seu navegador, então as imagens nunca são enviadas a um servidor
Como usar Codificador / Decodificador de imagem Base64
Mantenha a aba Imagem → Base64 selecionada e solte uma imagem na área de arraste
Copie o Data URI Base64, a tag HTML <img> ou a regra CSS background-image
Opcionalmente digite um texto alternativo para incluí-lo no trecho <img>
Mude para Base64 → Imagem, cole um Data URI e então visualize e baixe a imagem
Um PNG vira uma tag <img> embutida que carrega sem uma requisição de rede extra.
Erros comuns e solução de problemas
Ao colar um Data URI aparece 'The Data URI payload is not valid Base64.' — Copie a string inteira começando em data:image/… e incluindo ';base64,', e remova aspas ou quebras de linha que seu editor adicionou.
A imagem decodificada não aparece na pré-visualização. — Verifique se o tipo MIME corresponde aos dados — um conteúdo PNG rotulado como image/jpeg não renderiza. Recodifique o arquivo original para obter um Data URI correto.
Meu arquivo HTML ou CSS ficou enorme depois de incorporar uma imagem. — O Base64 adiciona cerca de 33% de sobrecarga e imagens incorporadas não são armazenadas em cache separadamente. Incorpore apenas ícones pequenos e referencie imagens maiores como arquivos normais.
Um Data URI de SVG de outra ferramenta parece diferente. — Algumas ferramentas codificam SVGs com porcentagem em vez de Base64. Este codificador sempre usa Base64; ambos são Data URIs válidos, mas não são intercambiáveis byte a byte.
Perguntas frequentes
O que é um Data URI de imagem Base64?
Um Data URI incorpora uma imagem diretamente dentro de uma string como data:image/png;base64,XXXX. Os bytes da imagem são codificados em Base64, então você pode colocar a imagem inteira em um src de HTML ou no url() do CSS sem um arquivo ou requisição separados.
Quais formatos de imagem posso codificar?
Qualquer imagem que seu navegador consiga ler — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF e ICO funcionam. O decodificador lê o tipo MIME do Data URI e oferece uma extensão de download compatível.
Devo incorporar imagens como Base64?
Incorporar é bom para ativos pequenos e muito reutilizados, como ícones ou imagens de e-mail, onde evitar uma requisição ajuda. Para imagens maiores costuma atrapalhar, porque o Base64 acrescenta cerca de um terço ao tamanho e os dados não podem ser armazenados em cache sozinhos.
Posso decodificar um Data URI de volta para um arquivo de imagem?
Sim. Mude para Base64 → Imagem, cole a string data:image/…;base64, e a ferramenta visualiza a imagem e permite baixá-la com a extensão de arquivo correta.
Minhas imagens são enviadas quando eu as codifico?
Não. O codificador lê o arquivo com o FileReader do navegador e monta o Data URI no seu dispositivo. Nada é enviado à ArrayKit ou a qualquer servidor.
Por que a string Base64 é maior que minha imagem?
O Base64 representa três bytes com quatro caracteres, então o texto codificado fica cerca de 33% maior que o binário original, mais o curto prefixo data:…;base64,. Essa sobrecarga é normal e esperada.