画像を Base64 に変換する方法
- 画像を入力欄にドロップするか、クリックして選択します。Ctrl+V でクリップボードから貼り付けることもできます。
- 出力形式（Data URI、Base64 のみ、HTML、CSS、Markdown、JSON）を選びます。
- コピーをクリックし、HTML や CSS、メールテンプレート、API リクエストにコードを貼り付けます。
画像を Base64 で埋め込むべきなのはどんなとき？
Base64 でインライン化した画像は HTTP リクエストを 1 回分減らせるため、小さなアイコンやメールの署名、単一ファイルの HTML ドキュメント、API のペイロードに便利です。ただし、Base64 は元のファイルより約 33% 大きくなり、個別にキャッシュすることもできません。写真や数キロバイトを超える画像は、通常の画像ファイルのまま使いましょう。
出力形式の説明
- Data URI：
src属性や CSS で使うdata:image/png;base64,…形式。 - Base64 のみ：API やデータベース向けの Base64 文字列そのもの。
- HTML / CSS / Markdown：そのまま貼り付けられる完成済みのコード。
- JSON：ファイル名、MIME タイプ、データを 1 つにまとめたオブジェクト。
よくある質問
Base64 に変換すると画像のサイズは大きくなりますか？
はい、約 3 分の 1 大きくなります。30 KB の PNG は、およそ 40 KB の Base64 テキストになります。サイズが気になる場合は、先に画像を圧縮またはリサイズしてください。
どの画像形式を変換できますか？
PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO、AVIF など、ブラウザで開ける形式ならどれでも変換できます。Data URI には正しい MIME タイプが自動で付加されます。
Base64 画像を CSS で使うにはどうすればよいですか？
出力形式で CSS を選び、結果をスタイルのルールに貼り付けます。例：.logo { background-image: url("data:image/png;base64,…"); }