結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
画像 to Base64変換ツールは、画像ファイルをdata URLに変換します。data URLはdata:image/png;base64,（またはファイルの種類に応じた形式）で始まり、その後にBase64でエンコードされた画像のバイト列が続く1行のテキストです。PNG、JPG、GIF、SVG、WebPなど任意の画像を選ぶと、プレビューとともにテキストが表示され、すぐにコピーできます。
ファイルはブラウザのFileReaderで読み込まれるため、アップロードされることはありません。data URLは、通常の画像アドレスが使える場所ならどこでも使えます。<img src>、CSSのbackground-image: url(...)、JSONペイロード、メールテンプレートなどです。Base64にするとデータは元のファイルより約3分の1大きくなるので、小さな画像に向いています。
こんなときに使えます
- 小さなアイコンやロゴをCSSに埋め込み、ページのリクエストを1つ減らしたいとき。
- レポートやデモなど、単体で完結するHTMLファイルに画像を含めたいとき。
- マルチパートのアップロードを受け付けないJSON APIのリクエストで画像を送りたいとき。
- HTMLメールの署名やテストフィクスチャにインライン画像を追加したいとき。
使用例
入力
pixel.png（1 × 1 px、青、69バイト）出力
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCこのツールについての質問
Base64のテキストが元の画像より大きいのはなぜですか？
Base64は3バイトごとに4文字のテキストで表すため、結果はファイルより約33%大きくなります。30 KBの画像なら、およそ40 KBのテキストになります。サーバー側でGzipやBrotliの圧縮をかければ、その分をある程度取り戻せます。
画像をインライン化しないほうがよいのはどんなときですか？
大きな写真や、多くのページで使われる画像には避けてください。通常の画像ファイルならブラウザが一度キャッシュすれば済みますが、インライン画像はそれを含むHTMLやCSSファイルのたびに再ダウンロードされます。
結果をCSSで使うにはどうすればよいですか？
url()で囲みます：background-image: url("data:image/png;base64,...");。SVGアイコンの場合は、Base64よりURLエンコードしたSVGのほうが小さくなることが多く、URL エンコードのページで作成できます。
Base64を画像に戻すにはどうすればよいですか？
data URL全体をブラウザのアドレスバーに貼り付けて画像を保存します。生のバイト列が必要な場合は、カンマ以降の部分をBase64 デコードツールでデコードしてください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。