データURIサイズ計算
符号化する前にデータURIの長さが分かります。1024バイトのPNGは1390文字になり、初期設定の上限2048文字に収まるため、埋め込みが勧められます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- バイト列
- 1,024
- メディアタイプ
- image/png
- プレフィックスの文字数
- 22
- Base64の文字数
- 1,368
- パディングの文字数
- 2
- データURIの文字数
- 1,390
データURIサイズ計算を探すチームは、元のファイルサイズはすでに分かっており、HTML・CSS・メールへ文字列を入れる前の符号化後の長さを必要とします。このツールは元のバイト数、RFC 2397 接頭辞用の任意の MIME 種別、任意のインライン化上限を受け取ります。
元バイト数から Base64 データURIサイズを求める方法
バイナリを運ぶデータURIは RFC 2397 の形に従います。余り1はパッド2、余り2はパッド1、余り0は不要です。接頭辞は文字どおりの data とコロン、指定した MIME 種別、セミコロン base64 カンマです。
image/png では22文字、application/octet-stream では37文字、image/svg+xml では26文字です。データURIの総文字数は接頭辞長と Base64 長の和です。Base64 字母と接頭辞は ASCII なので、その文字数は URI 文字列の UTF-8 バイト数と一致します。
接頭辞を足すと総増加はその下限を上回り、24バイトのファビコンと24キロバイトのスタイルシートが同じ百分率では膨らまない理由になります。この計算機はファイルを読まず元バイト数にそれらの恒等式を適用するので、1オクテットも符号化せずにインライン化の可否を判断できます。
三十三パーセント増でもデータURIのインライン化が見合うとき
ごく小さな PNG アイコン、WOFF2 のサブセット、数百バイトのクリティカル CSS は、追加の HTML や CSS バイトより待ち時間と接続確立の方が高くつくことがあります。実務上の既定はデータURI 2キロバイトです。
その上限未満ならコンポーネントやメール雛形へのアイコン埋め込みは今も得になることが多く、超えるならファイルを配信してブラウザにキャッシュさせてください。メール HTML は特例です。多くのクライアントは読者がクリックするまで遠隔画像を止めるため、ロゴをデータURIにすると三十三パーセント税のあとでも大きめの上限が正当化できます。
CSS に埋め込んだフォントはシートが大きいと初回描画を止めるので、ファミリ全体を style タグへ貼る前に符号化サイズを測ってください。検証失敗は残高を消費しません。
活用例
バンドラとデザインシステムのインライン化上限
webpack、Vite、デザインシステムのパイプラインにアイコンやフォントのファイルサイズを渡し、符号化データURIが合意した上限を超えたらビルドを失敗させます。
HTMLメールのロゴと署名
Base64 後の埋め込みロゴがどれほど大きくなるかを見積もり、メッセージをクライアント上限内に収め、遠隔画像の取得なしで表示できるようにします。
クリティカルCSSとアイコンシート
小さな SVG や CSS 断片の符号化サイズを 2 KiB または 8 KiB のインライン上限と比べてから、文書ヘッドへ貼り付けます。
よくある質問
MIME 種別は符号化サイズを変えますか?
接頭辞だけです。 image/png は接頭辞 22 文字、application/octet-stream は 37 文字です。
データURIサイズ計算の料金はいくらですか?
ブラウザ上の道具は無料です。ファイルのアップロードも符号化もありません。
元のファイルサイズからデータURIの長さはどう求めますか?
Base64では3バイトごとに4文字になるので、元のバイト数を3で割って切り上げ、4を掛けます。そこにdata:とMIMEタイプ、;base64,からなる先頭部分の文字数を足すと全体の長さです。
Base64で約33パーセント増えるのはなぜですか?
3バイトを4文字で表すため、本体だけで3分の1ほど増えます。元のサイズが3の倍数ならちょうど3分の1で、端数があると埋め文字のぶん少し多くなり、先頭部分が加わると全体の増加率はさらに上がります。
どんなときにデータURIで埋め込むと得ですか?
小さなアイコンやフォントの一部、数百バイトの重要なCSSなど、読み込みを1回減らす効果が増えるバイト数より大きいときです。初期設定の上限以下なら埋め込みを、超える場合は別ファイルにしてブラウザに保存させることを勧めます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
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)リクエスト例
{
"bytes": 1024
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev.data_uri_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_bytes | 1000000000000 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
フォント、アイコン、スタイルシートをデータURIとして埋め込むと追加のHTTPリクエストを避けられますが、Base64符号化はペイロードをおよそ三分の一膨らませ、data: 接頭辞がさらに文字を足します。返すのは正確な Base64 ペイロード長、データURI全体の文字数、約三十三パーセントのペイロード増、接頭辞込みの総増、およびインライン化するか別リンクのままにするかの推奨です。成功した API 呼び出しは $0.002、不正な入力は課金されません。
元バイト数から Base64 データURIサイズを求める方法
data、任意のメディア種別、セミコロン base64 トークン、カンマ、そしてペイロードです。ペイロードは RFC 4648 の標準 Base64 で、元の3バイトが4つの ASCII 文字になるため、符号化長は元の長さを3で割った天井のちょうど4倍です。元の長さが3の倍数でないときは、等号のパディングが最後の四文字組を埋め、ペイロード長は常に4の倍数になります。ペイロードだけの増加はおよそ三十三パーセント——元サイズが3の倍数ならちょうど三分の一、パディングがあれば少し多め——です。
入力契約、応答の形、エラー時の挙動
bytes は符号化前の元リソースサイズを表す正の整数(または数値文字列)です。既定の octet-stream で1万バイトなら URI は 13373 文字で link 推奨です。文字列そのものが必要なら独自の符号化器と組み合わせてください。必須フィールド bytes を1つ持つ JSON 本体を POST してください。任意の media_type(別名 mime、type、content_type、mime_type)は接頭辞に書く MIME 種別で、省略時は application/octet-stream です。任意の budget(別名 max、limit、max_bytes、max_size)はまだインライン化に値するとみなすデータURIの最大長で、既定は HTTP/1 の経験則である 2048 です。欠落・空・非整数・0・負はフィールド名付きの invalid_input で失敗し、type/subtype でない、空白やカンマを含むメディア種別も同様に拒否されます。これらの失敗は課金されません。成功時、本体は bytes、media_type、budget をエコーし、prefix と prefix_chars、base64_chars と padding_chars、data_uri_chars と overhead_chars を返し、元ファイルに対する URI 全体の overhead_percent と Base64 ペイロードだけの payload_overhead_percent(およそ三十三パーセントの数字)、元バイトに対する URI 長の expansion_ratio、within_budget と inline または link の recommendation を返します。例:image/png の 1024 バイトは接頭辞 22 文字、パッド2の Base64 1368 文字、データURI 1390 文字、ペイロード増約 33.59 パーセント、既定予算 2048 に対する inline 推奨です。この端点は符号化済みペイロードを出しません。
三十三パーセント増でもデータURIのインライン化が見合うとき
インライン化する通例の理由はリクエスト削減です。Base64 はその取引を約三分の一悪化させ、HTTP/2 や HTTP/3 の多重化は HTTP/1 より個別リクエストを安くするため、損益分岐のサイズは 2012 年頃の記事が今も主張する値より小さくなります。8キロバイトの url-loader 上限を使っていたバンドラは HTTP/1 のスプライト向けでした。その旧規則に合わせるなら budget を 8192 に上書きし、HTTP/2 サイトなら下げてください。pull-request 検査の門として使い、data_uri_chars が上限を超えたらリソースを URL のままにしてください。
技術的な質問
元のファイルサイズからデータURIサイズをどう計算しますか。
元のサイズを bytes(正の整数)で送ってください。API は base64_chars = 4×ceil(bytes/3) と、そのペイロードに data:<media_type>;base64, の長さを足した data_uri_chars を返します。
Base64 データURIの増加が約 33 パーセントなのはなぜですか。
標準 Base64 は 3 バイトを 4 つの ASCII 文字にするため、ペイロードは三分の一増えます(bytes が 3 の倍数ならちょうど 33.33… パーセント、パディングがあれば少し多め)。data: 接頭辞がその上に数文字足します。
リソースをデータURIとしてインライン化すべきなのはいつですか。
data_uri_chars が上限(既定 2048)に収まるときです。それ未満ではリクエスト回避が勝つことが多く、超えるならキャッシュ可能な URL のまま——とくに HTTP/2——にしてください。budget を上書きしてバンドラ上限に合わせてください。