UltKit

Converter imagem em Base64

Transforme um arquivo de imagem numa linha de texto que você cola em HTML, CSS, numa requisição JSON ou num arquivo Markdown, já com o prefixo data URI na frente, para funcionar assim que for colada.

Conversor de dados

ou solte arquivos CSV, TSV, TXT … aqui ·

Até 95 MB por arquivo· Até 20 arquivos· Apagados após 30 minutos

Saída

Os arquivos são processados em nossos servidores e apagados após 30 minutos.

Como usar esta ferramenta

  1. 1

    Adicione as imagens

    Solte arquivos PNG, JPG, GIF, WebP ou SVG na área de envio, até 20 por vez e 95 MB cada.

  2. 2

    Mantenha ou tire o prefixo

    Prefixo data URI está ligado, então o resultado começa com data:image/png;base64, ou o tipo correspondente. Desligue-o em Configurações avançadas quando uma API quiser só a string Base64 pura.

  3. 3

    Converta e copie

    Clique em Converter para Texto Base64 e baixe um arquivo .txt por imagem, pronto para colar no seu código.

Envie a imagem e clique em Converter para Texto Base64. Você recebe o arquivo codificado em caracteres simples, começando com data:image/…;base64, para ir direto num img src ou num url() do CSS. Nada na imagem muda.

Onde uma imagem em Base64 é útil

O Base64 é definido na RFC 4648 (2006) e mapeia cada 3 bytes de dados binários em 4 caracteres de um alfabeto de 64: A–Z, a–z, 0–9, + e /. O resultado atravessa qualquer canal feito para texto. O esquema data URI, descrito por Larry Masinter na RFC 2397 em 1998, permite então que o navegador trate esse texto como um arquivo.

Desenvolvedores front-end embutem ícones pequenos, animações de carregamento e imagens provisórias para que a página renderize sem requisições extras. Desenvolvedores back-end enviam imagens dentro de JSON, porque muitas APIs, incluindo serviços de visão computacional e OCR, aceitam a imagem como um campo Base64. Testadores guardam fixtures no código-fonte, e quem monta relatórios HTML em arquivo único ou notas em Markdown embute capturas de tela para que o arquivo continue autossuficiente quando é enviado por e-mail ou arquivado.

Como fica a saída da imagem em Base64

Um PNG transparente de 1 × 1 (68 bytes) como data URI dentro de uma tag img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="pixel transparente">

Arquivo de ícone PNG

24 KB

conjunto típico de ícones de barra de ferramentas, 96 × 96 px

+33% de tamanho, qualidade intacta

Texto Base64

32 KB

4 caracteres a cada 3 bytes, mais o prefixo

ANY I

Qualquer imagem

Esta ferramenta aceita os formatos de imagem comuns, incluindo JPG, PNG, WebP, HEIC, GIF, BMP e TIFF. O formato é detectado automaticamente a partir do arquivo, então você não precisa saber que tipo de imagem tem.

Conversor de Any image

BASE64

Texto codificado em Base64

Base64 é uma codificação, definida na RFC 4648, que transforma quaisquer dados binários em uma sequência de 64 caracteres de texto seguros. Ela é usada para incorporar imagens em HTML e CSS como data URIs, anexar arquivos a e-mails e enviar dados binários em JSON ou XML. A codificação é totalmente reversível, mas deixa os dados cerca de 33% maiores. Base64 não é criptografia e não oferece nenhuma segurança; qualquer pessoa pode decodificá-lo.

Compressão
Sem perdas
Transparência
–
Animação
–
Lançamento
–
Conversor de BASE64

Imagens viram texto Base64 quando precisam viajar dentro de algo que só carrega texto: um arquivo HTML ou CSS sem requisição separada, um campo JSON de uma chamada de API, um fixture de teste ou um relatório em arquivo único.

Quando embutir uma imagem ajuda a página, e quando atrapalha

Embutir economiza uma requisição, o que pesava mais no HTTP/1.1, quando os navegadores abriam poucas conexões por site. Com a multiplexação do HTTP/2 e do HTTP/3, requisições pequenas extras saem baratas, então o ganho diminui enquanto os custos continuam: a imagem codificada não pode ser guardada em cache separadamente, é baixada de novo sempre que o HTML ou o CSS muda e atrasa a leitura do arquivo onde está.

Uma regra sensata é embutir só imagens de poucos kilobytes que aparecem em todas as páginas, como um logo ou um sprite de ícones, e servir todo o resto como arquivo. Fotos quase nunca devem ser embutidas. Se o que você precisa de fato é outro tipo de arquivo, e não texto, o conversor de imagens resolve isso.

Vantagens da imagem em Base64

  • Um único arquivo HTML, CSS ou JSON autossuficiente
  • Nenhuma requisição extra para ícones minúsculos
  • Seguro dentro de JSON, XML e outros formatos de texto
  • Sem perdas e reversível

Custos da imagem em Base64

  • Cerca de 33% maior que o arquivo binário
  • Não fica em cache separado no navegador
  • Bloqueado como imagem por muitos clientes de e-mail
  • Difícil de revisar em diffs de código

Perguntas sobre imagem em Base64

Qual a diferença entre Base64 e data URI numa imagem?

Base64 são só os caracteres codificados. Um data URI os envolve com um esquema e um tipo, data:image/png;base64, seguidos dos caracteres, para que o navegador saiba como decodificar e exibir. HTML e CSS precisam do data URI completo; a maioria das APIs JSON quer só a parte Base64.

Quanto uma imagem aumenta ao virar Base64?

O Base64 escreve 4 caracteres para cada 3 bytes, então o texto fica cerca de um terço maior que o arquivo, mais o prefixo curto. Um PNG de 30 KB vira uns 40 KB de texto. Se o HTML ou o CSS for servido com compressão gzip, parte desse acréscimo é recuperada na transferência.

Posso usar uma imagem Base64 na assinatura de e-mail?

Não é confiável. O Gmail não exibe imagens em data URI, e vários programas de e-mail para desktop também as removem, então o destinatário vê um ícone quebrado. Hospede a imagem num servidor web ou anexe-a, e deixe o Base64 para páginas e aplicativos.

Vale a pena codificar um ícone SVG em Base64?

Funciona, mas o SVG já é texto. Codificar a marcação para URL em vez de Base64 costuma gerar um data URI mais curto e legível. Para qualquer coisa maior que um ícone pequeno, um arquivo SVG separado, que o navegador pode guardar em cache, é a melhor escolha.

Dá para converter o texto Base64 de volta em imagem?

Sim, a codificação é sem perdas e totalmente reversível: decodificar devolve exatamente os bytes originais. Toda linguagem de programação traz um decodificador, e colar um data URI completo na barra de endereços do navegador mostra a imagem.

Codificar em Base64 muda a qualidade da imagem?

Não. O Base64 muda a forma como os bytes são escritos, não os pixels. Para encurtar a string, reduza a imagem antes, por exemplo com comprimir imagem para 20 KB, e codifique o arquivo menor.