Fixe aqui as ferramentas. Ficam guardadas neste navegador.
Fixe uma ferramenta e o autocolante dela aparece aqui.
Transforme uma imagem num data URI pronto para CSS ou HTML, ou transforme um data URI de volta num ficheiro de imagem.
Um data URI leva um ficheiro dentro do próprio endereço: data:image/png;base64,iVBORw0KGgo…. A seguir a data: vem o tipo de media, depois um marcador ;base64 opcional que indica como o conteúdo está codificado e, por fim, o conteúdo depois de uma vírgula. Em qualquer sítio onde um navegador aceite o URL de uma imagem, como src em HTML ou url() em CSS, aceita também um data URI e mostra a imagem sem mais nenhum pedido. O formato está definido no RFC 2397.
O Base64 escreve cada 3 bytes como 4 caracteres, por isso a imagem codificada fica cerca de 33% maior do que o ficheiro. Uma imagem incorporada fica também presa ao documento que a contém: o navegador não a consegue guardar em cache à parte, e ela é transferida de novo com cada página ou folha de estilos que a repete.
Isto faz dos data URIs uma boa escolha para algumas imagens pequenas, como um ícone de um ou dois kilobytes ou um placeholder, e uma má escolha para fotografias. A ferramenta avisa-o quando o resultado ultrapassa cerca de 10 KB.
Um ficheiro SVG é texto, por isso pode entrar num data URI como texto: data:image/svg+xml;charset=utf-8,…. Só alguns caracteres têm de ser codificados com percent-encoding: os que terminariam o URL ou as aspas à volta dele, e os que um URL não consegue levar tal como estão. Um # sem escape, frequente em valores de cor, inicia o fragmento do URL e deixa a imagem incompleta. Esta ferramenta faz o escape de %, #, <, >, ", &, da barra invertida, dos espaços em branco e dos caracteres de controlo, e escreve os caracteres fora do ASCII como escapes UTF-8. Descodificar o resultado devolve o mesmo texto SVG. A forma em texto é oferecida quando o ficheiro é UTF-8 válido.
A forma codificada para URL continua legível e, como continua a ser texto simples, o gzip e o Brotli costumam comprimi-la melhor do que o Base64. Qual das formas é mais curta antes da compressão depende do ficheiro, por isso a ferramenta mostra os dois tamanhos.
A imagem é lida pelo seu navegador e codificada por JavaScript no seu dispositivo. A direção inversa funciona da mesma forma: o data URI colado é descodificado na página e oferecido como ficheiro. Nem a imagem nem o data URI são enviados.
Não. O ficheiro é lido e codificado pelo seu navegador, e a ferramenta não faz nenhum pedido de rede com ele. O mesmo acontece com um data URI que cole para o transformar de volta num ficheiro.
O Base64 representa cada 3 bytes do ficheiro com 4 caracteres de texto, o que acrescenta cerca de 33%. O pequeno cabeçalho no início, como data:image/png;base64, acrescenta mais alguns bytes.
Quando a imagem é pequena, na ordem de alguns kilobytes, e é necessária logo que a página é desenhada, de modo que poupar um pedido importa mais do que a cache. As imagens maiores, e as imagens partilhadas por muitas páginas, servem-se melhor como ficheiros separados.
Sim. Coloque-o dentro de url("…") em CSS ou no atributo src de um elemento img. Se o site enviar uma Content-Security-Policy, a política tem de permitir data: como origem de imagens, em img-src ou em default-src, para que a imagem apareça.