🛠️

Whiz Tools

Build • Create • Innovate

Base64画像デコーダーおよびビューア | Base64を画像に変換

Base64エンコードされた画像文字列を即座にデコードしてプレビューします。JPEG、PNG、GIFなどの一般的なフォーマットをサポートし、無効な入力に対するエラーハンドリングも行います。

Base64画像デコーダーとビューア

Base64エンコードされた画像文字列を貼り付けて、画像を表示します。

画像プレビュー

表示する画像がありません。Base64文字列を貼り付けて自動的にデコードを確認してください。

JPEG、PNG、GIFなどの一般的な画像形式をサポートしています。

使い方

1. 上のテキストエリアにBase64エンコードされた画像文字列を貼り付けます。

2. タイプするにつれて画像が自動的にデコードされます。または「画像をデコード」ボタンをクリックします。

3. デコードされた画像が下のプレビューエリアに表示されます。

注:最良の結果を得るために、文字列は「data:image/」で始まるべきですが、このプレフィックスなしでもデコードを試みます。

📚

ドキュメント

Base64 画像デコーダーとビューワー

はじめに

Base64は、バイナリデータをASCII文字列形式で表現するバイナリからテキストへのエンコーディングスキームです。これは、HTML、CSS、JavaScript、JSON、その他のテキストベースの形式に直接画像データを埋め込むために一般的に使用されます。このツールを使用すると、base64エンコードされた画像文字列をデコードし、結果の画像をブラウザで直接表示できます。

Base64エンコーディングは、元のバイナリと比較してデータサイズを約33%増加させますが、バイナリデータを直接含むことができないテキストベースのドキュメントに画像を含めることを可能にします。これは、埋め込みの利便性がサイズの増加を上回る小さな画像(アイコン、ロゴ、またはシンプルなグラフィックなど)に特に便利です。

私たちのBase64画像デコーダーツールは、base64エンコードされた画像文字列を貼り付けて、即座にデコードされた画像を見ることができるシンプルなインターフェースを提供します。JPEG、PNG、GIF、WebP、SVGなど、すべての一般的な画像形式をサポートしており、データURL形式(data:image/...プレフィックス付き)と生のbase64文字列の両方を処理できます。

技術的詳細

Base64エンコーディング形式

Base64エンコーディングは、バイナリデータを64のASCII文字(A-Z、a-z、0-9、+、および/)のセットに変換し、=がパディングに使用されます。Web上の画像の場合、base64データは通常、次の構造を持つデータURLとしてフォーマットされます:

1data:[<media type>][;base64],<data>
2

例えば、base64エンコードされたPNG画像は次のようになります:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

この形式の構成要素は次のとおりです:

  • data: - URLスキーム
  • image/png - データのMIMEタイプ
  • ;base64 - エンコーディング方式
  • , - ヘッダーとデータの間の区切り
  • 実際のbase64エンコードされたデータ

デコーディングプロセス

base64画像文字列をデコードする際には、次のステップが行われます:

  1. 文字列を解析して、データURLプレフィックスが含まれているかどうかを確認します
  2. プレフィックスが存在する場合、画像形式を特定するためにMIMEタイプが抽出されます
  3. base64データ部分が分離され、バイナリデータにデコードされます
  4. バイナリデータがBlobまたは表示可能な画像として変換されるオブジェクトURLに変換されます

入力にデータURLプレフィックスが含まれていない場合、デコーダーはそれを生のbase64データとして扱おうとし、デコードされたバイナリヘッダーから画像タイプを推測するか、PNGにデフォルトします。

サポートされている画像形式

このツールは、すべての一般的なWeb画像形式をサポートしています:

形式MIMEタイプ一般的な使用ケース
JPEGimage/jpeg写真、色数の多い複雑な画像
PNGimage/png透明度が必要な画像、スクリーンショット、グラフィック
GIFimage/gifシンプルなアニメーション、制限された色の画像
WebPimage/webpJPEG/PNGよりも優れた圧縮を提供する現代の形式
SVGimage/svg+xmlベクターグラフィック、スケーラブルなアイコンやイラスト

使用例

