Converter arquivo para Base64 (e Base64 para arquivo)

Esta ferramenta converte qualquer arquivo, como uma imagem, um PDF ou uma fonte, em Base64, pronto para usar como data URI no HTML, no CSS ou em uma API. Ela também faz o caminho inverso: transforma um Base64 ou data URI de volta em arquivo, descobre o tipo pelo conteúdo e mostra a prévia de imagens. Nada é enviado a um servidor.

Atualizado em · Por Leonardo Gaertner

A conversão é feita no seu navegador. Os arquivos não são enviados a nenhum servidor.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

  1. Para converter um arquivo, escolha ou arraste o arquivo e selecione o formato: Base64 puro, data URI, CSS ou tag <img>.
  2. Para recuperar um arquivo, escolha Base64 para arquivo e cole o Base64 ou o data URI.
  3. Copie o resultado ou clique em Baixar arquivo. Imagens aparecem em uma prévia.

Como funciona

O arquivo é lido no navegador e convertido em Base64, que representa os bytes com 64 caracteres seguros. O resultado fica cerca de 33% maior que o arquivo: 3 bytes viram 4 caracteres. O data URI junta o tipo do arquivo e o Base64 em um endereço como data:image/png;base64,...

No caminho inverso, a ferramenta aceita Base64 puro, data URI, quebras de linha no meio e a variante para URL. O tipo vem do data URI ou, se não houver, dos primeiros bytes do arquivo, a assinatura: PNG, JPEG, GIF, WebP, SVG, PDF, ZIP e outros. Assim o download sai com a extensão certa.

Data URIs são úteis para ícones pequenos e imagens em e-mails, mas não para imagens grandes: o arquivo não fica em cache separado, e o HTML ou o CSS ficam mais pesados. A ferramenta avisa quando o arquivo passa de 2 MB.

Exemplo

Arquivo: ponto.png (1 pixel, 68 bytes)

Data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE...

Fonte: RFC 4648: codificações Base16, Base32 e Base64; RFC 2397: o esquema de URL data:

Em código

Para converter arquivos em Base64 e de volta em código, leia o arquivo como bytes, não como texto: assim imagens e PDFs não se corrompem.

JavaScript 
import { readFileSync, writeFileSync } from 'node:fs';

// Arquivo para data URI (Node.js)
function arquivoParaDataUri(caminho, tipo = 'application/octet-stream') {
  return `data:${tipo};base64,${readFileSync(caminho).toString('base64')}`;
}

// Data URI ou Base64 puro de volta para arquivo
function base64ParaArquivo(texto, caminho) {
  const base64 = texto.replace(/^data:[^,]*;base64,/, '');
  writeFileSync(caminho, Buffer.from(base64, 'base64'));
}

Node.js.

Python 
import base64
import mimetypes


def arquivo_para_data_uri(caminho: str) -> str:
    tipo = mimetypes.guess_type(caminho)[0] or "application/octet-stream"
    with open(caminho, "rb") as f:
        return f"data:{tipo};base64,{base64.b64encode(f.read()).decode('ascii')}"


def base64_para_arquivo(texto: str, caminho: str) -> None:
    dados = texto.split(",", 1)[1] if texto.startswith("data:") else texto
    with open(caminho, "wb") as f:
        f.write(base64.b64decode(dados))
PHP 
<?php
function arquivoParaDataUri(string $caminho): string
{
    $tipo = mime_content_type($caminho) ?: 'application/octet-stream';
    return 'data:' . $tipo . ';base64,' . base64_encode(file_get_contents($caminho));
}

function base64ParaArquivo(string $texto, string $caminho): void
{
    $base64 = preg_replace('/^data:[^,]*;base64,/', '', $texto);
    file_put_contents($caminho, base64_decode($base64, true));
}

Perguntas frequentes

Como usar uma imagem em Base64 no HTML?

Escolha o formato Tag <img> e cole o resultado no HTML, ou use o data URI no atributo src: <img src="data:image/png;base64,...">. No CSS, o formato CSS background-image já sai pronto.

Por que o Base64 fica maior que o arquivo?

Porque cada 3 bytes do arquivo viram 4 caracteres de texto, um aumento de cerca de 33%. Com a compressão gzip do servidor, parte dessa diferença é recuperada, mas não toda.

Vale a pena colocar imagens em Base64 no site?

Só para imagens muito pequenas, como ícones de poucos KB, em que poupar uma requisição compensa. Imagens maiores devem ficar em arquivos separados, que o navegador guarda em cache e carrega em paralelo.

Como sei o tipo de um arquivo em Base64?

Se for um data URI, o tipo vem logo depois de data:. Se for Base64 puro, cole aqui: a ferramenta identifica o tipo pelos primeiros bytes, como PNG, JPEG, PDF e ZIP, e mostra a prévia se for imagem.

Outras ferramentas que podem ajudar

Ver tudo em Codificação e segurança