Calculadora de tamaño data URI
Sepa cuánto medirá un data URI antes de codificar nada: un PNG de 1024 bytes se convierte en 1390 caracteres, que aún caben en el presupuesto predeterminado de 2048, así que se recomienda incrustarlo. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Bytes
- 1 024
- Tipo de medio
- image/png
- Caracteres del prefijo
- 22
- Caracteres Base64
- 1 368
- Caracteres de relleno
- 2
- Caracteres del URI de datos
- 1 390
Quienes buscan una calculadora de tamaño de data URI suelen conocer ya el tamaño original del archivo y necesitan la longitud codificada antes de pegar la cadena en HTML, CSS o un correo. Esta herramienta acepta el tamaño original en bytes, un tipo MIME opcional para el prefijo RFC 2397 y un presupuesto de incrustación opcional. Devuelve la longitud exacta de la carga Base64, el recuento total de caracteres del data URI, el sobrecoste de la carga útil cerca del treinta y tres por ciento, el sobrecoste total con el prefijo y una recomendación de incrustar o conservar un enlace aparte.
Cómo se obtiene el tamaño de un data URI Base64 a partir de los bytes originales
Un data URI que transporta contenido binario sigue la forma RFC 2397: data, luego un tipo de medio opcional, luego el token punto y coma-base64, una coma y la carga útil. Esa carga es Base64 estándar RFC 4648: cada tres bytes originales se convierten en cuatro caracteres ASCII, de modo que la longitud codificada es exactamente cuatro veces el techo de la longitud original dividida entre tres.
Cuando la longitud original no es múltiplo de tres, signos igual de relleno completan el último cuarteto para que la carga tenga siempre un múltiplo de cuatro. El resto uno exige dos rellenos, el resto dos exige uno y el resto cero no exige ninguno. El prefijo son los caracteres literales data y dos puntos, más el tipo MIME que se indique, más punto y coma-base64-coma.
Para image/png ese prefijo mide veintidós caracteres; para application/octet-stream, treinta y siete; para image/svg+xml, veintiséis. La longitud total del data URI en caracteres es la del prefijo más la de Base64. Como el alfabeto Base64 y el prefijo son ASCII, ese recuento de caracteres coincide con los bytes UTF-8 de la cadena.
El sobrecoste solo de la carga ronda por tanto el treinta y tres por ciento —exactamente un tercio cuando el tamaño original es múltiplo de tres, y un poco más si hace falta relleno—. Añadir el prefijo eleva el sobrecoste total por encima de ese suelo, y por eso un favicon de veinticuatro bytes y una hoja de veinticuatro kilobytes no crecen en el mismo porcentaje.
Esta calculadora aplica esas identidades al tamaño original en bytes sin leer el archivo, para que se pueda decidir si merece la pena incrustar antes de codificar un solo octeto.
Cuándo merece la pena incrustar un data URI pese al sobrecoste del treinta y tres por ciento
La razón habitual de incrustar es ahorrar una petición: un icono PNG diminuto, un subconjunto WOFF2 o unos cientos de bytes de CSS crítico pueden costar más en latencia y establecimiento de conexión que como bytes extra de HTML o CSS. Un valor práctico por defecto son dos kilobytes de data URI: por debajo de ese presupuesto, incrustar un icono en un componente o una plantilla de correo suele seguir compensando; por encima, sirva el archivo y deje que el navegador lo cachee.
El HTML de correo es un caso aparte: muchos clientes bloquean las imágenes remotas hasta que el lector pulsa, así que incrustar un logotipo como data URI puede justificar un presupuesto mayor incluso tras el impuesto del treinta y tres por ciento. Las fuentes incrustadas en CSS bloquean el primer pintado si la hoja es grande, así que mida el tamaño codificado antes de pegar una familia entera en una etiqueta de estilo. La validación fallida no consume saldo.
Qué puede hacer con ella
Presupuestos de incrustación en empaquetadores y sistemas de diseño
Pase a webpack, Vite o una canalización de sistema de diseño el tamaño de un icono o una fuente y haga fallar la compilación cuando el data URI codificado rebase el presupuesto acordado.
Logotipos y firmas de correo HTML
Estime cuánto ocupará un logotipo incrustado tras Base64 para que el mensaje respete los topes del cliente y se vea sin descargar una imagen remota.
CSS crítico y hojas de iconos
Compare el tamaño codificado de un SVG pequeño o un fragmento CSS con un presupuesto de incrustación de 2 KiB u 8 KiB antes de pegarlo en la cabecera del documento.
Preguntas frecuentes
¿Cómo se calcula el tamaño de un data URI a partir del tamaño original?
Envíe el tamaño original en bytes (un entero positivo).
¿Por qué el sobrecoste de un data URI Base64 ronda el 33 por ciento?
El Base64 estándar codifica 3 bytes como 4 caracteres ASCII, así que la carga crece un tercio (exactamente 33.33… por ciento cuando bytes es múltiplo de 3, un poco más con relleno). El prefijo data: añade unos caracteres extra encima.
¿El tipo MIME cambia el tamaño codificado?
Solo el prefijo. image/png usa 22 caracteres de prefijo; application/octet-stream usa 37. La longitud de la carga Base64 depende únicamente del recuento original de bytes.
¿Cuándo conviene incrustar un recurso como data URI?
Sobrescriba budget para alinearlo con el límite del empaquetador.
¿Cuánto cuesta la calculadora de tamaño de data URI?
La herramienta del navegador es gratuita. No se sube ni se codifica ningún archivo.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su 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)Ejemplo de solicitud
{
"bytes": 1024
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev.data_uri_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_bytes | 1000000000000 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Incrustar una fuente, un icono o una hoja de estilos como data URI evita una petición HTTP adicional, pero la codificación Base64 infla la carga útil en torno a un tercio y el prefijo data: añade todavía más caracteres. Las llamadas API correctas cuestan $0.002; la entrada inválida no se factura.
Contrato de entrada, forma de la respuesta y comportamiento ante errores
Esos fallos no se facturan. Ejemplo: 1024 bytes como image/png producen un prefijo de 22 caracteres, 1368 caracteres Base64 con dos rellenos, un data URI de 1390 caracteres, un sobrecoste de carga de unos 33.59 por ciento y una recomendación inline frente al presupuesto 2048. Diez mil bytes con el tipo octet-stream por defecto producen un URI de 13373 caracteres y una recomendación link. Combine las cifras con su propio codificador si necesita la cadena; este extremo no emite nunca la carga codificada. Envíe por POST un cuerpo JSON con un campo obligatorio bytes: un entero positivo (o una cadena numérica) con el tamaño original del recurso antes de codificar. Los alias size, length, n y byte_count apuntan al mismo parámetro, de modo que scripts de empaquetado y widgets de formulario pueden conservar sus nombres locales. El campo opcional media_type (alias mime, type, content_type, mime_type) es el tipo MIME escrito en el prefijo; si se omite, vale application/octet-stream. El campo opcional budget (alias max, limit, max_bytes, max_size) es la mayor longitud de data URI que aún se considera rentable incrustar y vale 2048 por defecto, una regla habitual en HTTP/1. Valores ausentes, vacíos, no enteros, cero o negativos fallan con invalid_input nombrando el campo; un tipo de medio que no sea type/subtype, o que contenga espacios o una coma, se rechaza igual. En caso de éxito el cuerpo repite bytes, media_type y budget; devuelve prefix y prefix_chars; devuelve base64_chars y padding_chars; devuelve data_uri_chars y overhead_chars; devuelve overhead_percent del URI completo frente al archivo original y payload_overhead_percent de la sola carga Base64 (la cifra de unos treinta y tres por ciento); devuelve expansion_ratio como longitud del URI entre bytes originales; y devuelve within_budget más recommendation igual a inline o link.
Cuándo merece la pena incrustar un data URI pese al sobrecoste del treinta y tres por ciento
Base64 empeora ese equilibrio en torno a un tercio, y la multiplexación de HTTP/2 o HTTP/3 abarata una petición aparte respecto a HTTP/1, de modo que el umbral de equilibrio es menor del que aún afirman muchas bitácoras de 2012. Los empaquetadores que usaban un límite url-loader de ocho kilobytes optimizaban sprites de HTTP/1; sobrescriba budget a 8192 si reproduce esa regla antigua, o bájelo en sitios HTTP/2. Úselo como umbral en una comprobación de pull-request: si data_uri_chars supera el presupuesto, deje el recurso como URL.