Base64エンコードされた画像には、Web開発やその他の分野でいくつかの実用的なアプリケーションがあります:

  1. HTML/CSS/JSに画像を埋め込む:小さな画像をコードに直接含めることでHTTPリクエストを削減し、ページの読み込み時間を改善できます。

  2. メールテンプレート:外部画像をデフォルトでブロックするメールクライアントで画像が正しく表示されることを保証します。

  3. 単一ファイルアプリケーション:すべてのリソースが単一のファイル内に埋め込まれた自己完結型のHTMLアプリケーションを作成します。

  4. APIレスポンス:別の画像エンドポイントを必要とせずに、JSONレスポンスに直接画像データを含めます。

  5. CSSのデータURI:小さなアイコンや背景画像をCSSファイルに直接埋め込みます。

  6. キャンバス操作:キャンバス画像データの保存と転送を容易にします。

  7. オフラインアプリケーション:localStorageやIndexedDBに画像をテキスト文字列として保存します。

パフォーマンスの考慮事項

Base64エンコーディングは利便性を提供しますが、トレードオフも伴います:

  • ファイルサイズの増加:Base64エンコーディングはデータサイズを約33%増加させます。
  • ブラウザキャッシュの未使用:埋め込まれた画像は、外部画像ファイルのように別々にキャッシュできません。
  • 解析オーバーヘッド:ブラウザはレンダリングの前にbase64文字列をデコードする必要があります。
  • メンテナンスの課題:埋め込まれた画像は、参照されたファイルよりも更新が難しいです。

最適なパフォーマンスのために、base64エンコーディングは一般的に小さな画像(10KB未満)に対してのみ推奨されます。大きな画像は、適切にキャッシュおよび最適化できる別々のファイルとして提供されるのが通常です。

代替手段

さまざまな使用ケースに対するbase64エンコーディングの代替手段がいくつかあります:

  1. SVGのインライン埋め込み:ベクターグラフィックの場合、インラインSVGはbase64エンコードされたSVGよりもパフォーマンスと柔軟性を提供することがよくあります。

  2. WebPおよび現代の画像形式:これらはbase64エンコードされたJPEG/PNGよりも優れた圧縮を提供します。

  3. 画像スプライト:複数の小さな画像を単一のファイルに結合し、CSSの位置決めを使用します。

  4. CDN(コンテンツ配信ネットワーク):本番サイトの場合、最適化された画像をCDNから提供することがしばしばより効率的です。

  5. データ圧縮:大量のバイナリデータを転送するために、gzipやBrotliなどの専門的な圧縮アルゴリズムがbase64よりも効率的です。

コード例

以下は、さまざまなプログラミング言語でbase64エンコードされた画像を扱う例です:

1// JavaScript(ブラウザ)で画像をbase64に変換する
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // データURL(base64文字列)として取得
11  return canvas.toDataURL('image/png');
12}
13
14// base64画像を表示する
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // データURLプレフィックスがない文字列を処理
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML実装

以下は、HTMLにbase64画像を直接埋め込む方法です:

1<!-- HTMLにbase64画像を直接埋め込む -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64エンコードされた画像">
3
4<!-- base64背景画像を使用したCSS -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

歴史

Base64エンコーディングは、1970年代の電子メールシステムの開発にそのルーツがあります。これは、バイナリデータをASCIIテキストのみを処理するシステムを通じて送信するという問題を解決するために設計されました。

エンコーディングスキームは1987年にRFC 989の発表により正式化され、プライバシー強化メール(PEM)標準が定義されました。これは後にRFC 1421およびその他の関連標準で更新されました。「base64」という用語自体は、エンコーディングがバイナリデータを表現するために64の異なるASCII文字を使用することに由来しています。

Web開発の文脈では、base64エンコードされた画像は、データURIの登場とともに人気を博しました。これは1998年にRFC 2397で最初に提案され、バイナリデータをHTML、CSS、その他のWebドキュメントに直接含めることを可能にしました。

Web開発におけるbase64エンコードされた画像の使用は、特にHTTPリクエストを削減し、ページの読み込み時間を改善しようとする開発者によって2000年代中頃に広まりました。この手法は、モバイルWeb開発の台頭に伴い、遅いモバイル接続でのパフォーマンスが重要であるため、特に受け入れられました。

今日、base64エンコーディングはWeb開発において重要なツールのままですが、その使用はよりターゲットを絞ったものになっています。現代のアプローチでは、base64エンコーディングは通常、小さな重要な画像に対して選択的に使用される一方で、より効率的な配信方法(HTTP/2など)が大きな資産に対して利用されています。

参考文献

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)