画像 → Base64変換
画像ファイルをBase64 Data URIに変換します。PNG・JPEG・GIF・WebP・SVGに対応。CSS background-imageやHTMLのsrc属性への直接埋め込み用URLを生成します。
画像 → Base64変換について
Data URIスキーム（RFC 2397）は、画像などのバイナリファイルをBase64エンコードした文字列としてHTMLやCSSに直接埋め込むための仕組みです。「data:image/png;base64,...」のような形式で記述することで、画像ファイルを別途リクエストすることなくページに表示できます。
メリットはHTTPリクエスト数を減らせる点ですが、一方でBase64化によりファイルサイズが約33%増加すること、ブラウザの画像キャッシュが効かなくなることがデメリットとして挙げられます。そのため小さなアイコンやワンオフのメール用画像など、限定的な場面での利用が推奨されます。
主な使い方
- 1CSSのbackground-imageに画像を外部ファイルなしでインライン埋め込みする
- 2メールHTMLテンプレートに画像をBase64で直接埋め込んで外部依存をなくす
- 3小さなアイコン画像をBase64化してHTTPリクエスト数を削減する
- 4SVGアイコンをBase64にしてJavaScriptから動的に操作できるようにする
よくある質問
Q. 対応している画像形式は何ですか？
A. PNG・JPEG・GIF・WebP・SVGに対応しています。ブラウザが読み取れる一般的な画像フォーマットであればほとんど処理できます。
Q. 変換した画像データはサーバーにアップロードされますか？
A. いいえ。画像の読み取りと変換はすべてブラウザ上のFileReader APIで行われます。画像が外部に送信されることは一切ありません。
Q. ファイルサイズに制限はありますか？
A. ブラウザのメモリに依存しますが、数MB以下の画像であれば問題なく変換できます。Base64変換後はファイルサイズが約33%増加します。
関連ツール
- Base64 エンコード・デコードテキストをBase64形式にエンコード、またはBase64文字列を元のテキストにデコードします。日本語などUTF-8の多バイト文字にも対応し、認証ヘッダーやデータの確認に便利。ブラウザ内で完結し、データは外部に送信されません。
- 画像圧縮PNG・JPEG・WebP画像を品質を調整しながら圧縮し、ファイルサイズを削減します。圧縮前後のサイズを比べながら最適な画質を選べます。画像はブラウザ内でのみ処理され、サーバーには送信されません。
- 画像形式変換PNG・JPEG・WebPの画像形式を相互に変換します。JPEG・WebPは出力品質を調整でき、Web向けの軽量化やファイル形式の統一に便利。画像はブラウザ内でのみ処理され、サーバーには送信されません。
- URLエンコード・デコードURLやクエリパラメータに含まれる日本語・記号をパーセントエンコード、またはデコードして元の文字列に戻します。encodeURIComponent相当の処理をブラウザ内で行い、データは外部に送信されません。
- HTML エンティティ変換HTMLの特殊文字（< > & " など）を<のようなエンティティにエンコード、またはデコードして元の文字に戻します。HTMLへのコード埋め込みやエスケープ漏れの確認に便利。ブラウザ内で完結します。