Base64 画像エンコーダー / デコーダー
画像を HTML・CSS スニペット付きの Base64 Data URI に変換し、Data URI をダウンロード可能な画像にデコードします。
Base64 画像エンコーダー／デコーダーはすべてブラウザ内で動作します。ドロップした画像や貼り付けた Data URI はデバイス上で処理され、ArrayKit にアップロードされることはありません。
Base64 エンコーダー／デコーダーを開く
Base64 画像エンコーダー / デコーダー について
Base64 画像エンコーダーは、あらゆる画像を HTML や CSS にそのまま貼り付けられる Base64 Data URI に変換します。PNG、JPEG、WebP、SVG、GIF をドロップすると、Data URI に加えて本番ですぐ使えるスニペット——編集可能な alt テキスト付きの <img> タグと CSS の background-image ルール——がそれぞれワンクリックコピー付きで即座に表示されます。MIME タイプ、ファイルサイズ、ピクセル寸法、文字列の長さも示すので、何を埋め込んでいるかが正確にわかります。デコードモードに切り替えれば、Data URI を貼り付けて画像をプレビューし、正しい拡張子でダウンロードできます。フロントエンド開発者、メールやテンプレートの作成者、リクエストを節約するために小さなアイコンを埋め込む人のために作られています。すべてブラウザ内でローカルに動作するため、画像はデバイスから出ません。
機能
- ドラッグ＆ドロップまたはクリックで PNG、JPEG、WebP、SVG、GIF を Base64 Data URI にエンコード
- 生の Data URI、すぐ使える HTML <img> タグ、CSS background-image ルールをワンクリックでコピー
- アクセシビリティのため、生成された <img> スニペットにそのまま入る編集可能な alt テキスト
- MIME タイプ、ファイルサイズ、ピクセル寸法、Data URI の長さを一目で表示
- デコードモードは Data URI を貼り付けて画像をプレビューし、正しい拡張子でダウンロード
- 画像が大きすぎて Base64 として効率的に埋め込めない場合に警告
- ラスター写真だけでなく SVG や GIF にも対応し、適切なダウンロード拡張子を付与
- 完全にブラウザ内で動作するため、画像がサーバーにアップロードされることはない
Base64 画像エンコーダー / デコーダー の使い方
- 画像 → Base64 タブを選んだまま、ドロップゾーンに画像をドロップする
- Base64 Data URI、HTML <img> タグ、または CSS background-image ルールをコピーする
- 必要なら alt テキストを入力して <img> スニペットに組み込む
- Base64 → 画像 に切り替え、Data URI を貼り付けて画像をプレビューしダウンロードする
例
入力
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…
出力
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />
PNG が、追加のネットワークリクエストなしで読み込まれるインライン <img> タグになります。
よくあるエラーとトラブルシューティング
- Data URI を貼り付けると「The Data URI payload is not valid Base64.」と表示される。 — data:image/… で始まり ';base64,' を含む文字列全体をコピーし、エディターが折り返した余分な引用符や改行を取り除いてください。
- デコードした画像がプレビューされない。 — MIME タイプがデータと一致しているか確認してください——image/jpeg と表示された PNG の中身はレンダリングされません。正しい Data URI を得るには元のファイルを再エンコードしてください。
- 画像を埋め込んだ後、HTML や CSS ファイルが肥大化した。 — Base64 は約 33% のオーバーヘッドを加え、埋め込んだ画像は個別にキャッシュされません。小さなアイコンだけを埋め込み、大きな画像は通常のファイルとしてリンクしてください。
- 別のツールの SVG Data URI が違って見える。 — 一部のツールは SVG を Base64 ではなくパーセントエンコードします。このエンコーダーは常に Base64 を使います。どちらも有効な Data URI ですが、バイト単位で互換ではありません。
よくある質問
- Base64 画像 Data URI とは何ですか？
- Data URI は data:image/png;base64,XXXX のような文字列の中に画像を直接埋め込みます。画像のバイトが Base64 エンコードされるため、別ファイルやリクエストなしで画像全体を HTML の src や CSS の url() に入れられます。
- どの画像形式をエンコードできますか？
- ブラウザが読める画像なら何でも——PNG、JPEG、WebP、GIF、SVG、BMP、AVIF、ICO が動作します。デコーダーは Data URI から MIME タイプを読み取り、合った拡張子でのダウンロードを提示します。
- 画像を Base64 で埋め込むべきですか？
- 埋め込みは、リクエストを避けることが有効なアイコンやメール画像など、小さく頻繁に再利用する素材に向いています。大きな画像ではたいてい不利です。Base64 はサイズを約 3 分の 1 増やし、データ単体ではキャッシュできないからです。
- Data URI を画像ファイルに戻せますか？
- はい。Base64 → 画像 に切り替えて data:image/…;base64, の文字列を貼り付けると、ツールが画像をプレビューし、正しい拡張子でダウンロードできます。
- エンコードすると画像はアップロードされますか？
- いいえ。エンコーダーはブラウザの FileReader でファイルを読み、デバイス上で Data URI を構築します。ArrayKit やサーバーには何も送られません。
- なぜ Base64 文字列は画像より大きいのですか？
- Base64 は 3 バイトを 4 文字で表すため、エンコード後のテキストは元のバイナリより約 33% 大きく、さらに短い data:…;base64, の接頭辞が付きます。このオーバーヘッドは正常で想定どおりです。
関連ツール
すべての ArrayKit ツール