画像のBase64（Data URL）変換
画像ファイルを選択すると、そのままBase64文字列またはData URL形式に変換します（画質の劣化や再圧縮はありません）。逆にBase64文字列やData URLを画像に戻したい場合は「Base64→画像」を選んでください。CSS/JS用の文字列変換にはBase64エンコード/デコード、画像の形式変換・圧縮には画像フォーマット変換もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
ここに画像ファイルをドラッグ＆ドロップすることもできます
注意点
- 「画像→Base64」はCanvasでの再エンコードを行わないため、SVGやICOを含む元画像のバイト列をそのままBase64に変換します（画質劣化・アニメーションGIFの欠落もありません）。
- Base64化すると元のファイルサイズよりおよそ1.33倍（4/3倍）大きくなります。特にHTML・CSS・JSONへの埋め込みではファイルサイズの増加に注意してください。
- 「Base64→画像」はプレフィックス（data:image/xxx;base64,）が無いBase64文字列でも、先頭バイト（マジックナンバー）からPNG/JPEG/GIF/WebP/BMP/SVG/ICOを自動判定します。判定できない場合はエラーになります。
- すべての処理はブラウザ内で完結し、選択した画像やBase64文字列がサーバーに送信されることはありません。
用語解説
Base64
画像などのバイナリデータを、英数字と一部の記号（A-Z, a-z, 0-9, +, /, =）のみの文字列に変換するエンコード方式です。テキストしか扱えない環境（CSS・JSON・メールなど）に画像データを埋め込む際によく使われます。
Data URL
`data:image/png;base64,...` のように、データの種類（MIMEタイプ）とBase64化した中身を1つのURL文字列にまとめた形式です。`<img src="...">`やCSSの`background-image`にそのまま指定でき、外部ファイルを別途読み込まずに画像を表示できます。
MIMEタイプ
ファイルの種類を表す識別子で、画像なら`image/png`や`image/jpeg`のように表されます。Data URLの先頭部分に含まれ、ブラウザがデータをどう解釈すべきかを判断する手がかりになります。
よくある質問
Base64にするとファイルサイズはどのくらい増えますか？
元のファイルサイズのおよそ1.33倍（4/3倍）になります。HTMLやCSSに埋め込む場合は、小さなアイコンなどに限ると読み込みの負担を抑えられます。
Data URLとBase64文字列の違いは何ですか？
Base64文字列はデータ部分だけで、Data URLは「data:image/png;base64,」のようなプレフィックスが付いた形式です。imgタグやCSSのurl()にはData URLをそのまま使えます。
Base64から画像に戻せますか？
はい。「Base64→画像」を選ぶと復元できます。プレフィックスがなくても、先頭のバイトからPNG・JPEG・GIF・WebP・BMP・SVG・ICOを自動判定します。判定できない場合はエラーになります。
このページをシェア