画像→Base64エンコーダーとは？
Image to Base64 Encoderは、画像ファイル（PNG、JPEG、GIF、SVG、WebP）をBase64エンコードされたテキスト文字列に変換します。別途ファイルをホスティングせずにHTML、CSS、JSONに直接画像を埋め込めます。HTTPリクエストが減り、マークアップもシンプルになります。
エンコーダーは画像のバイトをお使いの端末で読み取り、8つの出力を生成します：生のBase64、src=属性用のdata URI、完全な<img>タグ、CSSのbackground-image宣言、HTMLファビコンリンク、XMLラッパー、Imageを使うJavaScriptスニペット、そしてファイル名・MIMEタイプ・サイズ・data URIをまとめたJSONオブジェクトです。「最適化」をオンにすると、長い辺を縮小してまずJPEGまたはWebPで再エンコードし、埋め込む前に文字列を半分にできることもあります。複数の画像を一度にドロップまたは貼り付けると、それぞれにラベル付きの出力が付きます。逆方向が必要ですか？「Base64を画像にデコード」セクションは、任意の文字列を表示・ダウンロードできる画像に戻します。対応形式：PNG、JPEG、GIF、SVG、WebP、BMP、ICO、AVIF、HEIC（それぞれ最大20MB）。
使い方
- ステップ1 — 画像をドラッグ、アップロード領域をクリック、またはCtrl+Vで貼り付けてアップロードします。先に小さくするには「エンコードオプション」を開き、最大サイズか品質を設定します。
- ステップ2 — 出力形式を選びます：生のBase64、data URI、HTML imgタグ、CSS background-image、HTMLファビコンリンク、XML、Imageを使うJavaScriptスニペット、またはAPIペイロード用のJSONオブジェクト。
- ステップ3 — 結果をクリップボードにコピーするか、テキストファイルとしてダウンロードします。
使用するタイミング
- HTMLメールに小さなロゴやアイコンを埋め込み、外部ホスティングなしで表示させる。
- 小さなSVGスプライトをスタイルシートに直接書き込み、レンダリングを止めるHTTPリクエストを1つ減らす。
- URLが使えないJSONペイロードやJWTクレーム、YAML設定に画像を文字列として持ち込む。
結果
メールテンプレートに直接埋め込みたい2KBのロゴアイコンがあります。PNGファイルをアップロードし、データURIの出力をコピーして、HTMLのimgタグのsrc属性に貼り付ければ、外部ホスティングなしで画像を表示できます。
よくある質問
- Base64にすると画像ファイルは大きくなりますか?
- はい、約33%増えます。Base64は3バイトを4文字のASCIIで表すため、30 KBのPNGはおよそ40 KBの文字列になります。HTTPリクエストを節約できる5 KB未満のファイルだけ採算が合います。
- Base64で埋め込むのとリンクで参照するのは、どう使い分ければよいですか?
- ファーストビューに出てキャッシュしにくいもの(ユーザー固有のアバター、1回しか使わないアイコン)で4〜5 KB以下ならインライン。複数ページで使い回す画像はリンクのままにして、ブラウザキャッシュに二度目以降を任せます。
- data URIが data:image/png;base64, で始まるのはなぜですか?
- この接頭辞はメディアタイプです。data:image/png はブラウザに「続くバイト列はPNG」と伝え、base64 はエンコード方式、カンマがヘッダーと本体を区切ります。これがないとデコーダは形式を判別できません。
- Base64を画像に戻して表示できますか?
- できます。このページの「Base64を画像に戻す」セクションを開き、データURIまたは生のBase64を貼り付けると、画像が表示されてダウンロードできます。URLセーフなBase64（-と_を使う形式）にも対応しています。
- SVGをBase64で符号化する価値はありますか?
- ふつうはありません。SVG自体がテキストなので、data URI内ではURLエンコードのほうがBase64より短くなります。一本の転送可能な文字列が必要なときのためにSVGにも対応しています。