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.

Codificador / Decodificador de imagem Base64

Converta imagens em Data URIs Base64 com trechos de HTML e CSS, ou decodifique um Data URI em uma imagem para 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.

Abrir o Codificador / Decodificador Base64

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

Exemplo

Entrada

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

Saída

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

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.

Ferramentas relacionadas

Codificar / Decodificar Base64 — Codificação e decodificação Base64 segura em UTF-8.
Conversor de formato de imagem — Converta imagens entre PNG, JPEG e WebP inteiramente no seu navegador.
Otimizador de imagens — Recodifique e reduza imagens (JPEG/WebP/PNG), com redimensionamento opcional.
Otimizador de SVG — Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.
Visualizador e removedor de EXIF — Visualize e remova metadados EXIF (incluindo GPS) de fotos; nada é enviado.
Codificar / Decodificar URL — Codifique e decodifique componentes de URL.
Gerador de código QR — Gere um código QR a partir de texto ou de uma URL; baixe como PNG ou SVG.