画像ファイルとBase64(Data URI)を相互変換
簡単3ステップで変換:
画像ファイルをドラッグ&ドロップ、またはクリックして選択
対応形式: PNG, JPEG, GIF, WebP, SVG (最大10MB推奨)
画像のBase64エンコードは、Web開発において以下のような場面で活用されています:
小さなアイコンやロゴ画像をHTMLの<img>タグやCSSのbackground-imageに直接埋め込むことで、HTTPリクエストを削減し、ページの読み込み速度を向上させます。特にアイコンフォントの代替として便利です。
複数の小さな画像を1つのファイルにまとめる「CSSスプライト」の代わりに、各画像をBase64エンコードしてCSSに埋め込むことで、管理が簡単になります。
メールクライアントによっては外部画像の読み込みがブロックされるため、重要な画像(ロゴなど)をData URIとして埋め込むことで、確実に表示させることができます。
JSON APIで画像データを送受信する際、Base64エンコードすることで、バイナリデータをテキスト形式で扱えます。マルチパート通信を使わずにシンプルなJSON形式で画像を転送できます。
Progressive Web Apps (PWA) やElectronアプリで、画像をBase64エンコードしてHTMLに埋め込むことで、オフライン環境でも確実に画像を表示できます。
React Native、Ionic、FlutterなどのクロスプラットフォームフレームワークでBase64エンコードされた画像を使用することで、プラットフォーム間での画像の扱いを統一できます。
Data URI(データURI、Data URLとも呼ばれる)は、URLスキームの一種で、画像やフォントなどの小さなファイルをHTMLやCSSに直接埋め込むための仕組みです。ファイルの内容をBase64エンコードしてテキスト化し、URLの一部として表現します。
Data URIは以下の形式で記述されます:
data:[MIMEタイプ];[エンコード方式],[エンコードされたデータ] 例(PNGの場合): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
PNG、JPEG、GIF、WebP、SVGなど、ブラウザが対応しているすべての画像形式を変換できます。最も一般的なのはPNGとJPEGです。
技術的には制限はありませんが、パフォーマンスとブラウザのメモリを考慮して10MB以下を推奨します。実用的には5KB以下の小さな画像の使用が最も効果的です。
Base64エンコードにより、元のファイルサイズの約133%(約33%増加)になります。例えば、9KBの画像は約12KBのBase64文字列になります。
はい、透過PNG画像もそのまま変換できます。透過情報も保持されるため、HTMLやCSSに埋め込んでも正しく透過表示されます。
<img>タグのsrc属性に直接貼り付けます。例:<img src="data:image/png;base64,iVBORw0KG...">
background-image: url('data:image/png;base64,iVBORw0KG...');のように、url()関数内に貼り付けます。
いいえ、すべての処理はブラウザ上で完結します。画像データがサーバーに送信されることは一切ありません。
はい、このツールは完全無料で、商用・非商用を問わず自由にご利用いただけます。
画像データをBase64エンコード
画像ファイルの形式を変換するツールです。
SVGファイルを最適化・圧縮
Base64エンコード・デコード