ForHosting KIT · Veille et lecture de sites web

Calculateur de taille data URI

Connaissez la longueur d'un data URI avant de coder quoi que ce soit : un PNG de 1024 octets devient 1390 caractères, qui tiennent encore dans le budget par défaut de 2048, d'où la recommandation de l'intégrer. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

Octets: 1 024
Type de média: image/png

Vous obtenez

Caractères du préfixe: 22
Caractères Base64: 1 368
Caractères de remplissage: 2
Caractères de l'URI de données: 1 390

Les équipes qui cherchent un calculateur de taille de data URI connaissent déjà en général la taille d'origine du fichier et ont besoin de la longueur encodée avant de coller la chaîne dans du HTML, du CSS ou un e-mail. Cet outil accepte la taille d'origine en octets, un type MIME facultatif pour le préfixe RFC 2397 et un budget d'intégration facultatif. Il renvoie la longueur exacte de la charge Base64, le nombre total de caractères du data URI, le surcoût de la charge près de trente-trois pour cent, le surcoût total avec le préfixe, et une recommandation d'intégrer ou de conserver un lien séparé.

Comment la taille d'un data URI Base64 se calcule à partir des octets d'origine

Un data URI qui transporte un contenu binaire suit la forme RFC 2397 : data, puis un type de média facultatif, puis le jeton point-virgule-base64, une virgule et la charge utile. Cette charge est du Base64 RFC 4648 standard : chaque trois octets d'origine deviennent quatre caractères ASCII, donc la longueur encodée vaut exactement quatre fois le plafond de la longueur d'origine divisée par trois.

Lorsque la longueur d'origine n'est pas un multiple de trois, des signes égal de remplissage complètent le dernier quartet pour que la charge ait toujours une longueur multiple de quatre. Un reste de un exige deux remplissages, un reste de deux en exige un, un reste de zéro n'en exige aucun. Le préfixe est constitué des caractères littéraux data et deux-points, plus le type MIME fourni, plus point-virgule-base64-virgule.

Pour image/png ce préfixe fait vingt-deux caractères ; pour application/octet-stream, trente-sept ; pour image/svg+xml, vingt-six. La longueur totale du data URI en caractères est celle du préfixe plus celle du Base64. Comme l'alphabet Base64 et le préfixe sont en ASCII, ce nombre de caractères égale le nombre d'octets UTF-8 de la chaîne.

Le surcoût de la seule charge est donc d'environ trente-trois pour cent — exactement un tiers lorsque la taille d'origine est un multiple de trois, un peu plus s'il faut du remplissage. Ajouter le préfixe relève le surcoût total au-dessus de ce plancher, c'est pourquoi un favicon de vingt-quatre octets et une feuille de vingt-quatre kilooctets n'enflent pas du même pourcentage.

Ce calculateur applique ces identités à la taille d'origine en octets sans lire le fichier, afin que vous puissiez décider si l'intégration vaut la peine avant d'encoder le moindre octet.

Quand intégrer un data URI malgré le surcoût de trente-trois pour cent

La raison habituelle d'intégrer est d'économiser une requête : une minuscule icône PNG, un sous-ensemble WOFF2 ou quelques centaines d'octets de CSS critique peuvent coûter plus en latence et en établissement de connexion qu'en octets HTML ou CSS supplémentaires. Une valeur pratique par défaut est de deux kilo-octets de data URI : sous ce budget, intégrer une icône dans un composant ou un modèle d'e-mail reste souvent gagnant ; au-delà, servez le fichier et laissez le navigateur le mettre en cache.

Le HTML d'e-mail est un cas à part : beaucoup de clients bloquent les images distantes jusqu'à un clic du lecteur, donc intégrer un logo en data URI peut justifier un budget plus large même après la taxe de trente-trois pour cent. Les polices intégrées dans le CSS bloquent le premier rendu si la feuille est volumineuse : mesurez la taille encodée avant de coller une famille entière dans une balise de style. Une validation en échec ne consomme pas le solde.

Cas d’usage

Budgets d'intégration dans les empaqueteurs et design systems

Fournissez à webpack, Vite ou un pipeline de design system la taille d'une icône ou d'une police et faites échouer la compilation lorsque le data URI encodé dépasse le budget convenu.

Logos et signatures d'e-mail HTML

Estimez la taille d'un logo intégré après Base64 afin que le message reste sous les plafonds du client et s'affiche sans télécharger une image distante.

CSS critique et feuilles d'icônes

Comparez la taille encodée d'un petit SVG ou d'un extrait CSS à un budget d'intégration de 2 KiB ou 8 KiB avant de le coller dans l'en-tête du document.

Questions fréquentes

Comment calculer la taille d'un data URI à partir de la taille d'origine du fichier ?

Envoyez la taille d'origine dans bytes (un entier positif).

Pourquoi le surcoût d'un data URI Base64 est-il d'environ 33 pour cent ?

