---
title: "画像Base64デコード - Base64文字列を画像データに戻す"
description: Base64文字列やデータURIを画像にデコードして確認できるツールです。PNG、JPG、GIFなどの画像データを復元し、Base64画像の内容確認や保存に利用できます。
canonical_url: "https://web-toolbox.dev/tools/base64-decode-image"
meta:
  author: K
  "og:description": Base64文字列やデータURIを画像にデコードして確認できるツールです。PNG、JPG、GIFなどの画像データを復元し、Base64画像の内容確認や保存に利用できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/base64-decode-image-24c1fd46.png"
  "og:image:alt": 画像Base64デコード
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "画像Base64デコード - Base64文字列を画像データに戻す"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **画像Base64デコード**

Base64文字列を画像ファイルにデコード

**Base64テキスト**

## **Base64デコード画像**

## 画像Base64デコードツールとは？

画像のData URLやBase64文字列を入力して、ブラウザ上で画像として表示を確認するツールです。HTML、CSS、APIレスポンスなどに含まれる画像データが実際にどんな見た目になるかをすぐ確かめたいときに役立ちます。

このツールは、文字列を画像としてプレビューする用途に向いています。貼り付けた内容がそのまま表示対象になるため、埋め込み画像の確認やData URLの検証がしやすくなっています。

## 使い方

1. Base64テキストを入力欄へ貼り付けます。
2. 右側のプレビューで画像を確認します。

入力するとすぐに表示が切り替わるため、Data URLの内容をその場で確かめられます。

## 使うときのポイント

### Data URL形式の文字列が必要

このツールは、`**img**` 要素の `**src**` としてそのまま表示できる文字列を前提にしています。つまり、先頭に `**data:image/...;base64,**` のような宣言が付いた形式が必要です。

例:

- `**data:image/png;base64,...**`
- `**data:image/jpeg;base64,...**`
- `**data:image/svg+xml;base64,...**`

Base64本体だけでは画像形式を判断できないため、そのままでは正しく表示できない場合があります。

## 活用シーン

- HTML の `**img src="data:image/..."**` の見た目を確認したいとき
- CSS の `**background-image**` に埋め込まれた画像を確認したいとき
- APIレスポンスやJSON内の画像データを目で見たいとき
- Data URLが正しく作れているか簡単にチェックしたいとき

## 入出力例

```text
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
```

このようなData URL形式の文字列を貼り付けると、PNG画像としてプレビュー表示されます。

## 使うときの注意点

- Data URL宣言がない文字列は、そのままでは画像として表示できない場合があります
- 非常に長い文字列や大きな画像は、ブラウザ上で扱いにくくなることがあります
- このツールは画像プレビュー用であり、画像編集や再保存の機能はありません

**使ってみてどうでしたか？**

最終更新: 2022年4月17日

### **関連ツール**

- [<h4>**ダミー画像ジェネレーター**</h4>](https://web-toolbox.dev/tools/dummy-image-generator)
- [<h4>**画像リサイズ**</h4>](https://web-toolbox.dev/tools/image-resizer)
- [<h4>**JPG変換**</h4>](https://web-toolbox.dev/tools/jpg-converter)
- [<h4>**ピクセルアート変換**</h4>](https://web-toolbox.dev/tools/pixelart-converter)
- [<h4>**PNG変換**</h4>](https://web-toolbox.dev/tools/png-converter)
- [<h4>**QRコードリーダー**</h4>](https://web-toolbox.dev/tools/qrcode-reader)
- [<h4>**角丸画像ジェネレーター**</h4>](https://web-toolbox.dev/tools/rounded-corner-image-generator)
- [<h4>**SVGブロブジェネレーター**</h4>](https://web-toolbox.dev/tools/svg-blob-generator)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/base64-decode-image#webpage","@type":"WebPage","description":"Base64文字列やデータURIを画像にデコードして確認できるツールです。PNG、JPG、GIFなどの画像データを復元し、Base64画像の内容確認や保存に利用できます。","name":"画像Base64デコード - Base64文字列を画像データに戻す","url":"https://web-toolbox.dev/tools/base64-decode-image","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/base64-decode-image"]}]},{"@id":"https://web-toolbox.dev/tools/base64-decode-image#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Base64文字列やデータURIを画像にデコードして確認できるツールです。PNG、JPG、GIFなどの画像データを復元し、Base64画像の内容確認や保存に利用できます。","name":"画像Base64デコード - Base64文字列を画像データに戻す","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.