Base64画像デコーダー | オンラインで画像をデコード＆プレビュー

base64画像デコーダーとは何ですか？

base64画像デコーダーは、base64でエンコードされたテキスト文字列を画像に戻すツールです。base64は、画像ファイルのバイト列などのバイナリデータを、64個のプレーンテキスト文字（英字、数字、+、/、パディング用の=）だけで表す方法です。ブラウザー、メール、多くのAPIはこの方法で画像を保存するため、画像を別ファイルではなくプレーンテキスト内に含めて送信できます。デコーダーはその処理を逆に行います。文字列を貼り付けると、元の画像が表示されます。

データURL形式

Webでは、base64画像は通常、データURLとして書かれます。data: URLスキームは1998年に定義されました。形式は次のとおりです。

例：

各部分にはそれぞれ役割があります。

• data:は、通常のWebアドレスではなくデータURLであることを示します。
• image/pngはMIMEタイプで、ファイルの種類をブラウザーに伝えます。
• ;base64は、コンマの後のデータがbase64でエンコードされていることを示します。これは省略可能です。省略した場合、データはプレーンテキストまたはパーセントエンコードされたテキストとして扱われます。
• コンマ以降のすべてが、エンコードされた画像そのものです。

デコーダーの仕組み

デコードは4つの手順で行われます。

1. ツールは、文字列がdata:で始まるかどうかを確認します。始まっている場合は、そのプレフィックスからMIMEタイプを読み取ります。
2. 長いbase64文字列は複数行に折り返されていることがあるため、スペース、タブ、改行をすべて取り除きます。これは、ブラウザーが使うforgiving-base64デコードの規則に従ったもので、その最初の手順はすべての空白の除去です。
3. base64テキストをデコードして、生のバイト列に戻します。
4. 結果の先頭の数バイトを調べます。一般的な画像形式はいずれも、シグネチャまたは「マジックナンバー」と呼ばれる決まったバイト列で始まります。PNGファイルは89 50 4E 47で始まり、JPEGファイルはFF D8 FFで始まります。他の形式も同様です。デコーダーは、WHATWG MIME Sniffing Standardの画像シグネチャ表を使います。これらのシグネチャと照合して、画像タイプを確認し、必要に応じて修正します。

data: URLのうち、タイプがimage/...でないものは、画像ではないとして拒否されます。data:image/... URLで;base64がないものは、そのままブラウザーに渡されます。

文字列にdata:プレフィックスがない場合、デコーダーはそれを生のbase64データとして扱い、デコードして同じ方法でシグネチャを読み取ります。バイト列が既知の画像シグネチャのいずれにも一致せず、SVGテキストにも見えない場合、文字列は画像ではないようだと報告します。形式を推測したり、デフォルトの種類にフォールバックしたりはしません。

SVGはバイナリではなくテキスト形式（XML）であり、決まったバイトシグネチャがないため、扱いが異なります。デコーダーは代わりに、デコードしたテキストが<svgタグで始まるか、それを含むXML宣言で始まるかを確認します。

base64画像のサイズ計算式

Base64は、バイナリデータ3バイトを4文字のテキストに変換します。エンコード後の長さを求める式は次のとおりです。

⌈ ⌉記号は「次の整数へ切り上げる」ことを意味します。base64は常に4文字単位で処理し、余ったグループには=記号でパディングを施すためです。

大きなファイルでは、エンコード後のサイズは元より約三分の一大きくなります。これは4 ÷ 3 ≈ 1.33だからです。小さなファイルでは、増加率がさらに大きくなることがあります。もともとのデータが少ないと、次の4文字の区切りへの切り上げの影響が大きくなるためです。

計算例

上記のPNGの例をデコードすると、画像データは85バイトになります。式を使うと、

base64文字列の長さは実際に116文字で、一致しています。これは元の85バイトに対して36%の増加です（116 ÷ 85 ≈ 1.36）。ファイルが非常に小さいため、33%という値を少し上回ります。

対応している画像形式

デコーダーは、デコードしたデータのバイトシグネチャを読み取り、形式を識別します。次の種類に対応しています。

base64画像をデコードする方法

1. HTML、CSS、APIレスポンス、またはメールから、data:image/...プレフィックスの有無にかかわらず、base64文字列をコピーします。
2. 入力欄に貼り付けます。
3. 入力が止まった少し後に自動的にデコードされるか、デコードボタンを押します。
4. デコードされた画像がプレビュー領域に表示されます。「画像URLをコピー」ボタンでデータURLをコピーできます。また、ブラウザーでは通常の画像要素として描画されるため、プレビュー内の画像を右クリックして保存を選べば、画像自体を保存できます。

