Base64画像プレビュー・デコーダ
ガイド
Base64画像プレビュー・デコーダ
ベース64エンコードされた画像文字列を貼り付け、自動的にファイルのマジックバイトから形式を検出し、レンダリングされた画像をプレビューできます。解码された画像、ピクセルサイズ、および解码されたバイトサイズはすべてブラウザ内で計算され、サーバーへのアップロードやAPIへの待機は不要です。オプション data: URIプレフィックスは自動的に削除され、JSONパラメータ、CSSの背景、メールのソース、または生成されたSDKレスポンスからの原始ベース64文字列を貼り付けても、そのまま動作します。
使用方法
- ベース64文字列をコピーします。これは原始パラメータであったり、または
data:image/...;base64,URIプレフィックスを含む場合もあります。どちらも受け入れられます。 - を入力フィールドに貼り付けます。あなたが入力を終えた瞬間、ツールは画像を解码し、プレビューします。 Base64 文字列 検出された形式、ピクセルサイズ、解码されたバイトサイズ、および元のベース64文字数を確認できます。
- 検出された形式に合った正しいファイル拡張子で、解码されたファイルをコンピュータにダウンロードできます。
- クリック 画像をダウンロード 自動形式検出
機能
- PNG、JPEG、GIF、WebP、BMP、ICO、SVG、AVIF、HEICがマジックバイトから検出され、データURIのヒントだけではなく、すべて認識されます。 ピクセルサイズ
- 幅と高さはレンダリングされた画像から読み取られ、実際のインクルーシブサイズを表示します。 解码ファイルサイズ
- 解码後の実際のバイナリバイト数が表示され、ベース64文字長と比較されます。 URIプレフィックスを削除
- 入力が 、だけ
data:image/png;base64,、またはURLセーフなベース64変換を始めても、すべてのケースで動作します。iVBORw0...画像ファイルとしてダウンロード - 検出された形式に合った正しい拡張子で、解码されたバイトを1クリックでコンピュータに保存できます。 ベース64文字列はあなたのブラウザに留まります。プライベートスクリーンショット、内部資産、またはセンシティブなデザインファイルの使用に安全です。
- 純粋なクライアントサイド 使用シーン
ベース64画像文字列に遭遇し、それが実際に何であるかを確認する必要があるとき、このツールを使います。APIレスポンスに埋め込まれたサムネイルをデバッグする、CSSやHTMLメールに埋め込まれた画像を確認する、トラッキングピクセルを逆エンジニアリングする、画像生成APIからの出力の確認を行う、またはデータベースエクスポートから資産を回復するなどです。レンダリングがブラウザ内で行われるため、プロダクションに送信する前にベース64パラメータが正しく構成されているかを迅速に確認する手段としても使えます。
ベース64エンコードとは何ですか?画像に使用される理由は?
よくある質問
-
ベース64は、任意のバイナリデータを64の印刷可能なASCII文字で表現するエンコードスキームです。これは、JSON、HTML属性、メール本文、URL、古典的なXMLなどの多くの伝送チャネルが原始バイトを安全に送信できないため、存在します。画像をベース64にエンコードすることで、テキストのみのコンテキストにファイル全体を埋め込むことが可能になり、サイズは約1/3増加します。
HTMLおよびCSSにおけるデータURIはどのように機能しますか?
-
データURIは
の形式を持ちます。ブラウザがこの形式をHTMLの
data:[mediatype][;base64],<payload>、CSSのimg src、または他のリソース属性に見つけた場合、ネットワークリクエストを行わず、埋め込まれたパラメータを解码し、リソースとして扱います。これはリクエストのラウンドトリップを削減しますが、周囲のHTMLやCSSを大きくし、それ自体でキャッシュできません。background-imageベース64エンコードされた画像データが元のバイナリより大きい理由は? -
ベース64は3バイトのバイナリデータを4つのASCII文字にパッケージ化し、それだけで33%のサイズ増加を生み出します。パディング文字や行の折り返しはそのオーバーヘッドをわずかに増加させます。概ね、HTTPレベルの圧縮を除いた場合、ベース64文字列は元のファイルの約1.37倍のサイズになります。
ベース64でエンコードできる画像フォーマットは?
-
どの画像フォーマットでもエンコード可能です。ベース64はフォーマットに依存せず、ファイルのバイトを単に表現します。ブラウザは、適切なメディアタイプがプレフィックスに宣言されているか、またはファイルのマジックバイトから検出されている場合、PNG、JPEG、GIF、WebP、BMP、ICO、SVG、および増加するAVIFおよびHEICをデータURIからレンダリングできます。
ベース64画像をインラインにすると、パフォーマンスが悪化する場合がありますか?
-
非常に小さい画像で、重要なパスに保存されている場合、インラインは安価ですが、大きなファイルでは勝ちを失います。ベース64パラメータは、その埋め込まれたドキュメントと分離してキャッシュできません。周囲のマーカーのストリーミングをブロックし、ブラウザが毎回ページロード時に同じバイトを再解析しなければなりません。数キロバイトを超える場合、HTTPキャッシュ付きの通常の
リクエストがほぼ常に速いです。
<img>ベース64エンコードされた画像(URIプレフィックス付きまたはなし)を貼り付けます
恵 スコアボードが到着しました!
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します!
