Base64画像デコーダー | オンラインで画像をデコード＆プレビュー
Base64文字列をJPEG、PNG、GIF、WebP、SVGなどの画像形式として即座にデコードし、その場でプレビュー表示する無料オンラインツール。データURL形式と生のBase64文字列の両方に対応しており、開発中の画像データの中身をすばやく確認する作業に役立つ。
Base64画像デコーダーとビューアー
Base64でエンコードされた画像文字列を貼り付けて、画像をデコードして表示します。
画像プレビュー
表示する画像がありません。Base64文字列を貼り付けて自動的にデコードしてください。
JPEG、PNG、GIFなどの一般的な画像形式に対応しています。
手順
1. 上のテキストエリアにBase64でエンコードされた画像文字列を貼り付けます。
2. 入力すると画像が自動的にデコードされます。または「画像をデコード」ボタンをクリックします。
3. デコードされた画像が下のプレビューエリアに表示されます。
注意：文字列は最適な結果のために「data:image/」で始まる必要がありますが、このプレフィックスのない文字列もデコードを試みます。
ドキュメンテーション
base64画像デコーダーとは何ですか？
base64画像デコーダーは、base64でエンコードされたテキスト文字列を画像に戻すツールです。base64は、画像ファイルのバイト列などのバイナリデータを、64個のプレーンテキスト文字（英字、数字、+、/、パディング用の=）だけで表す方法です。ブラウザー、メール、多くのAPIはこの方法で画像を保存するため、画像を別ファイルではなくプレーンテキスト内に含めて送信できます。デコーダーはその処理を逆に行います。文字列を貼り付けると、元の画像が表示されます。
データURL形式
Web上では、base64画像は通常データURLとして記述されます。形式は次のとおりです。
1data:[<media type>];base64,<data>
2例：
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2各部分にはそれぞれ役割があります。
data:は、通常のWebアドレスではなくデータURLであることを示します。image/pngはMIMEタイプで、ファイルの種類をブラウザーに伝えます。;base64は、コンマ以降のデータがbase64でエンコードされていることを示します。- コンマ以降のすべてが、エンコードされた画像そのものです。
デコーダーの仕組み
デコードは4つの手順で行われます。
- ツールは、文字列が
data:で始まっているか確認します。data:text/plainのように画像以外のメディアタイプを指定するデータURLは、画像として表示できないため、直ちに拒否されます。 - 長いbase64文字列が複数行に折り返されることがあるため、空白、タブ、改行を取り除きます。RFC 2397でも認められている、base64ではなくパーセントエンコーディングを使ったペイロードは、変更せずに通過させます。
- base64テキストをデコードして、生のバイト列に戻します。
- 結果の先頭数バイトを調べます。一般的な画像形式はすべて、シグネチャまたは「マジックナンバー」と呼ばれる固定されたバイト列で始まります。PNGファイルは
89 50 4E 47、JPEGファイルはFF D8 FFで始まるなど、形式ごとに異なります。デコーダーはこれらのシグネチャを照合し、特定した種類を画像に付与します。
ラベルよりもバイト列が優先されます。データURLがdata:image/pngを示していても、バイト列がFF D8 FFで始まる場合、デコーダーはURLをdata:image/jpegとして再構築します。そのため、「画像URLをコピー」ボタンが提供する文字列が、内容を誤って示すことはありません。
文字列にdata:プレフィックスがない場合、デコーダーはそれを生のbase64データとして扱い、デコードして同じ方法でシグネチャを読み取ります。バイト列が既知の画像シグネチャのいずれにも一致せず、SVGテキストにも見えない場合、文字列は画像ではないようだと報告します。形式を推測したり、デフォルトの種類にフォールバックしたりはしません。
SVGはバイナリではなくテキスト形式（XML）であるため、固定されたバイトシグネチャがなく、別の方法で処理されます。デコーダーは、デコードしたテキストの先頭1024バイトを調べ、<svgタグ、<?xml version="1.0"?>のようなXML宣言に続くタグ、またはSVG文書型宣言に続くタグを探します。UTF-8ファイルに一部のエディターが付加する、先頭のバイト順マークは無視されます。SVGはバイトシグネチャから識別できないため、image/svg+xmlを指定するデータURLでは、指定されたタイプが維持されます。
base64画像のサイズ計算式
base64では、バイナリデータ3バイトごとにテキスト文字4文字へ変換します。エンコード後の長さは次の式で求められます。
1encoded_characters = 4 × ⌈original_bytes ÷ 3⌉
2⌈ ⌉記号は「次の整数へ切り上げる」ことを意味します。base64は常に4文字単位で処理し、余ったグループには=記号でパディングを施すためです。
大きなファイルでは、4 ÷ 3 ≈ 1.33となるため、サイズはおよそ33%増加します。小さなファイルでは、データ量がもともと少ないため、次の4文字グループへ切り上げる影響が大きくなり、増加率が高くなることがあります。
計算例
上記のPNGの例をデコードすると、画像データは85バイトになります。式を使うと、
14 × ⌈85 ÷ 3⌉ = 4 × 29 = 116
2base64文字列の長さは実際に116文字で、一致しています。これは元の85バイトに対して36%の増加です（116 ÷ 85 ≈ 1.36）。ファイルが非常に小さいため、33%という値を少し上回ります。
対応している画像形式
デコーダーは、デコードしたデータのバイトシグネチャを読み取り、形式を識別します。次の種類に対応しています。
| 形式 | MIMEタイプ | 照合するシグネチャ |
|---|---|---|
| PNG | image/png | 89 50 4E 47 0D 0A 1A 0A |
| JPEG | image/jpeg | FF D8 FF |
| GIF | image/gif | GIF87aまたはGIF89a |
| WebP | image/webp | RIFF、無視する4バイト、その後にWEBPVP |
| BMP | image/bmp | BM |
| ICO / CUR | image/x-icon | 00 00 01 00または00 00 02 00 |
| SVG | image/svg+xml | シグネチャなし。<svgタグを含むテキストとして検出 |
base64画像をデコードする方法
- HTML、CSS、APIレスポンス、またはメールから、
data:image/...プレフィックスの有無にかかわらず、base64文字列をコピーします。 - 入力欄に貼り付けます。
- 入力が止まった少し後に自動的にデコードされるか、デコードボタンを押します。
- デコードされた画像がプレビュー領域に表示されます。「画像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画像をデコードできないのはなぜですか？
主な原因は3つです。文字列に標準base64アルファベット（A–Z、a–z、0–9、+、/、=）以外の文字が含まれている可能性があります。一部のWebトークンで使われるbase64urlバリアントは代わりに-と_を使うため、受け付けられません。文字列が途中で切れて、4の倍数より1大きい長さになっている可能性もあります。このような長さの有効なbase64文字列は存在しません。あるいは、バイト列が対応している画像形式のいずれでもない可能性があります。=のパディングだけが欠けていても問題はなく、デコード前に空白や改行は取り除かれます。
base64エンコードはセキュリティや暗号化の一種ですか？
いいえ。base64はバイト列をテキストとして表す方法にすぎず、何も隠しません。誰でも無料のツールを使って数秒でbase64文字列をデコードできるため、非公開の画像やその他のデータを保護する目的で使用してはいけません。
base64文字列は元の画像よりどの程度大きくなりますか？
大きなファイルでは約3分の1大きくなります。元データ3バイトごとに、テキスト文字4文字へ変換されるためです。100 KBの画像は、エンコードするとおよそ133 KBになります。小さな画像では、切り上げの影響により増加率がやや高くなることがあります。
歴史
base64は、プレーンテキストしか扱えないメールシステムでバイナリデータを送信するために、1970年代と1980年代に作られたエンコード方式から発展しました。メール用の方式としてRFC 989（1987年）および後のRFC 1421で正式化されました。Webページへの画像埋め込みは、data: URLスキームがRFC 2397（1998年）で定義されると可能になり、開発者が個別のHTTPリクエストを減らす方法を求めるようになった2000年代半ば、とくに低速なモバイル接続で、より一般的になりました。