WebyTooly

Imagem para Base64

Carregue uma imagem e obtenha a sua representação em Base64, com a variante pronta a colar em CSS ou numa etiqueta img.

Espacio publicitario

Arraste a sua imagem aqui ou clique para escolher

Aceita qualquer formato de imagem, incluindo SVG e GIF

Espacio publicitario

O que é Base64 e quando compensa usá-lo

O Base64 representa dados binários usando apenas 64 carateres imprimíveis. Cada 3 bytes do ficheiro tornam-se 4 carateres de texto, por isso o resultado ocupa cerca de 33 % mais do que a imagem original.

comprimento Base64 ≈ ceil(bytes ÷ 3) × 4

Lemos o ficheiro com FileReader.readAsDataURL, que devolve o binário exato codificado, sem recomprimir nem tocar nos píxeis. Por isso o data URI mantém o formato e a qualidade originais.

sobrecarga % = (comprimento do texto − bytes) ÷ bytes × 100

Um data URI evita um pedido HTTP, o que compensa em ícones muito pequenos incorporados em CSS. Para imagens grandes é contraproducente: engorda o HTML ou o CSS, não é colocado em cache em separado e atrasa a renderização.

Exemplo prático

Um ícone PNG de 900 bytes torna-se cerca de 1200 carateres de Base64 (mais 33 %), que pode colar diretamente na folha de estilos e poupar um pedido ao servidor.

Perguntas frequentes

O Base64 comprime a imagem?
Não, pelo contrário: aumenta-a sempre cerca de 33 %. Serve para incorporar a imagem dentro de um ficheiro de texto, não para reduzir o peso.
Quando vale a pena incorporar uma imagem?
Com ícones e padrões de poucos kilobytes usados em todas as páginas. A partir de uns 5-10 KB costuma ser melhor um ficheiro à parte, com cache independente.
A minha imagem é alterada?
Não. São codificados os bytes exatos do ficheiro original, por isso o formato, a qualidade e os metadados mantêm-se intactos.
Posso usar com SVG?
Sim, e funciona bem porque os SVG costumam ser pequenos. Para SVG também existe a opção de o incorporar sem codificar, mas o Base64 é o mais compatível.

Calculadoras relacionadas