ForHosting KIT · Websites auslesen & überwachen

Data-URI-Größenrechner

Kennen Sie die Länge einer Data-URI, bevor Sie etwas kodieren: Ein PNG mit 1024 Byte wird zu 1390 Zeichen und passt noch in das Standardbudget von 2048, daher lautet die Empfehlung einbetten. Kostenlos in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Rechenbeispiel

Wenn Sie eingeben

Bytes: 1.024
Medientyp: image/png

Erhalten Sie

Präfixzeichen: 22
Base64-Zeichen: 1.368
Füllzeichen: 2
Zeichen des Daten-URI: 1.390

Teams, die nach einem Data-URI-Größenrechner suchen, kennen die Originaldateigröße meist schon und brauchen die kodierte Länge, bevor sie die Zeichenkette in HTML, CSS oder eine E-Mail einfügen. Dieses Werkzeug nimmt die Originalgröße in Bytes entgegen, einen optionalen MIME-Typ für das RFC-2397-Präfix und ein optionales Einbettungsbudget. Es liefert die genaue Base64-Nutzlastlänge, die gesamte Zeichenanzahl der Data-URI, den Nutzlast-Mehraufwand nahe dreiunddreißig Prozent, den Gesamtmehraufwand inklusive Präfix sowie eine Empfehlung zum Einbetten oder zum Beibehalten eines eigenen Links.

Wie sich die Base64-Data-URI-Größe aus den Originalbytes ergibt

Eine Data-URI mit binärem Inhalt folgt der RFC-2397-Form: data, dann ein optionaler Medientyp, dann das Token Semikolon-base64, ein Komma und die Nutzlast. Die Nutzlast ist Standard-Base64 nach RFC 4648: je drei Originalbytes werden zu vier ASCII-Zeichen, daher ist die kodierte Länge genau das Vierfache der Aufrundung der Originalänge geteilt durch drei. Ist die Originalänge kein Vielfaches von drei, füllen Gleichheitszeichen das letzte Quartett auf, sodass die Nutzlastlänge stets ein Vielfaches von vier ist.

Rest eins braucht zwei Füllzeichen, Rest zwei braucht eines, Rest null braucht keines. Das Präfix besteht aus den Literalzeichen data und Doppelpunkt, plus dem angegebenen MIME-Typ, plus Semikolon-base64-Komma. Für image/png ist dieses Präfix zweiundzwanzig Zeichen lang; für application/octet-stream siebenunddreißig; für image/svg+xml sechsundzwanzig.

Die gesamte Data-URI-Länge in Zeichen ist Präfixlänge plus Base64-Länge. Weil Base64-Alphabet und Präfix ASCII sind, entspricht diese Zeichenzahl den UTF-8-Bytes der Zeichenkette. Der alleinige Nutzlast-Mehraufwand liegt daher bei etwa dreiunddreißig Prozent — genau ein Drittel, wenn die Originalgröße ein Vielfaches von drei ist, etwas mehr bei Füllzeichen.

Das Präfix hebt den Gesamtmehraufwand über diese Untergrenze, weshalb ein 24-Byte-Favicon und ein 24-Kilobyte-Stylesheet nicht um denselben Prozentsatz wachsen. Dieser Rechner wendet jene Identitäten auf die Originalbytezahl an, ohne die Datei zu lesen, damit Sie entscheiden können, ob Einbetten lohnt, bevor ein einziges Oktett kodiert wird.

Wann das Einbetten einer Data-URI den dreiunddreißigprozentigen Mehraufwand wert ist

Der übliche Grund zum Einbetten ist das Einsparen einer Anfrage: ein winziges PNG-Symbol, eine WOFF2-Teilmenge oder ein paar hundert Byte kritisches CSS können in Latenz und Verbindungsaufbau teurer sein als zusätzliche HTML- oder CSS-Bytes. Ein praktischer Standard sind zwei Kilobyte Data-URI: unter diesem Budget lohnt das Einbetten eines Symbols in eine Komponente oder eine E-Mail-Vorlage oft noch; darüber servieren Sie die Datei und lassen den Browser sie zwischenspeichern.

E-Mail-HTML ist ein Sonderfall: viele Clients sperren ferne Bilder, bis die Leserin klickt, daher kann das Einbetten eines Logos als Data-URI ein größeres Budget rechtfertigen, selbst nach der dreiunddreißigprozentigen Steuer. In CSS eingebettete Schriften blockieren den ersten Anstrich, wenn das Blatt groß ist; messen Sie die kodierte Größe, bevor Sie eine ganze Familie in ein Style-Tag einfügen. Eine fehlgeschlagene Prüfung wird nicht berechnet.

Anwendungsfälle

Einbettungsbudgets in Bundlern und Designsystemen

Übergeben Sie webpack, Vite oder einer Designsystem-Pipeline die Dateigröße eines Symbols oder einer Schrift und lassen Sie den Build scheitern, wenn die kodierte Data-URI das vereinbarte Budget überschreitet.

Logos und Signaturen in HTML-E-Mails

Schätzen Sie, wie groß ein eingebettetes Logo nach Base64 wird, damit die Nachricht unter den Client-Limits bleibt und ohne entfernten Bildabruf erscheint.

Kritisches CSS und Symbolblätter

Vergleichen Sie die kodierte Größe eines kleinen SVG oder CSS-Schnipsels mit einem Einbettungsbudget von 2 KiB oder 8 KiB, bevor Sie ihn in den Dokumentkopf einfügen.

Häufige Fragen

Wie berechnet man die Data-URI-Größe aus der Originaldateigröße?