Le Base64 standard encode 3 octets en 4 caractères ASCII, donc la charge croît d'un tiers (exactement 33.33… pour cent lorsque bytes est un multiple de 3, un peu plus avec remplissage). Le préfixe data: ajoute quelques caractères en plus.

Le type MIME change-t-il la taille encodée ?

Uniquement le préfixe. image/png utilise 22 caractères de préfixe ; application/octet-stream en utilise 37. La longueur de la charge Base64 ne dépend que du nombre d'octets d'origine.

Quand faut-il intégrer une ressource comme data URI ?

Remplacez budget pour l'aligner sur la limite de l'empaqueteur.

Combien coûte le calculateur de taille de data URI ?

L'outil dans le navigateur est gratuit. Aucun fichier n'est envoyé ni encodé.

Outils associés

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/dev/data-uri-size

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre stack

curl -X POST https://api.kit.forhosting.com/dev/data-uri-size \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"bytes":1024}'

const res = await fetch("https://api.kit.forhosting.com/dev/data-uri-size", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "bytes": 1024
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/dev/data-uri-size",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "bytes": 1024
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev/data-uri-size", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"bytes":1024}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"bytes":1024}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev/data-uri-size", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Exemple de requête

{
  "bytes": 1024
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "dev.data_uri_size",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

max_bytes 1000000000000

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Notes techniques

Intégrer une police, une icône ou une feuille de style comme data URI évite une requête HTTP supplémentaire, mais l'encodage Base64 gonfle la charge utile d'environ un tiers et le préfixe data: ajoute encore des caractères. Les appels API réussis coûtent $0.002 ; une entrée invalide n'est pas facturée.

Contrat d'entrée, forme de la réponse et comportement en cas d'erreur

Exemple : 1024 octets en image/png donnent un préfixe de 22 caractères, 1368 caractères Base64 avec deux remplissages, un data URI de 1390 caractères, un surcoût de charge d'environ 33.59 pour cent et une recommandation inline face au budget 2048. Dix mille octets avec le type octet-stream par défaut donnent un URI de 13373 caractères et une recommandation link. Associez les chiffres à votre propre encodeur si vous avez besoin de la chaîne ; ce point de terminaison n'émet jamais la charge encodée. Envoyez par POST un corps JSON avec un champ obligatoire bytes : un entier positif (ou une chaîne numérique) pour la taille d'origine de la ressource avant encodage. Les alias size, length, n et byte_count correspondent au même paramètre, afin que les scripts d'empaquetage et les widgets de formulaire conservent leurs noms locaux. Le champ facultatif media_type (alias mime, type, content_type, mime_type) est le type MIME écrit dans le préfixe ; s'il est omis, la valeur est application/octet-stream. Le champ facultatif budget (alias max, limit, max_bytes, max_size) est la plus grande longueur de data URI encore jugée rentable à intégrer et vaut 2048 par défaut, une règle courante en HTTP/1. Les valeurs manquantes, vides, non entières, nulles ou négatives échouent avec invalid_input en nommant le champ ; un type de média qui n'est pas type/subtype, ou qui contient un espace ou une virgule, est rejeté de la même façon. Ces échecs ne sont pas facturés. En cas de succès, le corps répète bytes, media_type et budget ; renvoie prefix et prefix_chars ; renvoie base64_chars et padding_chars ; renvoie data_uri_chars et overhead_chars ; renvoie overhead_percent de l'URI complet par rapport au fichier d'origine et payload_overhead_percent de la seule charge Base64 (le chiffre d'environ trente-trois pour cent) ; renvoie expansion_ratio comme longueur de l'URI sur les octets d'origine ; et renvoie within_budget plus recommendation égal à inline ou link.

Quand intégrer un data URI malgré le surcoût de trente-trois pour cent

Base64 aggrave cet arbitrage d'environ un tiers, et le multiplexage HTTP/2 ou HTTP/3 rend une requête séparée moins chère qu'à l'époque de HTTP/1, si bien que la taille d'équilibre est plus basse que ne le prétendent encore beaucoup d'articles de 2012. Les empaqueteurs qui appliquaient une limite url-loader de huit kilo-octets optimisaient des sprites HTTP/1 ; remplacez budget par 8192 si vous reproduisez cette règle ancienne, ou baissez-le sur les sites HTTP/2. Servez-vous-en comme seuil dans une vérification de pull-request : si data_uri_chars dépasse le budget, conservez la ressource en URL.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Comment la taille d'un data URI Base64 se calcule à partir des octets d'origine

Quand intégrer un data URI malgré le surcoût de trente-trois pour cent

Cas d’usage

Budgets d'intégration dans les empaqueteurs et design systems

Logos et signatures d'e-mail HTML

CSS critique et feuilles d'icônes

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Limites

Erreurs

Notes techniques

Contrat d'entrée, forme de la réponse et comportement en cas d'erreur

Quand intégrer un data URI malgré le surcoût de trente-trois pour cent

merci