🔗 画像を Base64 に

使い方の手順

1. 画像を選ぶ 小さなアイコンが最適です。ロゴ、アイコン、シンプルな背景パターンなど。写真を変換すると、文字列が長すぎて実用に耐えません。
2. 「先に再エンコードして縮小」はオンのままに Base64 はデータを約 33% 増やします（3 バイトが 4 文字になる）。実際に表示するサイズまで縮めて圧縮してから変換する価値は、ほぼ確実にあります。既定の幅 256px・WebP はアイコンには十分です。
3. 出力形式を選ぶ Data URI は文字列のみで、使い方は自由です。HTML img は幅と高さを含む完成したタグを返します。CSS background はスタイルシートにそのまま貼れるルールを返します。
4. 実行する 完全な文字列とその長さが下に表示されます。この長さが要点で、HTML や CSS のファイルが増える量そのものです。
5. コピー、または .txt をダウンロード 「コピー」でクリップボードに入ります。長い文字列の場合、ブラウザで全選択するよりダウンロードした .txt のほうがずっと扱いやすくなります。

こんなときに使えます

Base64 とは

画像はバイナリデータですが、HTML・CSS・JSON はテキストしか保持できません。Base64 は任意のバイナリをプレーンテキストへ変換する符号化方式で、64 種類の安全な印字可能文字（A–Z、a–z、0–9、+、/）で元のバイト列を表現します。

代償は約 33% のサイズ増加です。3 バイトを 4 文字で書く必要があるためで、実装上の無駄ではなく、この符号化の数学的な下限です。

埋め込む価値があるのはどんなとき

判断基準は単純です。HTTP リクエストのコストが画像自体より大きいほど小さい場合にのみ埋め込む。実務上は 5KB 未満のアイコン程度です。

それを超えると欠点が利点を上回り始めます。主な問題はキャッシュです。独立した画像ファイルは一度ダウンロードされれば以降のページではキャッシュから使われますが、埋め込んだ画像は HTML や CSS の一部であり、そのファイルを読み込むたびに毎回まるごと再送されます。500KB の画像を埋め込んだサイトは、1 ページ閲覧ごとに 665KB のテキストを余分に転送することになります。

HTTP/2 以降の変化

Data URI が流行した時代、ブラウザは同一ドメインへの同時接続数を厳しく制限しており（通常 6 本）、リクエスト数の削減は実効性のある最適化でした。HTTP/2 では 1 本の接続上で多数のリクエストが多重化されるため、この利点は大きく縮小しました。

現在の妥当な使い方は限定的です。すべてのページで使われ、めったに変更しない、ごく小さなアイコンだけを埋め込む。それ以外は独立ファイルのままにして、キャッシュを活かしてください。

よくある質問

次に使いそうなツール

画像の作業は一度で終わらないことがほとんどです。「画像を Base64 に」とよく一緒に使われるのはこちら：

• 🎯 指定サイズに圧縮 — 2MB と指定すれば 2MB 以下に
• ⚡ PNG を WebP に — ファイルサイズを 3 割以上削減
• 🌈 カラーパレット抽出 — 主要な色を HEX・CSS 付きで抽出

仕上げたものをそのまま共有しますか？アップロードなら画像・写真・動画を短縮リンクにでき、パスワード・有効期限・閲覧回数の上限も設定できます。ツール一覧もどうぞ。