DEVELOP.07 BASE64 IMAGE

Base64 画像変換

Base64 を編集または貼り付けてリアルタイムに確認できます。画像処理はすべてブラウザ内で行います。

SOURCE

画像をアップロード

画像をここにドロップ

またはクリックして JPG、PNG、GIF、WebP、SVG、BMP、ICO を選択

最大 10 MB · ファイルはブラウザ内で処理

画像を選ぶとエンコードして表示します

BASE64

Base64 コード

画像または Base64 を待っていますFileReader と Data URI のローカル処理 · アップロード・保存なし

§ 01

エンコードとデコードの分かりやすい流れ

内容を追加

Data URI や Raw Base64 を貼り付けるか編集し、画像をドロップして置き換えます。

プレビューを確認

内容を解析し、空白とパディングを整えて一般的な画像形式を検出します。

コピーまたは保存

プレビュー、サイズ、容量を確認してコードをコピーするか画像をダウンロードします。

§ 02

Base64 は表現を変えるだけで画素は変えない

Base64 は画像バイナリを 6 ビット単位で印字可能な文字へ変換し、JSON、HTML、CSS 内で扱えるようにします。圧縮ではないため画質は下がりません。

容量は約 3 分の 1 増えます。小さなアイコンには便利ですが、大きな画像は文書を膨らませ、独立キャッシュを失います。

§ 03

両方向の入力と用途

方向

入力

用途

画像から Base64

JPG、PNG、GIF、WebP、SVG、BMP、ICO

ウェブ埋め込み、API JSON、単一ファイル資料

Base64 から画像

Data URI または Raw Base64

API 結果の確認、リソース復元、MIME 確認

§ 04

Data URI は小さく安定したリソースに

Data URI は MIME タイプと Base64 データを直接使えるアドレスにまとめます。画像属性には完全な URI、MIME が別にある API には Raw Base64 が便利です。

数 KB のアイコンや装飾だけを埋め込むのが目安です。再利用する画像や大きな画像は通常の URL が向いています。

§ 05

コードで画像を Base64 に変換

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

よくある質問

Q1Data URI の接頭辞がない Base64 も表示できますか？

はい。PNG、JPEG、GIF、WebP、SVG の一般的なシグネチャを検出し、不明な場合は指定した MIME を使います。

Q2Base64 でサイズが増えるのはなぜですか？

4 文字で元の 3 バイトを表すため、本体は約 3 分の 1 大きくなり、接頭辞も加わります。

Q3画像から Base64 にすると品質は下がりますか？

いいえ。元のバイトを読み取り、表現だけを変えるため、再サンプリングや圧縮は行いません。

Q4画像やコードは保存されますか？

いいえ。読み込み、検証、プレビュー、ダウンロードは現在のページ内で行われます。

Q5Base64 が表示されないのはなぜですか？

途中で切れている、未対応文字がある、MIME が内容と異なる、または画像として読めないデータの可能性があります。