base64画像の一般的な用途

• HTML、CSS、JavaScriptへの埋め込み：画像データをコードに直接記述することで、別ファイルへのリクエストを避けられます。
• メールテンプレート：一部のメールクライアントは外部リンク画像をデフォルトでブロックしますが、base64画像を埋め込めば表示されます。
• 単一ファイルのHTMLツール：画像を含むページ全体を、自己完結した1つのファイルとして配布できます。
• APIレスポンス：画像専用のエンドポイントを別に用意せず、JSONペイロード内に画像を含めて送信できます。
• CSSの背景とアイコン：小さなアイコンをデータURLとしてスタイルシートに直接記述することがあります。

base64画像のトレードオフ

base64エンコードは便利ですが、代償もあります。

• エンコード後のテキストは、元のファイルよりおよそ3分の1大きくなります。
• ブラウザーは、リンクされたファイルと同じ方法で埋め込み画像をキャッシュできません。そのため、周囲のページやスタイルシートが読み込まれるたびに再ダウンロードされます。
• ブラウザーは画像を表示する前にbase64テキストをデコードする必要があり、少量の追加処理が発生します。
• サイズが増え、キャッシュも効かなくなるため、base64の埋め込みは、アイコンや単純なロゴなどの小さな画像に向いています。大きな写真は、通常の画像ファイルとして配信するほうが適しています。

よくある質問

base64画像デコーダーとは何ですか？

これは、base64でエンコードされたテキスト文字列を、PNG、JPEG、GIF、WebP、BMP、SVGなどの表示可能な画像ファイルに戻すツールです。

base64画像をデコードするにはどうすればよいですか？

data:image/...プレフィックスの有無にかかわらず、base64文字列をデコーダーに貼り付けます。文字列を読み取り、デコードして、結果の画像を表示します。

データURLプレフィックスなしでbase64文字列をデコードできますか？

はい。デコーダーはそれを生のbase64データとして扱い、バイト列をデコードして、先頭数バイトをシグネチャから読み取り、PNG、JPEG、GIF、WebP、BMP、ICOなどの形式を識別します。SVGは、デコードしたテキスト内に<svgタグがあるか調べて識別します。どれにも一致しない場合、形式を推測せず、文字列は画像ではないようだと報告します。

base64画像をデコードできないのはなぜですか？

最もよくある原因は、文字列が途中で切れていること、またはbase64の文字集合に含まれない余分な文字があることです。-と_を、+と/の代わりに使うURLセーフ形式も、拒否されます。末尾の=パディングがなくても、通常は問題ありません。文字列全体を、data:image/...プレフィックスがある場合はそれも含めてコピーすると、たいてい解決します。

base64エンコードはセキュリティや暗号化の一種ですか？

いいえ。base64はバイト列をテキストとして表す方法にすぎず、何も隠しません。誰でも無料のツールを使って数秒でbase64文字列をデコードできるため、非公開の画像やその他のデータを保護する目的で使用してはいけません。

base64文字列は元の画像よりどの程度大きくなりますか？

大きなファイルでは約3分の1大きくなります。元データ3バイトごとに、テキスト文字4文字へ変換されるためです。100 KBの画像は、エンコードするとおよそ133 KBになります。小さな画像では、切り上げの影響により増加率がやや高くなることがあります。

歴史

Base64はメールに由来します。メールはかつてプレーンテキストしか運べませんでした。1987年のプライバシー強化メール仕様では、3バイトを4個の印字可能文字（64文字の集合から選ぶ）に変換する方法が説明されていました。data: URLスキームが1998年に登場したことで、base64画像をWebページに直接埋め込めるようになりました。現在のbase64の定義はRFC 4648（2006年）です。

参考文献

1. IETF。RFC 4648: The Base16, Base32, and Base64 Data Encodings。RFC 4648 — 3バイトが4文字になる。=によるパディング。
2. IETF。RFC 2397: The "data" URL scheme。RFC 2397 — データURLの構文。;base64は省略可能。1998年発行。
3. WHATWG。Infra Standard。forgiving-base64デコード — 空白の除去、パディングの処理。
4. WHATWG。MIME Sniffing Standard。画像タイプパターンの照合 — 画像のバイトシグネチャ。
5. MDN Web Docs。Base64。Base64用語集の項目 — エンコード後の出力は約三分の一大きくなる。
6. IETF。RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I。RFC 989 — 1987年の、3バイトを4個の印字可能文字にする電子メールのエンコード方式。