画像を Base64 に変換する
画像を Base64 のデータ URL に変換します。生成された文字列を HTML や CSS に直接埋め込めば、画像ファイルを別途配置しなくても表示できます。小さなアイコンやメール用のロゴを埋め込みたいときに便利です。img タグと CSS の記述例もそのままコピーできます。
データ URL の仕組み
データ URL は `data:image/png;base64,` に続けて画像のバイト列を Base64 で表現した文字列です。ブラウザはこれをファイルへの参照ではなく画像そのものとして解釈するため、外部ファイルなしで表示できます。Base64 はバイナリを 64 種類の文字で表す方式で、元のデータより約 33% 大きくなります。
埋め込むべきサイズの目安
数 KB のアイコンや区切り線であれば、HTTP リクエストが 1 つ減るぶん有利です。一方で数十 KB を超える画像を埋め込むと HTML や CSS 自体が肥大化し、キャッシュも効かなくなるため逆効果になります。目安として 4KB 以下を推奨します。
メール HTML での注意
HTML メールでデータ URL の画像を使うと、Gmail や Outlook などの主要クライアントでブロックされることがあります。メール用途では外部 URL の画像か、CID による添付を検討してください。
よくある質問
変換した文字列はどう使いますか?
HTML なら `<img src="データURL">`、CSS なら `background-image: url("データURL")` の形で使います。このページでは両方の記述例をコピーできるようになっています。
ファイルサイズはどれくらい増えますか?
Base64 は 3 バイトを 4 文字で表すため、元のファイルサイズの約 1.33 倍になります。10KB の画像なら約 13.3KB の文字列になります。
どの画像形式に対応していますか?
PNG・JPEG・WebP・GIF・SVG・AVIF・BMP など、ブラウザが扱えるファイルであれば形式を問わず変換できます(バイト列をそのまま符号化するため、形式の制限はありません)。
長い文字列でもブラウザが固まりませんか?
数 MB の画像を変換すると非常に長い文字列になり、表示に時間がかかることがあります。埋め込み用途では小さな画像を使うことをおすすめします。
写真はアップロードされますか?
されません。このページを開いた時点で必要なプログラムはすべてブラウザに読み込まれており、選んだ写真はあなたのパソコンやスマートフォンの中だけで処理されます。ネットワークに画像が流れることはないため、通信を監視されていても写真の中身が漏れることはありません。