Data URL : data:text/html;base64 et ses cousins expliqués
Data URL (URI data:)
Data URI et data:text/html;base64 expliqués, avec encodeur | We.Inc
Comment fonctionnent les URL data: : la syntaxe, base64 ou encodage pourcent, le surcoût d'un tiers en taille, pourquoi data:text/html ne s'ouvre pas dans un onglet, plus un encodeur et un décodeur.
Une data URL transporte un fichier entier dans l'adresse elle-même : data:, un type de média facultatif, ;base64 si les octets sont encodés en base64, une virgule, puis le contenu. data:text/html;base64,PGgxPkhpPC9oMT4= est une minuscule page web. Le base64 alourdit le contenu d'environ un tiers, et les navigateurs refusent d'ouvrir les pages data: comme onglet de premier niveau.
Anatomie d'une data URL
Partie
Exemple
Remarques
Schéma
data:
Toujours en premier
Type de média
image/svg+xml
Facultatif ; par défaut text/plain;charset=US-ASCII
Paramètres
;charset=utf-8
Facultatifs, après le type de média
Indicateur d'encodage
;base64
Présent uniquement quand les données sont en base64
Séparateur
Obligatoire, même sans type de média
Données
PHN2Zz4uLi48L3N2Zz4=
Base64, ou texte encodé en pourcent
Les data URL sont pratiques pour les petites icônes, les arrière-plans CSS, les fixtures de test et les téléchargements générés, et une source fréquente de confusion quand quelqu'un colle une longue chaîne data:text/html dans la barre d'adresse et que rien ne se passe. Ci-dessous, vous pouvez encoder n'importe quel texte en data URL, en décoder une, et voir exactement ce qu'elle coûte en octets par rapport à l'original.
Saisissez ou collez un contenu et choisissez son type de média. L'outil affiche la forme base64 et la forme encodée en pourcent, avec leurs longueurs.
Comparez les tailles. Le base64 donne presque quatre caractères pour trois octets ; l'encodage pourcent peut être plus court pour du texte brut et du SVG.
Collez n'importe quelle data URL dans le décodeur pour lire son type de média, son encodage et son contenu. Les types image affichent un aperçu.
Les résultats HTML s'affichent dans un cadre sandboxé, car une page data: ne peut pas être ouverte dans son propre onglet.
Pour du SVG dans du CSS, l'encodage pourcent est généralement plus compact que le base64 et reste lisible. Pensez à encoder # en %23.
N'intégrez que de petits fichiers. Une data URL ne peut pas être mise en cache séparément : une grosse URL est donc retéléchargée avec chaque page ou feuille de style qui la contient.
Sans aucun type de média, la valeur par défaut est text/plain;charset=US-ASCII : indiquez donc le type et ajoutez charset=utf-8 pour du texte avec accents ou emoji.
Les data URL ne prennent pas en charge les query strings. Tout ce qui suit la virgule, point d'interrogation compris, est traité comme des données.
Pour les fichiers que le visiteur génère dans la page, une URL blob: obtenue via URL.createObjectURL évite de construire une chaîne énorme.
Questions fréquentes
Pourquoi data:text/html;base64 ne s'ouvre-t-il pas quand je le colle dans la barre d'adresse ?
Les navigateurs modernes bloquent la navigation de premier niveau vers les URL data: pour lutter contre l'hameçonnage, car une page data pourrait imiter n'importe quel site en masquant sa véritable origine. Le contenu fonctionne toujours dans une iframe, un élément img ou un lien de téléchargement.
De combien le base64 alourdit-il un fichier ?
D'environ un tiers. Le base64 écrit chaque groupe de trois octets sous forme de quatre caractères : une image de 30 KB devient donc environ 40 KB de texte avant toute compression. L'augmentation exacte dépend de la longueur et du padding.
Comment reconvertir une data URL base64 en image ?
Collez-la dans le décodeur de cette page pour la prévisualiser, ou placez-la directement dans un img src. Pour l'enregistrer en fichier, utilisez notre outil image vers base64 dans l'autre sens, ou chargez la data URL avec JavaScript et enregistrez le Blob obtenu.
Y a-t-il une limite de taille ?
MDN indique 512 MB pour Chromium et Firefox et 2,048 MB pour Safari. Bien avant cela, les data URL énormes rendent le HTML et le CSS lents à analyser et impossibles à mettre en cache : limitez-les à quelques kilo-octets.
Quelle origine a une page en data URL ?
Une origine opaque qui lui est propre, et non l'origine de la page qui l'a créée. Un script dans une iframe data: est donc traité comme un étranger par la page qui la contient, et non comme une partie du même site.
Quand l'intégration aide et quand elle nuit
Intégrer un fichier économise une requête, ce qui compte pour une poignée de petites ressources comme une icône de chargement ou un favicon dans une démo en un seul fichier. Cela nuit quand la ressource est volumineuse ou utilisée sur de nombreuses pages, car les octets voyagent avec chaque fichier HTML ou feuille de style au lieu d'être mis en cache une fois.
Une règle raisonnable : intégrez ce qui pèse moins de quelques kilo-octets et n'apparaît qu'une fois, et liez tout le reste comme un fichier normal.
Base64 ou encodage pourcent ?
Les fichiers binaires comme PNG, JPEG et les polices exigent le base64. Les formats texte, surtout le SVG, peuvent utiliser l'encodage pourcent : seuls des caractères comme #, %, < et > et les espaces doivent être échappés, si bien que le résultat est souvent plus court et reste lisible.
L'encodeur ci-dessous affiche les deux longueurs côte à côte pour que vous choisissiez la plus courte pour votre contenu.
Erreurs fréquentes
Une faute de frappe dans le base64, un retour à la ligne égaré ou un mauvais type de média échouent en silence : l'image ne s'affiche tout simplement pas. Passez une chaîne cassée dans le décodeur pour voir où ça coince.
Autre oubli courant : la virgule quand il n'y a pas de type de média. data:,Hello est valide ; data:Hello n'est pas une data URL exploitable.
Les data URL dans du vrai code
Arrière-plan SVG en CSS, encodé en pourcent
Les guillemets simples dans le SVG évitent le conflit avec les guillemets doubles autour de url(), et le # de la couleur s'écrit %23.
Une petite image intégrée
Le même principe fonctionne dans une balise img. Gardez un texte alt, comme pour toute image.
Créer une data URL à partir d'un fichier en JavaScript
FileReader.readAsDataURL produit la chaîne data: complète, type de média compris, pour un fichier choisi par le visiteur.
Reconvertir une data URL en Blob
fetch comprend les URL data:, c'est le moyen le plus court de récupérer les octets.
Encodeur et décodeur de data URL
Contenu à encoder
Type de média
Data URL en base64
Data URL encodée en pourcent
Original {n} octets, URL base64 {v} caractères
URL encodée en pourcent {v} caractères
Affiché dans un cadre sandboxé
Décoder une data URL
Collez une data URL
Type de média : {v}
Encodage : {v}
Taille décodée : {n} octets
Cela ne ressemble pas à une data URL valide. Il faut data:, un type facultatif, une virgule et les données.