使い方
「画像 → Base64」タブで、画像をドラッグ＆ドロップするか、クリックして選ぶか、コピーした画像をCtrl+V（Macは⌘+V）で貼り付けてください。PNG、JPEG、GIF、WebP、SVG、AVIF、ICO、BMPに対応し、最大10MBまで変換できます。プレビューの横に形式、幅 × 高さ（ピクセル）、元のサイズ、Base64のサイズが表示され、Base64のサイズの下には増加率が付きます。その下に5つの形式が1行ずつ並びます。
- data URL：
data:image/png;base64,…—srcやurl()にそのまま入れる値 - Base64のみ：先頭の
data:…;base64,を除いたデータだけ（APIやJSONに入れるとき） - HTML：
<img src="…" alt=""> - CSS：
background-image: url("…"); - Markdown：
長い文字列は画面上では中央を省略して表示しますが、コピーボタンを押すと全体がコピーされます。HTMLのaltは空なので、画像の内容を伝える文を入れてください。
形式はファイル名よりも先に、ファイル先頭のシグネチャ（マジックバイト）を見て判定します。拡張子が.jpgでも実際にはPNGであるファイルは、正しくimage/pngと判定されます。
SVGのプレビューはimg要素で描画するため、SVG内のスクリプトは実行されません。
data URLの形式
data URLはRFC 2397で定められたdata:[<メディアタイプ>][;base64],<データ>という形式です。メディアタイプ（例：image/png）がブラウザにデータの種類を伝え、;base64はデータがBase64でエンコードされていることを示します。;base64がなければ、データはURLエンコード（パーセントエンコード）された文字として読まれます。画像のようなバイナリデータは通常Base64で、SVGのようなテキストのデータはURLエンコードでも埋め込めます。
Base64は1文字に6ビットしか入らず、3バイトを64種類の文字のうち4文字で表すため（RFC 4648）、結果は元のファイルより約33%大きくなります。たとえば10KB（10,240バイト）のPNGを追加すると13,656文字、約13.3KBになり、「増加率」には+33.4%と表示されます。「Base64のサイズ」は先頭のdata:image/png;base64,の22文字を除いた値なので、「data URL」の行の横に出る文字数は13,678文字と少し大きくなります。ファイルがとても小さいと、末尾の=パディングのぶん増加率が少し高くなることがあります。
インライン化が有利な場合と不利な場合
画像をdata URLでHTML・CSSに埋め込むと、画像ファイルを別途リクエストする必要がなくなります。数KB程度の小さなアイコンやロゴ、1ファイルで完結させたいHTML文書やサンプルコードに向いています。
逆に、大きな写真には不利です。
- サイズが約33%大きくなります。増える割合はどのファイルでもほぼ同じですが、実際に増える量はファイルの大きさで大きく変わります。2KB（2,048バイト）のアイコンは2,732文字になり684バイト増えるだけですが、2MB（2,097,152バイト）の写真は2,796,204文字になり約683KB増えます。画像を追加したら「元のサイズ」と「Base64のサイズ」の差を見て、その分だけHTML・CSSファイルが大きくなっても問題ないかを判断してください。
- 画像がHTML・CSSファイルの中に入るため、別にキャッシュされません。同じ画像を複数のページで使うと、ページごとに再びダウンロードされます。
- CSSファイルが大きくなると、そのCSSをすべて受け取るまで画面の描画が遅れることがあります。
SVGはURLエンコードのほうが短い
SVGはテキストでできた画像なので、Base64に変換する必要はありません。Base64はサイズを約33%増やしますが、URLエンコードは問題になる一部の文字だけを置き換えるため、たいていは短くなります。SVGファイルを入れると「SVGのエンコード方式」で「URLエンコード」を選べ、両方のサイズが並べて表示されます。このツールは改行と連続する空白を1つの空白にまとめ、ダブルクォートをシングルクォートに置き換え（すでにシングルクォートがある場合はダブルクォートを%22に置き換え）、<、>、#、%などの文字だけをエンコードします。結果はHTMLの属性やCSSのurl("…")にそのまま入れられます。「URLエンコード」を選ぶと「Base64のみ」の行はなくなり、Markdownの行は結果に残る空白のための形になります。UTF-8でないSVGはBase64しか使えません。
Base64を画像に戻す
「Base64 → 画像」タブにdata URLまたはBase64文字列を貼り付けると、プレビューとダウンロードボタンが表示されます。空白と改行は無視し、URLセーフな文字（-、_）を使った文字列や、パディング（=）のない文字列も受け付けます。形式はマジックバイトから自動で判別します。たとえばPNGは89 50 4E 47、JPEGはFF D8 FF、GIFはGIF87aまたはGIF89aで始まります。data URLに書かれた形式と実際のデータが異なる場合は、実際の形式で表示してお知らせします。形式を判別できない場合は「画像形式」で選んでください。