画像Base64変換とデコード

Base64は、画像ファイルのようなバイナリデータを、英字、数字、プラス、スラッシュという64種類の安全な文字だけで書き表す方法です。ファイルの3バイトが4文字のテキストになります。これで、JSON、HTMLの属性、CSSファイル、一部のメール形式など、テキストしか扱えない仕組みでもバイナリの内容を送れます。

データURIは、そのテキストを、中身をブラウザに伝える短いヘッダー（例：data:image/png;base64,）で包み、その後にエンコードしたファイルが続くものです。ブラウザは普通の画像リンクとまったく同じように表示できます。

埋め込むべきとき

Base64と画像ファイルへのリンクを比べるときのポイントは、サイズとキャッシュです。Base64のテキストは元のファイルより約3分の1大きくなり、ブラウザが別にキャッシュすることもできません。普通のファイルは1回ダウンロードされれば再利用されます。Base64が活きるのはとても小さな画像で、数百バイトより余分なリクエストを省くことのほうが大事な場合です。

「画像からBase64」タブに画像を追加します。ツールが端末内で読み込み、ファイルのバイト列から実際の形式を判定して、元のサイズ、エンコード後のサイズ、増加分を表示します。その下に、コピーボタン付きのすぐ使えるコードが5種類並びます。とても長い文字列は表示速度のためボックス内で省略されますが、コピーボタンは必ず全文をコピーします。

データURIをテキストファイルとしてダウンロードすることもでき、とても長い文字列や同僚に送るときに便利です。

よく使う形式

アイコンやロゴは透過付きのPNGファイルが多いので、PNGからBase64への変換がいちばんよく使われます。JPGからBase64も同じように変換でき、アバターのような小さな写真に向いています。SVGファイルもエンコードできます。SVGならURLエンコードしたテキストのほうがさらに小さくなることもありますが、Base64が最も互換性の高い選択肢です。

HTMLで

HTMLでBase64画像を使うには、imgのコードをページに貼り付けます。ファイル名に基づく代替テキストと幅・高さがすでに入っているので、レイアウトのずれを防げます。スクリーンリーダー向けに画像を説明するよう、代替テキストを編集してください。

CSSで

CSSでBase64の背景画像を使うには、background-imageのルールをスタイルシートに貼り付けます。小さなパターンやアイコンに向いています。大きな写真はファイルのままにしましょう。埋め込むとスタイルシート全体のダウンロードと解析が遅くなるためです。

MarkdownとJSON

Markdownのコードは、データURIを受け付ける多くのエディターやドキュメントツールで使えます。APIやJSONには、APIのドキュメントで完全なデータURIを求められていない限り、data: ヘッダーなしの「Base64のみ」のコードを使ってください。

「Base64から画像」タブに切り替え、Base64の文字列か完全なデータURIを貼り付けます。ツールが空白や改行を取り除き、URLセーフな文字も受け付け、足りないパディングを補ってデコードし、最初のバイトを確認して実際の画像形式を判定します。画像、縦横のサイズ、ファイルサイズが表示され、正しい拡張子でダウンロードできるボタンが出ます。

テキストが有効なBase64でない、途中で切れている、別の種類のファイルが含まれている場合は、何が問題かわかりやすいメッセージで説明します。APIのレスポンス、データベースの項目、メールのソースコードのデバッグにも役立ちます。

目安として、数KBより小さな画像は埋め込み、それ以外はファイルのままにしましょう。100 KBを超える画像は、埋め込むとHTMLやCSSが重くなるため警告が出ます。大きな画像は、先に画像圧縮ツールで圧縮するか、WebPに変換してください。

Base64はエンコードであって暗号化ではありません。誰でもデコードできるので、画像を隠したり守ったりする方法として扱わないでください。

プライバシー

エンコードとデコードは、ブラウザに組み込まれた機能だけを使って、すべてブラウザ内で行われます。何もアップロードも保存もされず、このツールは無料・回数無制限で、EnhancerPro のクレジットも使いません。

文字列がこんなに長いのはなぜ？

3バイトが4文字になるので、30 KBの画像は約40,000文字になります。これは想定どおりです。用途に対して長すぎるなら、エンコード前に画像の縦横のサイズを小さくするか圧縮してください。

改行とメール

一部のメールシステムはBase64を76文字ごとに改行します。デコーダーはその改行を自動で無視するので、改行されたテキストもそのまま貼り付けられます。

ファビコンとアイコン

ファビコンをデータURIとして埋め込むことはほとんどのブラウザでできますが、ブックマークやホーム画面には本物のfavicon.icoとPNGファイルのほうが確実です。ファビコン作成ツールで一式を作れます。

メール署名のロゴ

一部のメールソフトは読む人が許可するまでリンク画像をブロックしますが、埋め込んだデータURIへの対応もまちまちです。署名には、自分のサイトに置いた小さなPNGをリンクするのがたいてい最も確実で、Base64はHTMLを1つのまとまりにする必要がある場合の代替手段です。どちらにしてもロゴは数KB以下に抑えましょう。

プレースホルダーと読み込み中の画像

写真をごく小さくぼかしてBase64にしたものは、本来の画像が読み込まれるまでの間、すぐに表示できます。画像を幅20ピクセルほどに縮めてエンコードし、本来の画像の背景として使いましょう。ページに増えるのは数百バイトだけです。

JSONに画像を保存

APIや設定ファイルの中には、画像をBase64の文字列として受け付けるものがあります。「Base64のみ」のコードを使い、ドキュメントでサイズの制限を確認してください。そうしたデータを受け取ったら、保存する前にデコーダーに貼り付けて、画像の形式と縦横のサイズを確認しましょう。

テストと試作品

試作品を1つのHTMLファイルで手早く共有するとき、小さな画像を埋め込んでおけば、ファイルを移動したりメールで送ったりしても何も壊れません。本番に出すものは、ブラウザがキャッシュできるよう、大きな埋め込み画像を普通のファイルに戻してください。

文字列の中身を確認する

Base64のテキストからは中身の手がかりはわかりません。PNGならiVBOR、JPEGなら/9j/のように、最初の数文字で形式がわかることもありますが、確実なのはデコーダーです。データURIのラベルをうのみにせず、実際のファイルのシグネチャを読み取ります。

パフォーマンスのチェックリスト

画像を埋め込む前に、3つ考えてみてください。小さいか（理想は数KB以下）。1つのページでしか使わず、キャッシュがあまり役立たないか。余分なリクエストで最初の表示が目に見えて遅くなるか。3つともはいなら、Base64が向いています。そうでなければ、WebPのような最新の形式の普通のファイルを使い、幅と高さを指定して、それを使うすべてのページでブラウザにキャッシュさせましょう。HTMLが軽く、ページも速いままです。

変換と逆変換

画像をエンコードしてからデコードすると、まったく同じバイト列に戻ります。Base64は可逆です。そのため、コピーした文字列が完全かどうかをデコーダーですぐに確認できます。デコードした画像が途中で切れている、または表示されない場合は、コピーの途中でテキストの一部が失われています。パディング文字がある末尾で起きることが多いです。元からもう一度コピーしてデコードし直してください。完全なら、ツールがそう確認します。