Data URLs: data:text/html;base64 e outros, explicados
Data URLs (URIs data:)
Data URI e data:text/html;base64 explicados, com codificador | We.Inc
Como funcionam as URLs data:: a sintaxe, base64 vs percent-encoding, o custo de um terço a mais, por que data:text/html não abre em uma aba, além de um codificador e um decodificador.
Uma data URL carrega um arquivo inteiro dentro do próprio endereço: data:, um media type opcional, ;base64 se os bytes estiverem em base64, uma vírgula e então o conteúdo. data:text/html;base64,PGgxPkhpPC9oMT4= é uma pequena página web. O base64 deixa o conteúdo cerca de um terço maior, e os navegadores se recusam a abrir páginas data: como uma aba de nível superior.
Anatomia de uma data URL
Parte
Exemplo
Observações
Esquema
data:
Sempre primeiro
Media type
image/svg+xml
Opcional; o padrão é text/plain;charset=US-ASCII
Parâmetros
;charset=utf-8
Opcionais, depois do media type
Indicador de codificação
;base64
Presente só quando os dados estão em base64
Separador
Obrigatório, mesmo sem media type
Dados
PHN2Zz4uLi48L3N2Zz4=
Base64, ou texto com percent-encoding
Data URLs são práticas para ícones minúsculos, fundos em CSS, fixtures de teste e downloads gerados, e uma fonte comum de confusão quando alguém cola uma longa string data:text/html na barra de endereços e nada acontece. Abaixo você pode codificar qualquer texto em uma data URL, decodificar uma de volta e ver exatamente quanto ela custa em bytes em comparação com o original.
Digite ou cole o conteúdo e escolha o media type. A ferramenta mostra a forma em base64 e a forma com percent-encoding, com os tamanhos de cada uma.
Compare os tamanhos. O base64 usa perto de quatro caracteres para cada três bytes; o percent-encoding pode ser menor para texto simples e SVG.
Cole qualquer data URL no decodificador para ver o media type, a codificação e o conteúdo. Tipos de imagem mostram uma prévia.
Resultados em HTML são renderizados em um frame com sandbox, porque uma página data: não pode ser aberta em uma aba própria.
Para SVG em CSS, o percent-encoding costuma ser menor que o base64 e continua legível. Lembre-se de codificar # como %23.
Coloque inline só arquivos pequenos. Uma data URL não pode ir para o cache separadamente, então uma grande é baixada de novo com cada página ou folha de estilo que a contém.
Sem nenhum media type, o padrão é text/plain;charset=US-ASCII, então informe o tipo e adicione charset=utf-8 para texto com acentos ou emoji.
Data URLs não aceitam query strings. Tudo depois da vírgula, incluindo um ponto de interrogação, é tratado como dado.
Para arquivos que o visitante gera na página, uma URL blob: criada com URL.createObjectURL evita montar uma string enorme.
Perguntas frequentes
Por que data:text/html;base64 não abre quando colo na barra de endereços?
Os navegadores modernos bloqueiam a navegação de nível superior para URLs data: como medida contra phishing, porque uma página data poderia imitar qualquer site escondendo a origem real. O conteúdo continua funcionando dentro de um iframe, de um elemento img ou como link de download.
Quanto o base64 aumenta um arquivo?
Cerca de um terço. O base64 escreve cada três bytes como quatro caracteres, então uma imagem de 30 KB vira uns 40 KB de texto antes de qualquer compressão. O aumento exato depende do tamanho e do padding.
Como transformo uma data URL em base64 de volta em imagem?
Cole-a no decodificador desta página para ver a prévia, ou coloque-a direto no src de um img. Para salvar como arquivo, use a nossa ferramenta de imagem para base64 no sentido inverso, ou faça um fetch da data URL em JavaScript e salve o Blob resultante.
Existe um limite de tamanho?
A MDN cita 512 MB para Chromium e Firefox e 2,048 MB para o Safari. Muito antes disso, data URLs enormes deixam o HTML e o CSS lentos para processar e impossíveis de colocar em cache, então mantenha-as em poucos kilobytes.
Qual é a origem de uma página de data URL?
Uma origem opaca própria, não a origem da página que a criou. Assim, um script dentro de um iframe data: é tratado como estranho pela página que o contém, e não como parte do mesmo site.
Quando colocar inline ajuda e quando atrapalha
Colocar inline economiza uma requisição, o que importa para alguns poucos recursos minúsculos, como um spinner de carregamento ou um favicon em uma demo de arquivo único. Atrapalha quando o recurso é grande ou usado em muitas páginas, porque os bytes vão junto com cada arquivo HTML ou folha de estilo em vez de ficarem em cache uma vez só.
Uma regra razoável: coloque inline coisas com menos de alguns kilobytes que aparecem uma vez, e use um arquivo normal para todo o resto.
Base64 ou percent-encoding?
Arquivos binários como PNG, JPEG e fontes precisam de base64. Formatos de texto, especialmente SVG, podem usar percent-encoding: só caracteres como #, %, < e > e espaços precisam de escape, então o resultado costuma ser menor e continua legível.
O codificador abaixo mostra os dois tamanhos lado a lado para você escolher o menor para o seu conteúdo.
Erros comuns
Um erro de digitação no base64, uma quebra de linha perdida ou um media type errado falham em silêncio: a imagem simplesmente não aparece. Passe uma string quebrada pelo decodificador para ver onde está o problema.
Outro deslize frequente é esquecer a vírgula quando não há media type. data:,Hello é válido; data:Hello não é uma data URL utilizável.
Data URLs em código real
Fundo SVG em CSS, com percent-encoding
Aspas simples dentro do SVG evitam conflito com as aspas duplas em volta de url(), e o # da cor é escrito como %23.
Uma pequena imagem inline
A mesma ideia funciona em uma tag img. Mantenha o texto alt, como em qualquer imagem.
Gere uma data URL a partir de um arquivo em JavaScript
FileReader.readAsDataURL produz a string data: completa, com o media type incluído, para um arquivo que o visitante escolhe.
Transforme uma data URL de volta em Blob
O fetch entende URLs data:, o que é o caminho mais curto para recuperar os bytes.
Codificador e decodificador de data URL
Conteúdo para codificar
Media type
Data URL em base64
Data URL com percent-encoding
Original {n} bytes, URL base64 {v} caracteres
URL com percent-encoding {v} caracteres
Renderizado em um frame com sandbox
Decodificar uma data URL
Cole uma data URL
Media type: {v}
Codificação: {v}
Tamanho decodificado: {n} bytes
Isso não parece uma data URL válida. Ela precisa de data:, um tipo opcional, uma vírgula e os dados.