Eu tenho uma confissão que fará os engenheiros de desempenho estremecerem Em uma versão inicial de um painel do WordPress para WP Adminify, EU base64 codifiquei cada ícone e os alinhei diretamente no CSS porque estava cansado de gerenciar folhas de sprite Os ícones apareceram instantaneamente, sem solicitações extras, sem flash de imagem ausente Então a folha de estilo passou por um megabyte e a página parecia mais lenta na segunda carga, porque nenhuma dessas imagens embutidas poderia ser armazenada em cache por conta própria Esse projeto foi onde aprendi que o & quot; imagem para base64 & quot; é uma técnica genuinamente útil que também é fácil de usar em excesso.
Este guia cobre ambas as metades dessa lição Vou mostrar como converter uma imagem para base64 com o Imagem para o conversor Base64 em Toolz.dev, como decodificar base64 de volta em uma imagem, o que realmente é um URI de dados e as compensações honestas para que você alinhe os ativos que se beneficiam e deixe aqueles que não o fazem.
tl;dr: A conversão de uma imagem para base64 transforma seu conteúdo binário em uma sequência de texto, geralmente envolvida em um URI de dados como
data:image/png;base64,iVBORw0KG.... Essa string incorpora diretamente em HTML, CSS, SVG ou JSON sem solicitação de arquivo separada O conversor Toolz.dev codifica e decodifica em ambas as direções, é executado inteiramente em seu navegador para que nenhuma imagem seja carregada e fornece a base bruta64, um URI de dados prontos, um<img>tag, e um trecho CSS Base64 infla o tamanho em cerca de um terço, então inline pequenos ativos como ícones, não fotos grandes.
O que é uma imagem base64, exatamente?
Base64 é um esquema de codificação, não de compressão e não de encriptação O esquema é definido por RFC 4648, e o data: URI que envolve RFC 2397. Representa dados binários arbitrários usando 64 caracteres ASCII imprimíveis: as letras A a Z e a a z, os dígitos de 0 a 9, mais + e /, com = usado para preenchimento O esquema é definido na RFC 4648, o mesmo padrão que rege a base64 que você vê em anexos de e-mail e cargas JSON.
A razão pela qual existe é que muito do encanamento do internet' s foi construído para texto, não para bytes brutos Os dados binários podem conter valores de bytes que um canal orientado a texto irá mangle Base64 contorna que, tomando três bytes de entrada, dividindo esses 24 bits em quatro grupos de seis, e mapeando cada grupo para um dos 64 caracteres Três bytes em, quatro caracteres fora Essa proporção de três para quatro é exatamente por isso que a saída codificada é cerca de 33 por cento maior do que a fonte, um número que vale a pena memorizar porque decide se o inlining é uma boa ideia.
Um & quot; base64 image" é simplesmente um ficheiro de imagem que foi executado através dessa codificação Por si só a cadeia é apenas texto O que a torna renderizável é envolvê - la num URI de dados.
O que é um URI de dados e por que o navegador o renderiza?
Um URI de dados é uma URL que carrega sua carga inline em vez de apontar para um recurso remoto Sua forma, definida na RFC 2397, é data:[<media-type>][;base64],<data>. Para uma PNG que se pareça data:image/png;base64,iVBORw0KGgo....
A peça importante é o tipo de mídia, image/png nesse exemplo Ele diz ao navegador como interpretar os bytes que se seguem Como o URI de dados anuncia seu próprio tipo MIME, um navegador pode tratar data:image/png;base64,... como imagem, no instante em que analisa um atributo que espera uma URL, seja ela src de um <img> ou o url() em um CSS background-image. Nenhuma viagem de ida e volta em rede acontece, porque não há nada para buscar A imagem já está lá, soletrada na marcação.
Essa é toda a magia e todo o custo em uma frase A imagem já está lá, e é por isso que ela renderiza instantaneamente, e também por que ela não pode ser armazenada em cache separadamente ou compartilhada entre páginas da maneira que um arquivo vinculado pode.
Como converto uma imagem para base64 em Toolz.dev?
o Imagem para o conversor Base64 tem duas direções e a codificação é o padrão.
Escolha a & quot; Imagem para Base64 & quot; direção, depois carregue ou solte sua imagem A ferramenta lê o arquivo localmente usando a API de arquivo do navegador e, como essa leitura acontece no seu navegador, a imagem nunca viaja para um servidor Depois de carregada, você obtém uma visualização mais quatro saídas, cada uma com seu próprio botão de cópia.
A base64 bruta é a string nua, útil quando você já tem seu próprio wrapper O URI de dados é o completo data:... string pronto para colar em um src ou url(). O HTML <img> tag é um elemento completo que você pode soltar em um modelo O CSS background-image declaração está pronto para uma folha de estilo Ao lado daqueles que você vê o tamanho do byte decodificado e a contagem de caracteres base64, para que você possa julgar o peso antes de cometer Se o número parece alarmante, que é a ferramenta fazendo o seu trabalho: uma foto de 200 KB tornando-se uma cadeia de 270 KB em seu HTML é exatamente o momento para reconsiderar.
Como decodifico base64 de volta em uma imagem?
Mude para o & quot; Base64 para Image" direcione e cole uma string base64 bruta ou um URI de dados completo. O conversor é tolerante com a entrada: retira espaços em branco e se você colar um espaço completo data:image/png;base64,... string ele lê o tipo MIME diretamente fora do prefixo Se você colar base64 nu sem prefixo ele assume PNG, que é o padrão seguro para a maioria das capturas de tela e ativos exportados.
Ele valida a string primeiro Se o que você colou não é plausível base64, o que significa que ele contém caracteres fora do alfabeto RFC 4648, a ferramenta diz a você em vez de mostrar uma imagem quebrada Quando a entrada é verificada, você obtém uma visualização ao vivo e um botão de download que reconstrói o arquivo binário original e salva-o com a extensão certa Esta direção é genuinamente útil quando você encontra um URI de dados enterrado em uma folha de estilo ou uma resposta de API e deseja ver o que ele realmente é, ou extraí-lo de volta para um arquivo real.
Tudo aqui é do lado do cliente, que é a mesma promessa que percorre o resto da caixa de ferramentas, desde a orientada para o texto conversor de base64 ao codificador de url. Se você deseja o raciocínio mais amplo por trás de manter esse tipo de trabalho no navegador, o guia de codificação Base64 aprofunda a codificação em si.
Quando devo alinhar uma imagem como base64 e quando não devo?
Esta é a decisão que a ferramenta existe para informar, então aqui está a tabela que realmente uso.
| situação | Inline como base64? | por que |
|---|---|---|
| Pequeno ícone ou logotipo usado em todo o site | Frequentemente sim | Remove uma solicitação, aparece instantaneamente, a sobrecarga é pequena |
| Fundo minúsculo de SVG ou 1 px | sim | A sobrecarga de 33% é insignificante em algumas centenas de bytes |
| Exportação ou e-mail HTML de arquivo único | sim | O arquivo deve ser independente, sem permissão de ativos externos |
| Grande foto de herói ou banner | não | A sobrecarga é grande e a imagem não pode ser armazenada em cache separadamente |
| Imagem reutilizada em muitas páginas | não | Um arquivo vinculado é armazenado em cache uma vez e é compartilhado; o inlining o duplica em todos os lugares |
| Imagem de conteúdo que muda frequentemente | não | Os editores não podem trocar um blob base64 tão facilmente quanto um arquivo |
O padrão por trás da tabela é simples Inlining negocia uma solicitação de rede para bytes em seu documento Essa negociação ganha quando o ativo é pequeno e a solicitação salva importa, que é o caso clássico para ícones acima da dobra Ele perde quando o ativo é grande ou compartilhado, porque você paga o imposto de 33 por cento, perde o cache independente e incha o próprio arquivo que o navegador deve analisar antes que ele possa pintar qualquer coisa.
Para as linhas do & quot; no", o melhor movimento é normalmente optimizar o ficheiro e servi - lo normalmente É aí que uma ferramenta como imagem compactar ou o conversor de formato ganha seu sustento, encolhendo o ativo para que a versão vinculada seja o mais leve possível Eu escrevi mais sobre todo esse fluxo de trabalho no Kit de ferramentas para desenvolvedores web guia.
A base64 mantém minha imagem privada?
Sim e não, e a distinção importa Base64 é uma codificação, por isso qualquer pessoa que tenha a cadeia pode descodificá - la de volta para a imagem original exacta Ele fornece segredo zero Não trate um URI de dados como uma forma de esconder nada, porque o & quot; Base64 para Image" direcção desta mesma ferramenta inverte - o numa pasta.
O que é privado é a conversão em si No Toolz.dev a imagem é lida e codificada inteiramente no seu navegador com a API File, e nada é carregado Então a arte, a captura de tela, o logotipo do cliente que você está codificando nunca sai da sua máquina durante o processo Isso é uma garantia diferente da codificação escondendo o conteúdo, e EU tento ser preciso sobre isso porque o & quot; private" é jogado em torno de forma vaga A privacidade está no processamento local, coberto de forma mais ampla no privacidade dados guia, não na base 64 como esquema.
Algumas dicas práticas de envio deste
Prefira SVG para ícones quando puder, e inline a marcação SVG diretamente em vez de codificá-la com base64 SVG já é texto, então envolvê-lo em base64 adiciona apenas o imposto de 33 por cento para nada Base64 brilha para formatos raster como PNG e JPEG que são genuinamente binários.
Assista ao tamanho total do documento, não apenas a imagem única Um ícone embutido é invisível Quarenta deles, o erro que cometi naquele painel do WordPress, transforme uma folha de estilo enxuta em um monstro Se você estiver embutindo mais de um punhado, isso é um sinal para recuar e considerar um sprite vinculado ou uma fonte de ícone em vez disso.
Mantenha o tipo MIME honesto Se você exportar um JPEG, mas rotular seus dados como URI image/png, alguns navegadores lidam com a situação e outros não. O conversor detecta o tipo real do arquivo para que a saída esteja correta, mas se você montar manualmente um URI de dados em outro lugar, combine o tipo de mídia com os bytes reais.
E quando herdar uma base de código cheia de URIs de dados misteriosos, lembre - se da direcção de descodificação Colar uma no & quot; Base64 para Image" lado e bater no download é a maneira mais rápida de ver o que uma folha de estilo está realmente a enviar.
Como a codificação base64 realmente funciona, passo a passo?
Ajuda a ver a mecânica uma vez, porque toda a história de sobrecarga de 33 por cento cai fora dela naturalmente Base64 funciona em grupos de três bytes de cada vez Três bytes é de 24 bits O codificador corta esses 24 bits em quatro pedaços de seis bits cada Seis bits podem representar 64 valores, de 0 a 63, e cada um desses valores mapeia para um caractere no alfabeto base64: A a Z para 0 a 25, a a z para 26 a 51, os dígitos de 0 a 9 para 52 a 61, então + para 62 e / para 63.
Então três bytes de entrada sempre se tornam quatro caracteres de saída Essa é a fonte do aumento de tamanho Quatro caracteres carregam a informação de três bytes, uma proporção de 4 para 3, que é o mesmo que dizer que a saída é um terço maior do que a entrada Não há como contorná-la, porque está incorporada em como o esquema funciona.
O preenchimento lida com as sobras Se seus dados não forem um múltiplo limpo de três bytes, o codificador preenche o grupo final para que ele ainda produza um número inteiro de caracteres e anexe um ou dois = sinais para gravar quanto preenchimento ele adicionou É por isso que as strings base64 tão frequentemente terminam em = ou ==. Um único rastro = significa que o último grupo continha dois bytes; um duplo == significa que ele segurou um O conversor Toolz.dev lida com o preenchimento automaticamente em ambas as direções, e ao decodificá-lo aceita alegremente strings com ou sem o trailing =, porque alguns sistemas o eliminam.
Você poderá ver esta jogada fora com um exemplo minúsculo Os três bytes ASCII para as letras & quot; Man" codificam para os quatro caracteres & quot; TWFu", um exemplo famoso directamente fora da literatura de codificação Largue esses mesmos três caracteres num URI de dados como texto e poderá ver a viagem de ida e volta, ou executar uma imagem real através da ferramenta e notar que a contagem de caracteres na saída é sempre cerca de quatro terços da contagem de bytes mostrada ao lado dela.
Entender isso também explica por que o base64 é um ajuste ruim para imagens grandes e um ajuste fino para imagens minúsculas A sobrecarga é uma porcentagem fixa, então em um ícone de 300 bytes custa 100 bytes, ninguém se importa Em uma foto de dois megabytes custa dois terços de um megabyte de inchaço de texto puro em seu documento, e esse documento tem que ser baixado e analisado antes que a página possa renderizar A matemática não muda com o tamanho, mas as consequências o fazem.
Perguntas frequentes
Como faço para converter uma imagem para Base64?
Escolha a direção Imagem para Base64, depois carregue ou solte sua imagem A ferramenta lê o arquivo localmente, codifica-o e retorna o Base64 bruto mais um URI de dados pronto para uso, uma tag img e um snippet CSS que você pode copiar.
O que é um URI de dados?
Um URI de dados é uma string que incorpora um arquivo embutido em vez de vincular a ele, nos dados do formulário: [tipo mime];base64, [dados]. Para um PNG parece dados: imagem/png; base64,iVBORw0KGgo... Os navegadores o renderizam como uma imagem onde quer que uma URL seja esperada, portanto, nenhuma solicitação separada é necessária.
Posso converter Base64 de volta para uma imagem?
Sim. Mude para a direção Base64 para Imagem e cole uma string Base64 bruta ou um URI de dados completo. A ferramenta decodifica-o, mostra uma visualização e permite baixar o arquivo de imagem reconstruído.
Quais formatos de imagem são suportados?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO e AVIF são todos suportados O tipo MIME correto é detectado a partir do arquivo para que o URI de dados resultante seja renderizado corretamente.
Por que a string Base64 é maior que a minha imagem?
Base64 representa três bytes de dados binários com quatro caracteres de texto, então a saída codificada é cerca de 33 por cento maior que a fonte Essa sobrecarga é a razão pela qual Base64 se adapta mais a pequenos ícones e logotipos do que a grandes fotografias.
É seguro converter imagens aqui?
Sim. Cada imagem é lida e codificada inteiramente no seu navegador usando a API de arquivo Nenhum arquivo, string ou resultado é carregado em um servidor, portanto, imagens privadas permanecem no seu dispositivo.
Devo inserir imagens como Base64 em produção?
O inlining funciona bem para ativos pequenos e usados com frequência, como ícones, porque remove uma solicitação HTTP e evita um flash de imagem ausente. Para imagens grandes, geralmente é melhor manter arquivos separados para que o navegador possa armazená-los em cache de forma independente.
O conversor funciona offline e móvel?
Sim. Como todo o processamento é do lado do cliente, ele funciona após a página ter carregado mesmo sem conexão, e a interface é responsiva em navegadores modernos de desktop e móveis.
