Conversor de imagem para Base64

Como converter uma imagem para Base64

1. Arraste uma imagem para a caixa, cole da área de transferência com Ctrl+V (Cmd+V no Mac) ou use o seletor de arquivos. Capturas de tela podem vir direto da área de transferência; vários arquivos de uma vez também funcionam.
2. Se quiser, reduza ou converta antes: digite uma Largura máx. em pixels, escolha PNG, JPEG ou WebP em Converter para, ajuste a Qualidade ou marque Remover metadados (EXIF).
3. Escolha um formato em Saída como. Esta página começa em Data URI.
4. Clique em Copiar saída, ou em Salvar como .txt para resultados longos.

A prévia mostra o nome do arquivo, o tamanho, o tipo MIME e as dimensões em pixels. Abaixo dos botões aparecem o tamanho da entrada, o tamanho da saída e o acréscimo em porcentagem, para você saber o que está prestes a colar.

Formatos de saída e onde usá-los

Os dados Base64 são os mesmos em todos os formatos. Só muda o que vem em volta. Os exemplos abaixo, encurtados, usam um PNG de 32×32 chamado logo.png:

A saída <img> inclui width e height, o que permite ao navegador reservar o espaço antes de decodificar a imagem. Alguns renderizadores de Markdown, principalmente em plataformas hospedadas, removem URLs data: de imagens, então teste o seu antes de contar com a saída Markdown.

Redimensione e converta antes de codificar

O Base64 acrescenta um terço ao tamanho do que você entrega a ele, então o melhor jeito de obter uma string curta é uma imagem menor. Uma foto de celular exibida como miniatura de 300 pixels não precisa dos 4000 pixels originais. Definir Largura máx. como 600, o dobro do tamanho de exibição para telas de alta densidade, economiza muito mais que qualquer truque de codificação.

O que as opções fazem:

• Largura máx. só reduz. Imagens mais estreitas mantêm as dimensões, e a proporção é sempre preservada.
• Converter para JPEG preenche as áreas transparentes de branco, porque o JPEG não tem canal alfa. Use WebP se precisar de transparência e tamanho pequeno ao mesmo tempo.
• Qualidade vale para saídas JPEG e WebP sempre que uma das outras opções provocar uma recodificação. O PNG não tem perdas e ignora essa opção.
• Remover metadados (EXIF) apaga dados da câmera como coordenadas de GPS, o modelo do aparelho e a hora da captura. Isso funciona redesenhando a imagem, então um JPEG é compactado de novo na qualidade escolhida.
• GIF, BMP e AVIF saem como PNG quando recodificados com Manter formato, já que os navegadores não geram esses formatos a partir de um canvas. Um GIF animado fica só com o primeiro frame.
• O Safari não codifica WebP. Se você escolher WebP nele, a ferramenta avisa que gerou PNG no lugar.
• Arquivos SVG são codificados como estão. Eles já são texto, e rasterizar um vetor anularia o propósito dele.

Um PNG que já passou por um otimizador pode sair maior depois de recodificado. A prévia mostra o novo tamanho ao lado do original, então compare antes de copiar.

Quando embutir uma imagem, e quando não

Um data URI economiza uma requisição HTTP e mantém tudo num arquivo só. Isso compensa para:

• ícones, logos e pequenos elementos gráficos de interface com poucos kilobytes,
• documentos HTML de arquivo único, como relatórios, documentação offline ou dashboards exportados,
• placeholders minúsculos e desfocados exibidos enquanto a imagem real carrega,
• fixtures de teste e payloads JSON em que um arquivo separado atrapalha.

Para fotos e qualquer coisa grande, o efeito é o contrário. A cópia codificada é cerca de 33% maior, não pode ficar em cache separada do HTML ou do CSS que a contém e é baixada de novo em cada página que a embute. Uma imagem dentro de uma folha de estilos também atrasa a folha de estilos, o que atrasa a renderização. E loading="lazy" não ajuda: os bytes já estão no documento. Há mais detalhes em desempenho de data URIs, e a calculadora de tamanho mostra o tamanho codificado antes de você decidir.

E-mail é um caso à parte. O Gmail e vários outros webmails não mostram imagens em data URI, então newsletters normalmente usam imagens hospedadas ou anexos CID. Veja Base64 em e-mail.

Imagens para APIs e modelos de IA com visão

O JSON não tem tipo binário, então APIs que recebem uma imagem no corpo da requisição esperam Base64. Isso inclui muitos modelos de IA multimodais que descrevem, classificam ou leem texto em imagens. A imagem vai de um destes dois jeitos:

• um data URI completo numa única string: data:image/jpeg;base64,/9j/4AAQ...
• Base64 puro num campo, com o media type (image/jpeg) em outro.

Use Data URI para o primeiro e Base64 puro para o segundo. Mandar o prefixo data: para uma API que espera Base64 puro, ou o contrário, é um motivo frequente de rejeição dessas requisições. Esses serviços costumam limitar o tamanho da requisição e muitas vezes reduzem imagens grandes do lado deles de qualquer jeito, então redimensionar antes de codificar mantém a requisição pequena a um custo baixo.

Formatos de imagem que dá para embutir

HEIC e TIFF são codificados sem problema, mas um data URI de qualquer um deles mostra imagem quebrada no Chrome e no Firefox. As páginas de HEIC e TIFF explicam o que fazer no lugar. Para mais assinaturas, veja prefixos Base64 comuns.

O mesmo no código

No navegador, o FileReader devolve um data URI direto:

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

Em Python, leia os bytes e acrescente o prefixo você mesmo:

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

Mais variantes, incluindo streaming de arquivos grandes, estão em Base64 em JavaScript e Base64 em Python.

Quando a imagem não aparece

• Imagem quebrada no HTML. Desmarque URL-safe (- _) para data URIs. Os navegadores decodificam URLs data: só com o alfabeto padrão, e um - ou _ no lugar de + ou / quebra a imagem.
• Funciona no HTML, falha no CSS. Quebrar em 76 coloca quebras de linha na string. Atributos HTML as toleram, mas uma quebra de linha dentro de uma string url("...") do CSS invalida a regra. Deixe a quebra desligada para tudo que não seja corpo de e-mail.
• Prefixo duplicado. Uma string que começa com data:image/png;base64,data:image/png;base64, veio de colar um data URI num template que já adiciona o próprio prefixo. Use Base64 puro nesse caso.
• Imagem errada ou nenhuma imagem depois de decodificar. Compare os primeiros caracteres com a tabela acima. Se o começo não bate com o formato, a string foi cortada ou trocada. O Base64 para Imagem mostra o que os bytes realmente são.

Perguntas frequentes