Conversor de imagem para Base64 e vice-versa: gerador de Data URI

Como descobrir o formato da imagem pelo início do Base64

Os primeiros caracteres do Base64 são os primeiros bytes do arquivo, por isso cada formato começa do mesmo jeito. O tamanho do início de AVIF, GIF e JPEG pode variar um pouco de arquivo para arquivo.

Conversor de imagem para Base64: imagem para Data URI e Base64 para imagem

Solte uma imagem PNG, JPG, GIF, WebP, AVIF, SVG, BMP ou ICO e receba a sequência Base64 dela e um data URI pronto, com o código para uma tag de imagem HTML, um fundo CSS e uma imagem em Markdown. A segunda aba faz o oposto: cole Base64, um data URI ou uma tag <img> inteira e veja a imagem, depois baixe-a. Tudo acontece no seu navegador, então a imagem nunca é enviada, e o arquivo não é alterado: o Base64 guarda exatamente os bytes dele.

O que é um data URI

Um data URI coloca um arquivo dentro do próprio endereço, então não é preciso uma requisição separada. Ele se parece com data:image/png;base64,iVBORw0KGgo...: a palavra data:, o tipo MIME do arquivo (image/png), a palavra base64 e, depois da vírgula, o arquivo como texto Base64. A parte image/png precisa corresponder ao arquivo. O tipo MIME certo para JPG é image/jpeg; image/jpg não é um tipo de verdade, embora os navegadores o aceitem.

Como usar uma imagem em Base64 em HTML, CSS e Markdown

• HTML: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">. O conversor acrescenta a largura e a altura para você.
• CSS: background-image: url("data:image/png;base64,iVBORw0KGgo...");, também para list-style-image e content.
• Markdown: ![](data:image/png;base64,iVBORw0KGgo...). Nem todo renderizador de Markdown permite data URIs.
• Link: o mesmo data URI funciona em href, por exemplo para um link de download.

SVG: Base64 ou codificado como URL

O SVG é texto, então não precisa de Base64. Um data URI com o SVG escrito como texto codificado para URL, data:image/svg+xml,%3Csvg ..., é mais curto que data:image/svg+xml;base64,PHN2Zy... e mais fácil de ler em uma folha de estilo. Para um arquivo SVG o conversor mostra os dois.

Que formato é: o início do Base64

O início de uma sequência Base64 mostra o formato do arquivo, porque ele codifica os primeiros bytes do arquivo. Um PNG começa com iVBORw0KGgo, um JPEG com /9j/ (normalmente /9j/4AAQSkZJRgABAQAAAQABAAD), um GIF com R0lGODlh (GIF89a) ou R0lGODdh (GIF87a), um WebP com UklGR e um SVG com PHN2Zy. A tabela abaixo do conversor tem a lista completa. O Base64 R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 é o conhecido GIF transparente de um pixel: use o botão de exemplo na segunda aba para vê-lo.

Base64 para imagem

Cole o Base64 na segunda aba. Pode ser uma sequência solta, um data URI completo, uma tag HTML ou uma regra CSS com url(...), com ou sem as quebras de linha e o = no final. A ferramenta descobre o formato pelos bytes, não pelo texto que vem antes deles, mostra a imagem com o tamanho em pixels e em bytes e a baixa com a extensão certa. Se o texto diz um tipo mas os dados são de outro, você é avisado.

Quando usar imagens em Base64 e quando não usar

• Bom para: ícones pequenos, um espaço reservado, um logotipo em um único arquivo HTML, um arquivo CSS que não pode depender de outros arquivos.
• Ruim para: fotos e imagens grandes. O Base64 deixa os dados cerca de um terço maiores, o navegador não consegue guardar a imagem em cache separada da página e o texto deixa a página mais lenta. Muitos clientes de e-mail nem mostram data URIs.
• Para deixar uma imagem menor antes de codificá-la use o otimizador de imagens ou o conversor de WebP.

Limitações

• Arquivos de até 50 MB. Um Base64 muito longo aparece só em parte nas caixas de texto; os botões de copiar e baixar entregam tudo.
• A imagem é codificada como está, então um GIF ou WebP animado continua animado. A ferramenta não redimensiona nem comprime.
• HEIC e TIFF não são aceitos, e a ferramenta não transforma um formato em outro.
• Para texto e outros arquivos use o codificador e decodificador de Base64.