Um ícone de 2 KB não precisa da própria requisição HTTP. Escreva-o na folha de estilo como texto e o navegador tem um arquivo a menos para buscar. Imagem para Base64 transforma um arquivo PNG, JPG, GIF, WebP, BMP ou SVG nesse texto. Também funciona no outro sentido: cole uma string e receba a imagem de volta.
Cinco saídas a partir de um arquivo solto
Solte uma imagem na área de soltar, ou clique na área e escolha um arquivo. A ferramenta mostra uma prévia, o nome do arquivo, o tipo MIME, o tamanho em bytes e o tamanho em pixels. Abaixo há cinco caixas, cada uma com o seu botão de copiar: o data URI, o Base64 bruto, uma tag HTML <img>, uma regra CSS background-image e uma imagem Markdown. Cada caixa também tem um botão que salva o texto dela como arquivo .txt.
Uma pequena imagem de exemplo é carregada quando a página abre, então as caixas nunca ficam vazias.
O nome do arquivo vira o texto alternativo dos trechos HTML e Markdown. Aspas e colchetes angulares no nome são escapados, de modo que um arquivo chamado my "logo".png não quebra a tag.
Por que o texto é um terço maior que o arquivo
O Base64 escreve cada 3 bytes como 4 caracteres. O texto fica, portanto, cerca de 33 % maior que a imagem, e a ferramenta mostra o número exato para o seu arquivo. Uma imagem embutida também não pode ser guardada em cache sozinha, porque vive dentro do arquivo HTML ou CSS. Acima de 100 KB de texto Base64 a ferramenta mostra um aviso. Para uma foto, esse costuma ser o ponto em que um arquivo de imagem normal é a melhor escolha.
Passos do arquivo ao trecho de código
- Mantenha o botão "Imagem para Base64" selecionado.
- Solte a imagem na área de soltar, ou clique na área e escolha o arquivo.
- Confira a prévia e os números.
- Aperte "Copiar" na caixa de que precisa, ou "Baixar .txt" para salvar aquele texto.
Transformando uma string de volta em imagem
Selecione "Base64 para imagem" e cole um data URI completo ou Base64 simples. O alfabeto seguro para URL (- e _), o preenchimento ausente e as quebras de linha são todos aceitos. Um data URI sem ;base64 é lido como texto codificado em porcentagem, o que é comum em SVG.
A ferramenta lê os primeiros bytes para achar o tipo: PNG, JPEG, GIF, WebP e BMP pelas assinaturas, SVG pelo início <svg. Se o data URI nomeia um tipo diferente do que os bytes mostram, a ferramenta avisa e confia nos bytes. O botão de download salva image.png, image.jpg e assim por diante. Um texto que não é Base64 válido recebe uma mensagem de erro, não uma prévia vazia.
O limite de 20 MB e o que fica na sua máquina
A codificação aceita um arquivo por vez, até 20 MB. Um arquivo maior é recusado antes de ser lido. A decodificação para nos mesmos 20 MB de dados de imagem. Para saídas muito longas, as caixas mostram os primeiros 100.000 caracteres e avisam; copiar e baixar sempre usam o texto completo.
Nada sai do navegador. O arquivo é lido com a API de arquivos do próprio navegador, a prévia vem de uma URL blob local e nenhuma requisição é enviada. A ferramenta não guarda nada, então recarregar apaga tudo. A área de transferência só é usada quando você aperta um botão de copiar.