Calcolatore dimensione data URI
Conosca la lunghezza di un data URI prima di codificare qualsiasi cosa: un PNG da 1024 byte diventa 1390 caratteri, che rientrano ancora nel limite predefinito di 2048, quindi l'incorporamento è consigliato. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Byte
- 1024
- Tipo di media
- image/png
- Caratteri del prefisso
- 22
- Caratteri Base64
- 1368
- Caratteri di riempimento
- 2
- Caratteri dell'URI di dati
- 1390
I team che cercano un calcolatore di dimensione data URI di solito conoscono già la dimensione originale del file e necessitano della lunghezza codificata prima di incollare la stringa in HTML, CSS o un messaggio di posta. Questo strumento accetta la dimensione originale in byte, un tipo MIME facoltativo per il prefisso RFC 2397 e un budget di incorporazione facoltativo.
Come si ottiene la dimensione di un data URI Base64 dai byte originali
Il resto uno richiede due riempimenti, il resto due ne richiede uno, il resto zero non ne richiede nessuno. Il prefisso è costituito dai caratteri letterali data e due punti, più il tipo MIME indicato, più punto e virgola-base64-virgola. Per image/png quel prefisso misura ventidue caratteri; per application/octet-stream, trentasette; per image/svg+xml, ventisei.
La lunghezza totale del data URI in caratteri è quella del prefisso più quella Base64. Poiché l'alfabeto Base64 e il prefisso sono ASCII, quel conteggio di caratteri coincide con i byte UTF-8 della stringa. Aggiungere il prefisso alza il sovraccarico totale sopra quel pavimento, ed è per questo che una favicon di ventiquattro byte e un foglio di ventiquattro kilobyte non si gonfiano della stessa percentuale.
Questo calcolatore applica quelle identità alla dimensione originale in byte senza leggere il file, così Lei può decidere se conviene incorporare prima di codificare un solo ottetto.
Quando conviene incorporare un data URI nonostante il sovraccarico del trentatré per cento
Il motivo abituale per incorporare è risparmiare una richiesta: una minuscola icona PNG, un sottoinsieme WOFF2 o poche centinaia di byte di CSS critico possono costare più in latenza e avvio di connessione che come byte extra di HTML o CSS. Un valore pratico predefinito è due kilobyte di data URI: sotto quel budget, incorporare un'icona in un componente o in un modello di posta è spesso ancora conveniente; sopra, serva il file e lasci che il browser lo metta in cache.
L'HTML della posta è un caso particolare: molti client bloccano le immagini remote finché il lettore non fa clic, quindi incorporare un logo come data URI può giustificare un budget più ampio anche dopo la tassa del trentatré per cento. I font incorporati nel CSS bloccano il primo disegno se il foglio è grande, quindi misuri la dimensione codificata prima di incollare un'intera famiglia in un tag di stile. Una convalida fallita non consuma il saldo.
Casi d'uso
Budget di incorporazione in bundler e design system
Fornisca a webpack, Vite o a una pipeline di design system la dimensione di un'icona o di un font e faccia fallire la compilazione quando il data URI codificato supera il budget concordato.
Loghi e firme della posta HTML
Stimi quanto occuperà un logo incorporato dopo Base64 così il messaggio resta sotto i limiti del client e si visualizza senza scaricare un'immagine remota.
CSS critico e fogli di icone
Confronti la dimensione codificata di un piccolo SVG o di un frammento CSS con un budget di incorporazione di 2 KiB o 8 KiB prima di incollarlo nell'intestazione del documento.
Domande frequenti
Come si calcola la dimensione di un data URI dalla dimensione originale del file?
Invii la dimensione originale in bytes (un intero positivo).
Perché il sovraccarico di un data URI Base64 è circa il 33 per cento?
Il prefisso data: aggiunge alcuni caratteri in più.
Il tipo MIME modifica la dimensione codificata?
Solo il prefisso. image/png usa 22 caratteri di prefisso; application/octet-stream ne usa 37.
Quando conviene incorporare una risorsa come data URI?
Sovrascriva budget per allinearlo al limite del bundler.
Quanto costa il calcolatore di dimensione data URI?
Lo strumento nel browser è gratuito. Nessun file viene caricato né codificato.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"bytes": 1024
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev.data_uri_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_bytes | 1000000000000 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Incorporare un font, un'icona o un foglio di stile come data URI evita una richiesta HTTP aggiuntiva, ma la codifica Base64 gonfia il payload di circa un terzo e il prefisso data: aggiunge ancora altri caratteri. Restituisce la lunghezza esatta del payload Base64, il conteggio totale dei caratteri del data URI, il sovraccarico del payload vicino al trentatré per cento, il sovraccarico totale compreso il prefisso e una raccomandazione di incorporare o mantenere un collegamento separato. Le chiamate API riuscite costano $0.002; un input non valido non viene fatturato.
Come si ottiene la dimensione di un data URI Base64 dai byte originali
Un data URI che trasporta contenuto binario segue la forma RFC 2397: data, poi un tipo di media facoltativo, poi il token punto e virgola-base64, una virgola e il payload. Il payload è Base64 standard RFC 4648: ogni tre byte originali diventano quattro caratteri ASCII, quindi la lunghezza codificata è esattamente quattro volte il soffitto della lunghezza originale divisa per tre. Quando la lunghezza originale non è un multiplo di tre, i segni di uguale di riempimento completano l'ultimo quartetto così il payload ha sempre una lunghezza multipla di quattro. Il sovraccarico del solo payload è dunque circa il trentatré per cento — esattamente un terzo quando la dimensione originale è multipla di tre, un po' di più se serve il riempimento.
Contratto di ingresso, forma della risposta e comportamento in errore
Tali fallimenti non vengono fatturati. Diecimila byte con il tipo octet-stream predefinito producono un URI di 13373 caratteri e una raccomandazione link. Invii tramite POST un corpo JSON con un campo obbligatorio bytes: un intero positivo (o una stringa numerica) per la dimensione originale della risorsa prima della codifica. Il campo facoltativo media_type (alias mime, type, content_type, mime_type) è il tipo MIME scritto nel prefisso; se omesso vale application/octet-stream. Il campo facoltativo budget (alias max, limit, max_bytes, max_size) è la maggiore lunghezza di data URI ancora considerata conveniente da incorporare e vale 2048 per impostazione predefinita, una regola comune in HTTP/1. Valori mancanti, vuoti, non interi, zero o negativi falliscono con invalid_input indicando il campo; un tipo di media che non sia type/subtype, o che contenga spazi o una virgola, viene rifiutato allo stesso modo. In caso di successo il corpo ripete bytes, media_type e budget; restituisce prefix e prefix_chars; restituisce base64_chars e padding_chars; restituisce data_uri_chars e overhead_chars; restituisce overhead_percent dell'URI completo rispetto al file originale e payload_overhead_percent del solo payload Base64 (la cifra di circa trentatré per cento); restituisce expansion_ratio come lunghezza dell'URI sui byte originali; e restituisce within_budget più recommendation uguale a inline o link. Esempio: 1024 byte come image/png producono un prefisso di 22 caratteri, 1368 caratteri Base64 con due riempimenti, un data URI di 1390 caratteri, un sovraccarico di payload di circa 33.59 per cento e una raccomandazione inline rispetto al budget 2048. Abbini i numeri al proprio codificatore se Le serve la stringa; questo endpoint non emette mai il payload codificato.
Quando conviene incorporare un data URI nonostante il sovraccarico del trentatré per cento
Base64 peggiora quel compromesso di circa un terzo, e il multiplexing di HTTP/2 o HTTP/3 rende una richiesta separata più economica di quanto fosse su HTTP/1, quindi la soglia di pareggio è più bassa di quanto molti articoli del 2012 sostengano ancora. I bundler che usavano un limite url-loader di otto kilobyte ottimizzavano gli sprite HTTP/1; sovrascriva budget a 8192 se riproduce quella regola ereditata, oppure lo abbassi sui siti HTTP/2. Lo usi come soglia in un controllo di pull-request: se data_uri_chars supera il budget, tenga la risorsa come URL.