画像 → Data URL

Data URL とは？

Data URL は、小さなデータを外部リソースであるかのように文書内にインライン埋め込みできる URI スキームです。RFC 2397 で定義され、data: プレフィックスで始まり、MIME タイプ、オプションの ;base64 フラグ、実際のペイロードが続きます。例えば data:image/png;base64,iVBORw0KGgo... は PNG 画像全体を単一のテキスト文字列としてエンコードし、HTML、CSS、JavaScript、その他のテキストベースの形式に直接貼り付けられます。

エンコードされたデータはプレーンテキストであるため、Data URL はあらゆるテキストチャネルを通過できます。HTML 属性、CSS プロパティ、JavaScript 文字列、JSON フィールド、ソースコード、メール、チャットメッセージなどです。最も一般的な用途は画像をマークアップやスタイルシートに直接インライン展開することで、ブラウザが画像アセットを取得するための個別 HTTP リクエストを省きます。

Data URL と Base64 の違い

Data URL と Base64 文字列は密接に関連していますが、同じではありません。違いを理解することでユースケースに合ったものを選択できます。

• Data URL (data:image/png;base64,...)——MIME タイプと Base64 ペイロードをバンドルした完全な URL スキーム。<img> タグの src 属性、CSS の url() 関数、ブラウザのアドレスバー、URL が期待される任意の場所に直接貼り付けられます。
• 純粋な Base64 (iVBORw0KGgo...)——data: プレフィックスや MIME タイプのない、Base64 エンコードされたバイトのみ。API エンドポイントにデータを送信する場合や、生のエンコードデータをデータベースフィールドに保存する場合など、消費側のアプリケーションがコンテンツタイプを既に知っていて独自のプレフィックスを追加する場合に使用します。

要するに、Data URL は URL として機能するために必要なメタデータでラップされた Base64 文字列です。マークアップやスタイルシートに画像を直接埋め込む場合は Data URL を選び、API に画像データを送る場合や生のエンコード文字列を期待するシステムで作業する場合は純粋な Base64 を選んでください。

Data URL を使う場面

画像を別ファイルとして提供するよりもインライン化する方が便利な多くの場面で、画像を Data URL に変換するのは理にかなっています。最も一般的なシナリオは次のとおりです：

• インライン CSS 背景画像。小さな背景グラフィック、テクスチャ、パターンは CSS に直接埋め込め、追加の HTTP リクエストを省けます。
• HTML メールの署名とコンテンツ。多くのメールクライアントはデフォルトで外部画像をブロックします。Data URL をインライン化すれば即座に表示されます。
• 単一ファイル HTML 納品物。単一の .html ファイルとして共有する必要があるレポート、ダッシュボード、プロトタイプは、すべての画像をインライン埋め込みできます。
• JSON と XML ペイロード。画像アップロードを受け付ける API は、マルチパートフォームのアップロードが不便な場合、Data URL フィールドを受け付けることがよくあります。
• ソースコードのアイコン。コンポーネントやライブラリが使用する小さなアイコンは、.js や .ts ファイル内に Data URL として保存できます。
• ファーストビューのクリティカルグラフィック。ヒーロー画像やロゴはインライン化して、ネットワーク往復を待たずに最初のペイントでレンダリングできます。

ブラウザのキャッシュ、CDN 配信、遅延読み込みが重要な大きな写真画像には Data URL を避け、それらは別の画像ファイルとして保持し、通常の URL で配信してください。

画像を Data URL に変換する方法

このツールを使って画像を Data URL に変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード、登録、インストールは不要です。ツールは画像をデコードし、キャンバスに描画し、Canvas API を通じて PNG、JPEG、WebP の Data URL として再エンコードします。次の 4 つの手順に従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、.jpg、.png、.webp、.gif、.bmp、.svg ファイルをドラッグ＆ドロップします。画像はローカルでデコードされ、プレビューとして表示されます。
2. 出力形式を選択。透過付きのロスレス品質には PNG を、写真ファイルの最小サイズには JPEG を、モダンな高効率圧縮には WebP を選びます。JPEG を選ぶと品質スライダーが表示されます。
3. Data URL を生成。「Data URLを生成」ボタンをクリックします。Data URL 文字列が結果ボックスに表示され、その下にライブプレビューがレンダリングされます。
4. 文字列をコピー。「コピー」をクリックして Data URL をクリップボードにコピーし、HTML、CSS、JavaScript コードに直接貼り付けます。

すべてのステップは JavaScript を使用してブラウザ内でローカルに実行されるため、画像がサーバーにアップロードされることはありません。これにより変換は完全にプライベートで高速、機密性の高い画像にも適しています。

Data URL の長所と短所

他の技術と同様に、Data URL にもトレードオフがあります。理解しておくことでこのアプローチを使うべきか判断できます。

• 長所：HTTP リクエストを削減、小さな画像や単一ファイル納品物、外部アセットがブロックされる環境に最適。サーバー側のインフラなしで機能。
• 短所：Base64 エンコーディングはバイナリデータを約 33% 膨張させ、インラインデータはブラウザで個別にキャッシュできず、非常に大きな Data URL は HTML 解析と DOM 構築を遅くする可能性があります。

経験則：数 KB までのアイコン、ロゴ、箇条書き、装飾的なグラフィックには Data URL を優先してください。大きな写真画像については、ブラウザが効率的にキャッシュできるよう、元のファイルを保持し、通常の URL で参照してください。