Ferramentas de desenvolvedor · Codificador e decodificador Base64
URIs de dados explicados: como data:image/png;base64 funciona e de onde veio
· Fundo
base64 codificação
O esquema data: URL foi especificado em 1998 como uma forma de incorporar pequenos recursos diretamente em uma página. Este post explica sua gramática, por que o Base64 é opcional e onde os navegadores estabelecem limites.
O favicon que era um personagem 1,300 URL — encontrando um data: URI em estado selvagem e lendo suas partes
Um dado: URI incorpora um pequeno recurso diretamente em um URL, evitando uma solicitação HTTP separada. O formato é especificado em RFC 2397 (definido em 1998) e usa uma gramática com um esquema, tipo de mídia opcional, sinalizador de codificação opcional e a própria carga útil. Por exemplo, data:text/plain,hello é um dado de texto simples URI contendo a palavra olá. O navegador processa isso da mesma forma que processa uma solicitação HTTP, mas em vez de buscar o conteúdo pela rede, ele o decodifica do próprio URL.
URIs de dados são mais comuns para imagens pequenas, ícones CSS e acessórios de teste. Um data: URI com codificação Base64 se parece com isto: data:image/png;base64,iVBORw0K.... A divisão é: data: é o esquema; image/png é o tipo de mídia; ;base64 é o sinalizador de codificação; a string longa são os bytes da imagem codificados em Base64. Quando um navegador vê este URL, ele decodifica o Base64 para recuperar os bytes originais e, em seguida, renderiza a imagem usando esses bytes.
Lendo dados URI de sua gramática visível - tipo de mídia, marcador Base64 opcional e carga útil
Se o sinalizador de codificação for omitido (data:text/html,<p>hello</p>), a carga útil será texto UTF-8 codificado em porcentagem, não base64. A presença de ;base64 informa ao navegador qual regra de decodificação aplicar. O tipo de mídia em um dado: URI é um tipo MIME, a mesma string de tipo usada em cabeçalhos Content-Type HTTP. image/png, text/plain, application/json e image/svg+xml são exemplos comuns. Se nenhum tipo de mídia for especificado, o padrão será text/plain;charset=US-ASCII.
Um navegador deve determinar como renderizar os bytes com base no tipo de mídia: se disser image/png, os bytes são PNG; se disser text/html, o conteúdo é HTML. Especificar o tipo de mídia errado pode produzir resultados confusos; um arquivo PNG rotulado como text/plain será exibido como caracteres inúteis em vez de uma imagem. Base64 é opcional em dados: URI. Para conteúdo de texto, a codificação percentual (a mesma codificação usada nas strings de consulta URL) geralmente é mais compacta que base64. Um consumidor de dados URI decide como interpretar a carga útil do tipo de mídia e do marcador antes da vírgula. O codificador Base64 fornece apenas os caracteres de carga útil. Não adiciona um tipo MIME, escolhe se os bytes descrevem PNG ou SVG, nem valida o endereço montado.
Por que Base64 é opcional — cargas úteis de texto codificadas por porcentagem para SVG e texto simples versus Base64 para binário
O URI data:text/html,<p>Hello</p> contém o HTML como caracteres literais (com codificação percentual para quaisquer caracteres especiais, como aspas ou colchetes angulares). Base64 é útil para dados binários que não podem ser representados como texto e para casos em que a carga útil contém muitos caracteres especiais que a codificação percentual aumentaria. Um pequeno SVG ou um arquivo de texto pode ter uma codificação percentual menor; um arquivo binário deve ser base64. Construir um data: URI manualmente requer o conhecimento do tipo de mídia e da codificação.
Para um ícone SVG, você pode usar data:image/svg+xml seguido pela marcação SVG codificada por porcentagem ou ;base64 e bytes codificados em base64. Para codificação percentual, envolva SVG em data:image/svg+xml, e codifique por cento quaisquer colchetes angulares, aspas e outros caracteres especiais. O resultado é longo, mas legível por humanos. Para base64, pegue os bytes SVG, codifique-os em base64 e produza data:image/svg+xml;base64, e anexe a string base64. Base64 geralmente é mais compacto para binário, mas para texto SVG, o formato codificado em porcentagem pode ser mais curto.
Exemplo resolvido: construindo um data: URI para um pequeno SVG manualmente - codificando a marcação como texto e montando a string
Os navegadores e os aplicativos de consumo podem impor limites ou restrições de política aos URIs de dados, mas este repositório não estabelece um limite numérico portátil. O uso da memória, o comportamento do analisador e a política de segurança também dependem de onde o valor aparece, portanto, teste o navegador de destino exato e o contexto de incorporação em vez de confiar em um limite lembrado.
Uma imagem incorporada 5 MB em cada arquivo HTML aumentaria o tamanho da página. URIs de dados são melhores para recursos pequenos: ícones CSS, imagens pequenas ou dados de teste. Para arquivos grandes, uma solicitação externa é mais rápida porque o navegador pode armazenar a resposta em cache e reutilizá-la em várias páginas; um dado: URI é embutido toda vez que a página é carregada.
Os limites do navegador e da segurança devem ser verificados no aplicativo consumidor, em vez de assumir
Um limite comum é de alguns kilobytes; abaixo disso, dados: URIs são eficientes; acima disso, os arquivos externos geralmente são mais rápidos. As políticas de segurança e do navegador restringem o uso de dados: URI em determinados contextos. Uma navegação de nível superior (clicar em um link que aponta para dados: URI com conteúdo HTML) geralmente é bloqueada para evitar phishing. Um data: URI em um atributo src de script pode executar JavaScript arbitrário, criando um risco de segurança.
Os navegadores aplicam regras da Política de Segurança de Conteúdo (CSP) aos dados: URIs; um CSP estrito pode proibi-los totalmente. Um data: URI em um img src ou iframe src geralmente é permitido, mas incorporado em um estilo ou contexto de script pode ser restrito. Sempre verifique a compatibilidade do navegador e a política de segurança do seu ambiente de destino. URIs de dados em CSS são comuns para pequenas imagens de fundo. A sintaxe é a mesma: url(data:image/png;base64,...).
Onde dados: URIs ainda são a ferramenta certa — ícones CSS, imagens inline seguras para e-mail e acessórios de teste
Um arquivo CSS com dados incorporados: os URIs podem ser enviados como um único arquivo com todas as imagens incluídas, reduzindo as solicitações HTTP. Isto é útil para pequenos conjuntos de ícones ou gráficos simples. Imagens grandes incorporadas em CSS incham o arquivo e retardam sua análise. Ferramentas de construção modernas (como webpack) podem converter automaticamente imagens pequenas em dados: URIs em CSS e imagens externas em URLs normais, equilibrando o desempenho.
O formato data: URI é definido por RFC 2397, um documento curto que especifica a gramática, mas não define onde os dados: URIs podem ou não ser usados. Os fornecedores de navegadores adicionaram suas próprias restrições com base em questões de segurança e desempenho.
O que isso não cobre — blob: URLs, URLs de objetos e acesso ao sistema de arquivos
Alguns sistemas têm dados obsoletos: suporte URI em determinados contextos (como ação de formulário no nível CSP 3) para evitar abusos. Ao usar dados: URI, teste-os no navegador de destino; o RFC diz que o formato é válido, mas a política de segurança do navegador pode bloqueá-lo.
Criar data: URI manualmente é incomum na produção; a maioria das ferramentas e bibliotecas de construção cuidam da conversão. Mas compreender o formato é útil para depuração. Se você vir um data:image/... URL longo em seu CSS ou HTML, você pode decodificá-lo com a ferramenta de codificador e decodificador Base64: remova o prefixo data:image/...;base64,, cole a string restante na ferramenta e decodifique-a para ver os bytes reais.
Conclusão: um formato pequeno com gramática estrita — como o codificador e decodificador Base64 lida com a etapa de codificação de texto para que você possa montar um URI válido
Para dados SVG: URIs, você pode decodificar percentualmente o formato de texto e ler a marcação XML. Compreender a anatomia de um dado: URI facilita a solução de problemas de recursos incorporados. URIs de dados são um padrão da Web (RFC 2397) que permite incorporar recursos diretamente como URLs. Eles são mais eficientes para recursos pequenos e estáveis que não se beneficiam do armazenamento em cache separado. O formato inclui especificação opcional de tipo de mídia e um sinalizador de codificação (base64 ou codificação percentual implícita).
A codificação Base64 é necessária para dados binários, mas opcional para texto; SVG codificado em porcentagem pode ser mais legível. As políticas de segurança do navegador limitam onde os dados: URIs podem ser usados, portanto, é essencial compreender as restrições em seu ambiente de destino. A ferramenta codificador e decodificador Base64 pode ajudá-lo a codificar manualmente um recurso ou decodificar um URI incorporado para inspecionar seu conteúdo.