エンコード・デコード

画像 ⇄ Base64変換

画像 ⇄ Base64変換ツールは、画像ファイルを Base64 文字列（Data URL）に変換したり、Base64 文字列から画像を復元してプレビュー・ダウンロードできるツールです。HTML や CSS にアイコンを inline で埋め込みたい場合や、API レスポンスに含まれる Data URL の中身を確認したい場合に便利です。

変換モード

ここに画像をドラッグ＆ドロップ

または

PNG / JPG / WebP / GIF / SVG / AVIF / ICO 対応。1 セッションあたり最大 10 ファイル、1 ファイル 10 MB まで。

画像を追加すると、ここに変換結果が表示されます。

画像とテキストはすべてお使いのブラウザ内で処理され、外部サーバーには送信されません。

Base64エンコード・デコード

テキストと Base64 文字列を相互に変換します。URL-safe Base64 と 76 文字改行（MIME）にも対応し、入力するとリアルタイムに結果が表示されます。ブラウザだけで完結します。

URLエンコード・デコード

テキストを URL エンコード（パーセントエンコーディング）に変換したり、URLエンコードされた文字列を元のテキストに戻したりします。クエリパラメータ向けと URL 全体向けの 2 つの変換モードに対応し、入力するとリアルタイムに結果が表示されます。ブラウザだけで完結します。

JWTデコーダー

JWT（JSON Web Token）を貼り付けてヘッダー・ペイロード・署名を分解表示します。標準クレーム（iat / exp / nbf）は人間が読める日時に変換し、期限切れも一目でわかります。HS256 / HS384 / HS512 の署名検証にも対応。ブラウザだけで完結します。

ハッシュ値生成

テキストやファイルから MD5・SHA-1・SHA-256・SHA-512 のハッシュ値を一度に生成します。HMAC（鍵付きハッシュ）と期待値との照合にも対応。md5 変換 / sha256 計算 / ハッシュ計算をブラウザだけで完結。

画像 ⇄ Base64変換ツールとは？

「画像 → Base64」モードでは、PNG / JPG / WebP / GIF / SVG / AVIF / ICO の各形式を複数まとめてドラッグ＆ドロップで読み込めます。読み込んだ画像ごとに縮小プレビューと、元のバイト数・Base64 化後のバイト数を表示し、Data URL に加えて CSS の background-image 用・HTML の <img> タグ用・Markdown の画像記法用の 3 形式のコードスニペットをタブで切り替えてコピーできます。全ファイルの Data URL を 1 つのテキストファイルにまとめて保存することも可能です。

「Base64 → 画像」モードでは、data:image/...;base64,xxx 形式の Data URL でも、プレフィックスを含まない純粋な Base64 文字列でも貼り付けられます。先頭バイトのマジックナンバーから画像形式を自動判定し、プレビューを表示してダウンロードできます。判定できない場合や上書きしたい場合は、プルダウンから形式を手動で選べます。空白・改行・URL-safe（- _）の混在も自動で正規化します。

入力した画像・テキストはすべてお使いのブラウザ内で処理され、外部サーバーへは送信されません。社外秘の画像や個人情報を含むデータの確認にも安心して利用できます。ブラウザだけで完結します。

使い方

上部の「変換モード」で「画像 → Base64」または「Base64 → 画像」を選びます。
画像 → Base64：ドロップゾーンに画像をドラッグ＆ドロップするか「ファイルを選択」から複数まとめて読み込みます。
各カードの「コピー」で Data URL をコピーするか、CSS / HTML / Markdown のタブから目的の形式をコピーします。
「すべて .txt でダウンロード」で、読み込み済みの全 Data URL を 1 つのテキストファイルとして保存できます。
Base64 → 画像：テキスト欄に Data URL またはプレーンな Base64 文字列を貼り付けます。
自動判定が外れた場合は、右上の「形式」プルダウンで画像形式を上書きし、「画像をダウンロード」で保存します。

利用シーン

アイコンや小さな SVG を HTML / CSS に inline で埋め込み、HTTP リクエスト数を削減したい場合。
CSS の background-image にデータ URI として画像を埋め込む際に、その場で Data URL を生成して動作確認したい場合。
API レスポンスや HTML ソースに含まれる `data:image/...;base64,...` の中身を可視化してダウンロードしたい場合。
HTML メール用に画像を inline で埋め込んだサンプルを作成したい場合。
開発中のテストフィクスチャや E2E スナップショット用に、画像を Base64 化してソース管理に含めたい場合。

注意点

1 セッションあたり最大 10 ファイル、1 ファイルあたり最大 10 MB まで読み込めます。これを超える画像は読み込み時に拒否されます。
画像を Base64 化すると、元のバイト数のおよそ 1.33 倍にサイズが増えます。Data URL は単純な圧縮形式ではなく、バイトをテキストで表現するためのエンコーディングです。
100 KB を超える Data URL を CSS の background-image などに inline で埋め込むと、ブラウザキャッシュが効かなくなるため非推奨です。サイズの大きいカードには警告が表示されます。
「Base64 → 画像」では、デコード後の先頭バイトから画像形式（PNG / JPG / WebP / GIF / AVIF / ICO）を自動判定します。SVG はテキスト先頭のタグから判定します。
貼り付けた文字列の空白・改行は自動で除去し、URL-safe Base64 で使われる「-」「_」は標準形式に変換してからデコードします。末尾の「=」パディング省略にも対応します。
判定不能・Base64 として不正・デコード後 50 MB 超の場合は、結果欄にエラーメッセージが表示されます。

よくある質問

画像はサーバーに送信されますか？

送信されません。変換処理はすべてお使いのブラウザ内で完結します。社外秘の画像や個人情報を含むデータの確認にも安心して利用できます。

Base64 にすると画像サイズはどうなりますか？

元のバイト数のおよそ 1.33 倍にテキスト量が増えます。HTTP リクエスト数を減らせる代わりに、ブラウザキャッシュが効かなくなる点に注意してください。大きな画像は通常の URL 参照のままがおすすめです。

どこまで大きな画像を変換できますか？

1 ファイルあたり最大 10 MB までを目安としています。これより大きい画像は、テキスト量が肥大化してブラウザの動作が重くなるため拒否されます。

「data:image/...」のプレフィックスがない Base64 でもデコードできますか？

できます。デコード後の先頭バイトのマジックナンバーから画像形式を自動判定するため、純粋な Base64 文字列だけを貼り付けても動作します。判定できない場合はプルダウンで形式を手動指定してください。

SVG も対応していますか？

対応しています。「画像 → Base64」では SVG ファイルをそのまま読み込めますし、「Base64 → 画像」では Data URL でもプレーンな Base64 でも復元できます（SVG はテキスト先頭が `<?xml` または `<svg` で判定されます）。

透明 PNG はそのまま戻りますか？

戻ります。Base64 はバイト忠実な符号化のため、アルファチャンネルや色情報は損なわれません。元の PNG とビット単位で同一のファイルが復元されます。