Senden Sie die Originalgröße als bytes (eine positive ganze Zahl).

Warum liegt der Mehraufwand einer Base64-Data-URI bei etwa 33 Prozent?

Standard-Base64 kodiert 3 Bytes als 4 ASCII-Zeichen, daher wächst die Nutzlast um ein Drittel (genau 33.33… Prozent, wenn bytes ein Vielfaches von 3 ist, etwas mehr mit Füllzeichen). Das Präfix data: fügt einige Extrazeichen hinzu.

Ändert der MIME-Typ die kodierte Größe?

Nur das Präfix. image/png nutzt 22 Präfixzeichen; application/octet-stream nutzt 37. Die Base64-Nutzlastlänge hängt allein von der Originalbytezahl ab.

Wann sollte man eine Ressource als Data-URI einbetten?

Überschreiben Sie budget, um es an Ihr Bundler-Limit anzupassen.

Was kostet der Data-URI-Größenrechner?

Das Browser-Werkzeug ist kostenlos. Es wird keine Datei hochgeladen oder kodiert.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

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

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem 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)

Beispiel-Anfrage

{
  "bytes": 1024
}

Beispiel-Antwort

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

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

max_bytes 1000000000000

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Technische Hinweise

Eine Schrift, ein Symbol oder ein Stylesheet als Data-URI einzubetten spart eine zusätzliche HTTP-Anfrage, doch die Base64-Kodierung bläht die Nutzlast um rund ein Drittel auf und das Präfix data: fügt noch weitere Zeichen hinzu. Erfolgreiche API-Aufrufe kosten $0.002; ungültige Eingaben werden nicht berechnet.

Eingabevertrag, Antwortform und Fehlerverhalten

Beispiel: 1024 Bytes als image/png ergeben ein 22 Zeichen langes Präfix, 1368 Base64-Zeichen mit zwei Füllzeichen, eine 1390 Zeichen lange Data-URI, rund 33.59 Prozent Nutzlast-Mehraufwand und eine Empfehlung inline gegenüber dem Standardbudget 2048. Zehntausend Bytes mit dem Standardtyp octet-stream ergeben eine 13373 Zeichen lange URI und die Empfehlung link. Kombinieren Sie die Zahlen mit Ihrem eigenen Kodierer, wenn Sie die Zeichenkette selbst brauchen; dieser Endpunkt gibt die kodierte Nutzlast niemals aus. Senden Sie per POST einen JSON-Körper mit dem Pflichtfeld bytes: eine positive ganze Zahl (oder eine numerische Zeichenkette) für die Originalgröße der Ressource vor der Kodierung. Die Aliasse size, length, n und byte_count zeigen auf denselben Parameter, sodass Bundler-Skripte und Formular-Widgets ihre lokalen Namen behalten können. Das optionale Feld media_type (Aliasse mime, type, content_type, mime_type) ist der MIME-Typ im Präfix; fehlt es, gilt application/octet-stream. Das optionale Feld budget (Aliasse max, limit, max_bytes, max_size) ist die größte Data-URI-Länge, die Sie noch für einbettenswert halten, und beträgt standardmäßig 2048, eine übliche HTTP/1-Faustregel. Fehlende, leere, nicht ganzzahlige, null oder negative Werte scheitern mit invalid_input unter Nennung des Feldes; ein Medientyp, der nicht type/subtype ist oder Leerzeichen oder ein Komma enthält, wird ebenso abgelehnt. Diese Fehlschläge werden nicht berechnet. Bei Erfolg spiegelt der Körper bytes, media_type und budget; liefert prefix und prefix_chars; liefert base64_chars und padding_chars; liefert data_uri_chars und overhead_chars; liefert overhead_percent der gesamten URI gegenüber der Originaldatei und payload_overhead_percent der bloßen Base64-Nutzlast (die rund dreiunddreißig Prozent); liefert expansion_ratio als URI-Länge geteilt durch Originalbytes; und liefert within_budget plus recommendation gesetzt auf inline oder link.

Wann das Einbetten einer Data-URI den dreiunddreißigprozentigen Mehraufwand wert ist

Base64 verschlechtert diesen Kompromiss um etwa ein Drittel, und das Multiplexen von HTTP/2 oder HTTP/3 macht eine getrennte Anfrage günstiger als unter HTTP/1, sodass die Gewinnschwelle kleiner ist, als viele Beiträge aus 2012 noch behaupten. Bundler mit einem acht-Kilobyte-url-loader-Limit optimierten HTTP/1-Sprites; überschreiben Sie budget mit 8192, wenn Sie diese Altregel nachbilden, oder senken Sie sie für HTTP/2-Sites. Nutzen Sie es als Schwelle in einer Pull-Request-Prüfung: übersteigt data_uri_chars das Budget, belassen Sie die Ressource als URL.

Vollständige KIT-Dokumentation lesen →

Data-URI-Größenrechner

Im Browser ausführen – kostenlos

Rechenbeispiel

Wie sich die Base64-Data-URI-Größe aus den Originalbytes ergibt

Wann das Einbetten einer Data-URI den dreiunddreißigprozentigen Mehraufwand wert ist

Anwendungsfälle

Einbettungsbudgets in Bundlern und Designsystemen

Logos und Signaturen in HTML-E-Mails

Kritisches CSS und Symbolblätter

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Limits

Fehler

Technische Hinweise

Eingabevertrag, Antwortform und Fehlerverhalten

Wann das Einbetten einer Data-URI den dreiunddreißigprozentigen Mehraufwand wert ist

danke