データ URL と Base64 イメージ - インライン化する場合とインライン化しない場合

データ URL は URL 文字列内にファイル バイトを埋め込むため、ブラウザは 2 番目のネットワーク リクエストを必要としません。通常、Base64 を意味する画像の場合、バイナリ ピクセルは、HTML `src`、CSS `url()`、または単一ファイルのデモ内に存在できる ASCII になります。インライン化は強力なので、使いすぎやすいです。このガイドでは、構造、サイズコスト、勝った場合、負けた場合、および Image to Base64 Converter を使用してプライベートに文字列を構築する方法について説明します。

データ URL の構造

データ URL は、「data:[media-type][;base64],payload」という固定の形式を持っています。 PNG アイコンの場合、「data:image/png;base64,iVBORw0KGgo...」のようになります。メディア タイプは、ペイロードをデコードする方法をブラウザに指示します。オプションの `;base64` フラグは、ペイロードが Base64 でエンコードされたバイナリであることを意味します。これがないと、ペイロードは URL エンコードされたテキストになります (小さな SVG マークアップには問題ありませんが、写真には扱いにくいです)。

• スキーム - 常に「data:」で始まります。
• メディア タイプ - `image/png`、`image/jpeg`、`image/webp`、`image/svg+xml`、または `text/css` など。
• エンコードフラグ - バイナリイメージバイトの場合は `;base64`。パーセントでエンコードされたテキストの場合は省略します。
• ペイロード - カンマの後のエンコードされたバイトまたはテキスト。スペースは使用できません。長い文字列は正常です。

Base64 自体は一般的なエンコーディング (A ～ Z、a ～ z、0 ～ 9、+、/、および = パディング) です。同じアルファベットが JSON、トークン、またはファイル バイトを運びます。任意のテキストや画像ではないファイルの場合は、Base64 エンコーダ / デコーダ を使用します。すぐに貼り付けられるデータ URL に変換されたローカル画像ファイルの場合は、Image to Base64 Converter を使用します。変換はブラウザ内で行われます。

~33% のサイズペナルティ

Base64 は、バイナリの 3 バイトごとを 4 つの ASCII 文字にマップします。これは、「data:image/...;base64,」プレフィックスをカウントする前に、最大 33% 増加します。 30 KB の PNG は、HTML または CSS では約 40 KB のテキストになります。 Gzip または Brotli は、繰り返されるパターンに多少役立ちますが、税金を消去することはできません。また、インライン化されたアセットをドキュメントとは別にキャッシュすることはできません。

• バイナリ ファイル - 3 バイトが 4 Base64 文字になります (最大 33% 大きくなります)。
• HTML/CSS の肥大化 - 文字列は、それを埋め込むすべてのページ応答に同梱されます。
• 独立したキャッシュがない - 1 つのアイコンを変更すると、スタイルシート全体またはテンプレート キャッシュが無効になる可能性があります。
• 解析コスト - 膨大な属性とスタイルにより、弱いデバイスでは HTML/CSS 解析が遅くなります。

インライン化が成功する場合

インライン化は、代替手段がサイズ税を超える往復のコストがかかる場合、または環境で外部ファイルが禁止されている場合に有効です。

• 小さなアイコンと UI グリフ - 追加の HTTP リクエストによりペイロードが小さくなる数百バイトの PNG または SVG。
• HTML テンプレートを電子メールで送信 - 多くのクライアントはリモート画像をブロックまたは書き換えます。小さなデータの URL ロゴは、トラッキング ピクセル ホストなしでレンダリングできます。
• 単一ファイルのデモと CodePen スタイルのスニペット - アセット フォルダーなしでオフラインで動作する 1 つの HTML ファイル。
• 重要なスクロールせずに見える範囲のマイクロアセット - レンダリングをブロックする画像リクエストを意図的に回避するまれなケース (最初に対策を講じます)。

経験則: アセットが約 1 ～ 2 KB 未満で、一度使用されている場合は、多くの場合、データ URL で問題ありません。不明な場合はファイルに保存して測定してください。

インライン化が失敗した場合

• ページ間でキャッシュ可能なもの (ロゴ、スプライト、共有アイコン) はすべてファイル (またはスプライト/SVG システム) に属しているため、ブラウザーはそれらを 1 回ダウンロードします。
• 写真、イラスト、ヒーロー画像など、大きなものはすべて HTML/CSS を破壊し、First Contentful Paint に悪影響を及ぼします。
• 個別に変更されるアセット - 1 つのファビコンが変更されたため、200 KB のスタイルシートを再公開したくない場合。
• 適切なキャッシュを備えた HTTP/2 または HTTP/3 サイト - 並列リクエストは安価です。古い「すべてのリクエストを避ける」というアドバイスは、HTTP/1.1 の場合よりも弱いです。

