画像⇔Base64変換

画像とBase64文字列をワンクリックで相互変換

画像ファイルをBase64エンコード文字列に変換したり、Base64文字列から画像を復元できるツールです。ドラッグ&ドロップまたはファイル選択で画像を読み込み、Data URI形式やBase64のみの形式でコピーできます。HTMLやCSSに画像を直接埋め込む際に便利です。すべての処理はブラウザ内で完結し、画像データがサーバーに送信されることはありません。

📁

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

または

使い方

1

変換方向を選ぶ

上部のタブで「画像→Base64」または「Base64→画像」を選択します。画像ファイルをテキストに変換したい場合は前者、テキストから画像を復元したい場合は後者を選んでください。

2

画像→Base64の場合

画像ファイルをドラッグ&ドロップするか、「ファイルを選択」ボタンをクリックして画像を読み込みます。PNG、JPEG、GIF、WebP、SVGなど主要な画像形式に対応しています。読み込み後、Data URI形式とBase64のみの形式の両方が自動的に生成されます。

3

Base64→画像の場合

テキストエリアにBase64文字列を貼り付けて「画像に変換」ボタンを押します。Data URIプレフィックス（data:image/png;base64,...）付きでもBase64文字列のみでも自動判定して変換されます。復元された画像はプレビュー表示され、ダウンロードも可能です。

4

結果をコピー・ダウンロード

Base64変換結果は「コピー」ボタンでクリップボードにコピーできます。画像復元の場合は「ダウンロード」ボタンで画像ファイルとして保存できます。文字数も表示されるため、サイズの目安が一目でわかります。

Base64エンコーディングとは

Base64は、バイナリデータをASCII文字列に変換するエンコーディング方式です。A-Z、a-z、0-9、+、/の64種類の文字（およびパディング用の=）を使ってデータを表現します。画像などのバイナリファイルをテキストとして扱えるようになるため、HTMLやCSSに画像を直接埋め込んだり、JSONやXMLでバイナリデータを送受信する際に広く使われています。

Base64でエンコードすると、データサイズは元の約1.33倍（約33%増）になります。そのため、大きな画像ファイルをBase64で埋め込むとHTMLやCSSのファイルサイズが大幅に増加するため、アイコンやロゴなどの小さな画像に使用するのが一般的です。目安として、10KB以下の画像であればBase64埋め込みによるパフォーマンスへの影響は軽微です。

Data URIスキームについて

Data URIは「data:[MIMEタイプ];base64,[Base64文字列]」の形式で、画像データをURL内に直接埋め込む方式です。HTMLのimg要素のsrc属性やCSSのbackground-imageプロパティで使用でき、外部ファイルを参照せずに画像を表示できます。HTTPリクエスト数を削減できるため、小さなアイコンやスプライト画像の埋め込みに特に有効です。

Base64変換の活用例

主な用途としては、HTMLメールへの画像埋め込み、CSSスプライトの代替、APIレスポンスへの画像データ含有、ローカルストレージへの画像保存などがあります。また、SVG画像をBase64に変換してCSSのbackground-imageに使用するケースも一般的です。ただし、キャッシュが効かない点やファイルサイズ増加のデメリットもあるため、用途に応じて使い分けることが重要です。

よくある質問

対応している画像形式は？

PNG、JPEG、GIF、WebP、SVG、BMP、ICOなど、ブラウザが表示できる画像形式であれば基本的にすべて対応しています。ファイル選択時にはimage/*でフィルタリングされるため、画像以外のファイルは選択できません。

画像の最大サイズに制限はありますか？

サーバーに送信しないためサーバー側の制限はありませんが、ブラウザのメモリに依存します。一般的に数十MB程度の画像であれば問題なく変換できますが、非常に大きな画像の場合はブラウザの動作が重くなる可能性があります。Base64変換後の文字列は元の画像サイズの約1.33倍になる点にもご注意ください。

Base64文字列をHTMLで使うにはどうすればいいですか？

Data URI形式（data:image/png;base64,...）をコピーして、imgタグのsrc属性に直接貼り付けるだけです。例：<img src="data:image/png;base64,iVBOR...">。CSSの場合はbackground-image: url(data:image/png;base64,...); のように使用します。

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

いいえ、すべての処理はブラウザ内（クライアントサイド）で完結しています。画像データやBase64文字列がサーバーに送信されることは一切ありません。機密性の高い画像でも安心してご利用いただけます。

Base64→画像変換で画像が表示されない場合は？

Base64文字列が正しくない、または途中で切れている可能性があります。Data URIプレフィックス付きの場合は形式（data:image/png;base64,）が正しいか確認してください。プレフィックスなしの場合は、自動的にPNG形式として復元を試みます。それでも表示されない場合は、元のBase64文字列を再度取得してください。

データについて

このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。

入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。