Guia para desenvolvedores
Imagem Base64 em HTML, CSS e JavaScript
Exemplos práticos para incorporar dados de imagem Base64 em código front-end, com notas sobre desempenho e tamanho de arquivo.
4.8 / 5 124 avaliações
O que é uma data URI de imagem Base64?
Uma data URI combina o MIME type e o conteúdo Base64 em uma string. Um formato comum se parece com data:image/png;base64,iVBORw0KGgo...
Você usa um valor data image base64 quando quer referenciar uma imagem sem uma URL de arquivo separada. O navegador lê o texto e renderiza a imagem diretamente.
Nota: buscas por html para base64 normalmente se referem à codificação do próprio arquivo HTML. Este guia foca em colocar dados de imagem Base64 dentro de HTML, CSS e JavaScript.
Imagem Base64 em uma tag HTML img
Use uma data URI no atributo src quando precisar de um snippet HTML autocontido com um padrão base64 img tag.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />Substitua o valor de exemplo pela saída do conversor Imagem para Base64.
Background image Base64 em CSS
Use imagens codificadas para ícones pequenos, placeholders e backgrounds decorativos com um padrão background image base64.
.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }Mantenha data URIs CSS pequenas para que sua folha de estilo continue rápida de analisar e baixar.
Converter imagem para Base64 com JavaScript
Gere Base64 no navegador quando precisar de fluxos convert image to base64 javascript para uploads, visualizações ou chamadas de API.
function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }O resultado inclui o prefixo da data URI e o conteúdo codificado. Esta é uma abordagem comum de imagem para base64 javascript.
const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];Use a saída do canvas quando você já desenhou a imagem em um elemento canvas.
Exemplos de imagem Base64
Strings Base64 PNG e GIF são comuns para assets de UI pequenos como ícones, placeholders e pontos de carregamento.
Base64 JPEG frequentemente começa com /9j/ quando você vê apenas os caracteres codificados sem o prefixo.
Quando documentações mencionam uma string image to base64, normalmente significam os caracteres codificados brutos ou a data URI completa. Ambos os formatos aparecem em projetos reais.
Use nossas páginas de conversores para criar um exemplo base64 image ou image base64 example a partir dos seus próprios arquivos em vez de depender de texto placeholder.
Conversores relacionados
Prós e contras de imagens Base64
Prós
Você reduz requisições de arquivo separadas para assets pequenos, move imagens por JSON com facilidade e copia uma string em vários lugares.
Contras
A saída de codificação Base64 de imagem é maior que o arquivo de origem, mais difícil de cachear como asset independente e inadequada para fotos grandes.
Perguntas frequentes
Cole a data URI completa no atributo src de uma tag img. Você pode copiar um snippet pronto do conversor Imagem para Base64.
Use Base64 em CSS para assets muito pequenos como ícones. Evite valores grandes de background image base64 porque aumentam o tamanho da folha de estilo.
Base64 pode ajudar com arquivos pequenos, mas normalmente prejudica o desempenho para imagens grandes porque a string codificada é maior e mais difícil de cachear separadamente.
Use FileReader com readAsDataURL para uploads ou canvas.toDataURL quando a imagem já estiver desenhada em um canvas. Ambos os métodos retornam uma string que você pode dividir ou colar diretamente.