HTML 画像と CSS 背景画像

HTML で、完全なデータ URL を「src」に貼り付けます。

• `<img src="data:image/png;base64,..." alt="..." width="16" height="16">` - 代替テキストを保持します。レイアウトがジャンプしないように寸法を設定します。
• `data:image/svg+xml,...` としてのインライン SVG は機能しますが、多くの場合、ドキュメント内の生の `<svg>` の方が明確でアクセスしやすいです。
• メガバイト規模の文字列を `src` に入れないでください。DOM 属性だけを編集して配布するのは困難です。

CSS では、同じ文字列が `url()` の中に入れられます。

• 背景画像: url("データ:画像/png;base64,...");
• `background`、`list-style-image`、および `mask-image` に対しても同様に機能します。
• データ URL を埋め込む CSS を生成した後でも、CSS Minifier を介してスタイルシートを実行して、コメントや無駄な空白を削除できます。縮小は Base64 をあまり縮小しませんが、ファイルの残りの部分をクリーンアップします。

CSP とキャッシュに関する注意事項

Content-Security-Policy は多くの場合、デフォルトで画像またはスタイルの `data:` をブロックします。 CSP を強化した後にアイコンが消えた場合は、`img-src` (スタイルシート内でデータ URL を使用している場合は `style-src` / `style-src-elem` もチェックしてください) を確認してください。 「data:」を許可すると、攻撃対象領域がわずかに広がります。CSP が厳格である必要がある場合は、外部ファイルを優先します。

• キャッシュ - インライン化されたバイトは、HTML または CSS ドキュメントのキャッシュ有効期間を継承します。アセットごとの「キャッシュ制御」と CDN エッジ キャッシュが失われます。
• サービス ワーカー - 画像が埋め込まれた巨大な HTML シェルは、小さな HTML ファイルとハッシュされたアセットよりも外科的に更新するのが困難です。
• 電子メール - データ URL は一部のクライアントに役立ちますが、他のクライアントでは失敗します。キャンペーンを実施する前に、必ず主要クライアントをテストしてください。
• プライバシー - ToolsMinify を使用してローカルで変換すると、画像はアップロードされません。それはスクリーンショットや未リリースの UI にとって重要です。

よくある質問

Base64暗号化ですか?

いいえ、Base64 は暗号化ではなくエンコードです。誰でも解読できます。データ URL にシークレットを含めないでください。

サイトのロゴをデータ URL としてインライン化する必要がありますか?

ロゴが多くのページに表示される場合は、通常は不要です。キャッシュされた `/logo.svg` は 1 回ダウンロードされます。ロゴが小さく、1 回限りのコンテキスト (単一の電子メールなど) で使用される場合にのみインラインで使用します。

データ URL は Core Web Vitals に役立ちますか?

場合によっては、単一の小さな重要なアイコンの場合もあります。多くの場合、HTML をインフレートすると問題が発生します。前後の LCP とページ重量を測定します。大きなインライン化されたヒーローは一般的な回帰です。

画像をアップロードせずにデータ URL に変換できますか?

はい。 Image to Base64 Converter は、ブラウザーでファイルを読み取り、データ URL または生の Base64 を出力します。サーバーには何も送信されません。

SVG - Base64 または生のマークアップはどうですか?

通常、HTML 内のインライン SVG マークアップは、アクセシビリティとスタイルの点で優れています。 URL (一部の CSS プロパティ、一部の電子メール パス) のみを受け入れるコンテキストに SVG をドロップする必要がある場合は、データ URL を使用します。

ToolsMinify で画像を変換する

以下のすべてのツールはブラウザで実行できます - 無料、サインアップなし、何もアップロードされません。

• 画像からBase64へのコンバーター - ローカル画像を HTML および CSS のデータ URL または Base64 文字列に変換します。
• Base64エンコーダ/デコーダ - 任意のテキストおよび画像以外のペイロードをエンコードまたはデコードします。
• CSSミニファイアー - 小さなデータの URL 背景を埋め込むスタイルシートを縮小します。
• すべての開発者ツール - 完全なカテゴリインデックス。