Base64からPNGへ:data URIをブラウザでデコード

Base64文字列やdata:URIを貼り付けて、ローカルでPNGにデコード。アルファ透過を保持し、アップロードもサーバーも不要。完全にクライアント側でデコードします。

ブラウザーネイティブ
プライバシー第一
無料

今すぐ変換

または

ファイルをここにドラッグ&ドロップ

または

使い方

開発者は別途のネットワークリクエストを省くために画像をBase64で埋め込み、HTML、CSSの背景指定、JSONペイロード、SVGマークアップにプレーンテキストとして直接インライン化します。しかし最終的には、デザインツールで開いたり、チケットに添付したり、正規のアセットとして保存したりするために、本物のファイルが必要になります。このページは、そのエンコード文字列を受け取り、デコードしたPNGを書き出します。 テキスト(生のBase64の塊、または完全なdata:image/...;base64,のURI)をボックスに貼り付けるか、文字列を保存した.txtファイルを読み込みます。デコーダーはカンマが存在すれば最初のカンマでdata URIヘッダーを切り離し、Base64を生のバイトに戻し、そのバイトをブラウザの画像デコーダーに渡し、結果をキャンバスに描画して、PNGとして再エンコードします。元データにアルファチャンネルがあれば、その透過はそのまま出力に引き継がれます。 知っておきたい点:PNGのエンコード自体は可逆なので、劣化は一切加わりません。ただしこのツールは、元データが持っていたピクセルをそのまま再現します。Base64がもともとJPEGだった場合、得られるのは既に圧縮された画像のピクセル単位で正確なPNGであり、JPEGが捨てたディテールが復元されるわけではありません。すべての処理はページ内で完結します。デコード、描画、再エンコードはすべてブラウザのタブ内で行われるため、非公開のスクリーンショットや社内の図を含む文字列が端末から出ることはありません。

関連変換ツール

あなたのワークフローに役立つ他の強力なコンバーターを発見してください

Base64を画像に変換:任意のdata URIをデコード

Base64文字列やdata: URIを貼り付けて、表示できるPNGファイルにデコード。ブラウザ内で動作し、どの画像形式にも対応、アップロードは一切なし。

Base64をJPEGに変換:データURIをJPGファイルにデコード

Base64文字列やデータURIを貼り付けるだけで、本物のJPEGをダウンロード。デコードはすべてブラウザ内で完結し、アップロードは一切ありません。無料、即時、プライベート。

AVIFをPNGに変換:AV1画像をブラウザでデコード

AVIF(AV1)画像を、ブラウザ内で透明度をピクセル単位で保ったままPNGに可逆変換。アップロードもサーバーも不要、完全プライベートで無料です。

BMPからPNGへの変換:ビットマップを劣化なしで圧縮

WindowsのBMPビットマップをブラウザ内でPNGに変換。劣化なし、アップロードなし。1ピクセルも変えずに、無圧縮ビットマップの肥大化を解消します。

PSDをPNGに変換:Photoshopファイルをブラウザで開く

Photoshopなしで.psdファイルを開けます。このツールはファイルに保存された統合プレビューを読み取り、透明部分を保ったまま1枚のPNGとして書き出します。すべてブラウザ内で完結します。

PNGをSVGに変換:ロゴ・アイコンをベクター化

PNGのロゴ・アイコン・線画をブラウザで編集可能なSVGパスにトレース。無料、アップロードなし、透かしなし。ベクター化の限界も正直に説明します。

.png.jpg +1
今すぐ試す

機能

  • ファイルアップロード不要
  • 100% プライバシー重視
  • ブラウザー駆動
  • 高速処理
  • 永久無料

対応フォーマット

.txt

出力: PNG

技術仕様

