Codificador de Imagem Base64

O que é a codificação de imagem em Base64?

A codificação de imagem em Base64 converte dados binários de uma imagem em uma string ASCII que pode ser incorporada diretamente em HTML, CSS ou JSON sem referenciar um arquivo externo. O resultado é um data URI — uma string autocontida que começa com data:image/png;base64, seguida pelos bytes codificados em Base64 da imagem. Os navegadores tratam data URIs exatamente como URLs de imagens externas: decodificam o payload Base64 e renderizam a imagem inline.

A técnica é definida pela RFC 2397 (esquema data URI) e pela RFC 4648 (codificação Base64). Quando uma imagem é codificada em Base64, cada 3 bytes de dados binários de pixel se transformam em 4 caracteres ASCII, aumentando o tamanho do payload em aproximadamente 33%. Apesar desse overhead, imagens inline eliminam uma requisição HTTP por recurso — uma otimização relevante quando as imagens são pequenas (ícones, logos, pixels de rastreamento 1x1) e a latência de ida e volta de uma requisição separada superaria o custo dos bytes extras.

Data URIs são suportados em todos os navegadores modernos, clientes de email (com ressalvas) e em qualquer contexto que aceite sintaxe URI padrão. São amplamente usados em single-page applications, templates de email HTML, sprites SVG e declarações CSS background-image, onde reduzir o número total de requisições de rede melhora o tempo de carregamento percebido.

Por que usar este Codificador de Imagem Base64?

Esta ferramenta converte qualquer imagem em um data URI pronto para uso diretamente no seu navegador — sem upload, sem servidor, sem cadastro.

Casos de uso da codificação de imagem em Base64

Estrutura do data URI

Um data URI codifica o formato da imagem e o conteúdo binário em uma única string. Entender sua estrutura ajuda na construção ou análise de data URIs de forma programática:

Comparação de formatos de imagem para codificação Base64

A escolha do formato de imagem afeta o tamanho da saída Base64, o suporte do navegador e as características de renderização. Use o formato que melhor se adequa ao tipo de conteúdo:

Exemplos de código

Como converter imagens para data URIs Base64 nas linguagens e ambientes mais populares:

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Perguntas frequentes