使い方

Image → Base64を選んで画像ファイルを選択するか、逆方向に変換する場合はBase64 → Imageを選びます。
必要な出力形式を選択します。data URL、通常のBase64、HTMLのimgタグ、CSSのbackground-imageルール、Markdownから選べます。
結果をコピーして、コード、メールテンプレート、JSONに貼り付けます。
デコードするには、data URLまたは通常のBase64を貼り付けます。画像がプレビュー表示され、ダウンロードできます。

仕組み

Base64は、64種類の印字可能な文字でバイナリデータを表現するため、画像をテキスト形式の中に直接記述できます。data URLは先頭にメディアタイプを加えたもので、たとえば data:image/png;base64, の後にエンコードされたデータが続きます。ブラウザーでは、画像URLを指定できる場所であればどこでもdata URLを使えます。imgタグのsrc属性、CSSのurl()、SVGの画像参照などが該当します。

エンコード後のテキストは、元のファイルより常に約3分の1大きくなります（3バイトにつき4文字）。小さなアイコンやプレースホルダーを埋め込むと、個別のネットワークリクエストを省けます。ただし、埋め込んだデータ自体は個別にキャッシュされず、含まれているページやスタイルシートを読み込むたびに再ダウンロードされるため、数キロバイトを超える場合はほとんどメリットがありません。多くのメールクライアントはdata URLの画像をブロックまたは削除するため、ニュースレターで使う前にテストしてください。

ファイルはバイト単位でそのままエンコードされます。再圧縮は行われず、ファイル内のメタデータ（EXIFなど）も保持されます。デコード時には、data URL全体、通常のBase64、URLセーフなBase64、CSSのurl(…)で囲まれたテキストを使用できます。画像の種類はラベルを信用せず、デコードしたデータから判定します。

使用例

スタイルシート内の小さなアイコン

600バイトのPNGアイコンは、800文字のBase64文字列になります。CSS出力を使うと、別ファイルをホストせずにクラスへ貼り付けられるbackground-imageルールを作成できます。

APIレスポンスの画像

APIが「iVBORw0KGgoAAAANSUhEUg…」のようなJSONフィールドを返します。Base64 → Imageに貼り付けると、画像を表示してサイズを確認し、PNGとしてダウンロードできます。

HTML内のSVGロゴ

SVGをエンコードすると、imgタグで使えるdata:image/svg+xml;base64 URLになります。SVGの場合、圧縮していないSVGマークアップのほうがBase64より短いことが多いため、SVGを直接埋め込む方法も検討してください。

よくある質問

Base64にすると画像のサイズが大きくなるのはなぜですか？

Base64では3バイトを4文字で表すため、約33%増加し、data URLの接頭辞分も少し加わります。WebサーバーでGzipやBrotli圧縮を使うと差は小さくなりますが、なくなるわけではありません。

エンコードすると画像は変更または圧縮されますか？

いいえ。メタデータも含め、ファイルのバイトデータをそのままエンコードします。文字列を短くするには、先に画像を圧縮またはリサイズしてください。

data URLと通常のBase64の違いは何ですか？

通常のBase64は、エンコードされたデータのみです。data URLには data:image/jpeg;base64, などの接頭辞が加わり、ファイルの種類をブラウザーに伝えるため、画像ソースとしてそのまま使用できます。

サイズ制限はありますか？

ここでは最大10 MBのファイルをエンコードできます。非常に長い文字列は入力欄やエディターの動作を遅くすることがあり、これほど大きなdata URLはWebサイトでの利用にも適していません。

プライバシー

エンコードとデコードはブラウザー内で行われます。画像やBase64テキストがアップロード、保存されたり、アナリティクスに含まれたりすることはありません。