input Format Base64テキストまたはdata:URI(貼り付けまたは.txtファイル)
output Format PNG (Portable Network Graphics)
compression Type 可逆PNG(DEFLATE)。デコードによる追加の劣化はなし
quality Retention デコード元のピクセル単位で正確な再現。PNGエンコードは可逆
color Space Support 完全な8ビットアルファチャンネル付きのRGBおよびRGBA
max Resolution 端末のメモリのみによる制限
processing Time 即時、ブラウザ内で実行

主な利点

  • 生のBase64と完全なdata:URIの両方を、手作業の整形なしでデコード
  • ロゴやアイコンのアルファ透過をそのまま保持
  • 完全にブラウザ内で動作するため、文字列も画像もアップロードされない
  • PNGをダウンロードする前にプレビューを表示
  • 貼り付けた文字列、またはBase64を保存した.txtファイルに対応
  • 可逆のPNGエンコードはデコードしたピクセルに劣化を加えない

一般的な使用例

  • HTMLやCSS内のインライン画像を本物のPNGファイルに戻す
  • データベースエクスポートでBase64の列として保存された画像を取り出す
  • APIやJSONレスポンスにインラインで返された画像を保存する
  • SVGやHTMLメールテンプレートのdata URIからアイコンを復元する
  • ログや設定ファイル内のBase64の塊が実際に何として表示されるか確認する
  • 元のアセットが必要なデザイナーにデコードした元PNGを渡す

プロのヒント

  • data:image/...;base64,のプレフィックスがあればそのまま貼り付けてよい。デコーダーはどちらでも処理する
  • 非常に長い文字列は、エディタのもたつきを避けるため貼り付けずに.txtファイルを読み込む
  • デコード前に、エディタが文字列に折り返した改行やスペースを取り除く
  • 元がJPEGの場合、PNGは可逆なのでファイルが大きくなることを見込んでおく
  • ダウンロード前にプレビューで透過が残っているか確認する

よくある質問

どちらも使えます。HTMLやCSSにあるそのままの完全なdata:image/png;base64,iVBORw0KGgo...のURIを貼り付けても、ヘッダーを除いたペイロードだけを貼り付けても構いません。デコーダーは最初のカンマで分割し、それより前をすべて捨てるので、事前に文字列を整える必要はありません。
はい。PNGは完全なアルファチャンネルを持ち、キャンバスでのデコードはピクセル単位の透過をそのまま維持します。元データで背景が透過のロゴやアイコンは、ダウンロードしたPNGでも透過のまま残り、背後に白い箱が塗りつぶされることはありません。
それでもデコードされます。ブラウザはバイトが実際にどの形式かを読み取り、ピクセルをPNGとして再エンコードします。得られるのはそのピクセルの忠実なPNGコピーですが、JPEG圧縮が既に捨てたディテールは復元されず、PNGは可逆でJPEGはそうでなかったため、PNGファイルは通常より大きくなります。
すべてブラウザ内で行われます。文字列はご自身の端末上でデコードされ、キャンバスに描画され、PNGにエンコードされます。テキストもバイトも画像もサーバーには送信されません。エンコードされたデータが非公開のスクリーンショット、書類のスキャン、社内アセットである場合に重要です。
Base64はバイナリを約3分の1ふくらませるため、大きな画像は非常に長い文字列になります。上限は固定値ではなく、端末で利用できるメモリです。巨大な貼り付けでテキストボックスがもたつく場合は、同じ文字列を.txtファイルから読み込む方が安定します。
たいていは文字列が途中で切れているか、余計な文字が混じっています。ペイロード全体をコピーし、エディタが折り返した改行やスペースを取り除き、他のバイナリではなく実際に画像をエンコードしているか確認してください。最も多い失敗は、画像データが終わる前に切れている、コピーが中途半端な文字列です。
はい。Base64が.txtファイルにある場合、そのファイルを読み込めば、ツールが内容を読み取り、貼り付けと同じようにデコードします。データベースの列からエクスポートしたり、APIレスポンスのログから取り出したりした長い文字列に便利です。