画像をBase64に変換

画像をBase64に変換は、画像ファイルをBase64でエンコードされた文字列に変換する無料ツールです。

Base64とは何ですか？ なぜ使われるのですか？

Base64は、アップロードした画像のバイナリデータをテキスト形式で表現するエンコード方式です。主にテキストを扱うシステムでも画像データを受け渡せるよう、元データの3バイトごとに、定義された文字セットの印字可能な4文字へ変換します。

独立したバイナリファイルを扱えない形式で役立ちます。元のバイト列を通常のバイナリ形式で添付しなくても、画像をデータURL、JSONのプロパティ、MIMEメールのパートに埋め込めます。生成されるBase64文字列は暗号化ではなく、エンコードされたものです。文字列を入手した人は誰でもデコードできるため、機密性の確保やアクセス制御には使えません。

短いテキストをバイト列として扱う例を見ると、仕組みを理解しやすくなります。

• 入力テキストは<svg></svg>
• Base64の出力はPHN2Zz48L3N2Zz4=

一般的な画像には、読めるマークアップではなくバイナリデータが含まれているため、入力はこのテキスト例のようには見えません。ただし、PNG、JPEG、GIF、WebPなど、どの画像形式でも原理は同じです。

画像をBase64に変換するには？

画像をツールに入力して変換を実行し、Base64エンコード欄に返された値をコピーします。このツールは画像データにPHPのbase64_encode関数を適用します。

1. テキストとして表現したい画像を選択します。
2. ページでファイルが処理され、エンコード結果が返されるまで待ちます。
3. 末尾の等号も含め、文字列全体をコピーします。
4. 出力先でデータURL、JSON値、その他のコンテナが必要な場合は、該当する構文を追加します。

処理はサーバー上で行われます。画像はHTTPS経由でサーバーに送信され、保存されません。サーバー側で処理するため、変換中もファイルが端末内だけにとどまるとは考えないでください。

変換後のBase64文字列はどう使えばよいですか？

文字列は生のBase64として使うか、受け取り側のシステムが求める構文に埋め込みます。Base64自体には、画像形式、ファイル名、サイズ、用途を示す情報はありません。

HTMLやCSSのデータURLでは、通常、メディアタイプとBase64を示すマーカーの後にエンコード済みの値を続けます。PNGのデータURLはdata:image/png;base64,で始まり、その直後に文字列を置きます。JPEGではimage/jpegを使い、SVGでは一般にimage/svg+xmlを使います。メディアタイプが間違っていると、画像自体は有効でもソフトウェアで表示できないことがあります。

JSONでは通常、Base64を引用符で囲んだ文字列として格納し、多くの場合はメディアタイプを示す別のフィールドも付けます。APIが生のBase64を明示的に要求している場合、データURLのプレフィックスを追加しないでください。この2種類の入力は置き換えられないため、ツールが返した値を使う前にAPIのドキュメントを確認してください。

実際のシステムではBase64はどこで使われますか？

Base64は、バイナリデータをテキストベースの形式やプロトコルで受け渡す必要がある場面でよく使われます。代表的な例は次のとおりです。

• HTML、CSS、生成された文書に埋め込むデータURL。
• 画像データをテキストのプロパティ内で受け付けるAPIへ送るJSONペイロード。
• MIMEによって添付ファイルやインライン画像をBase64でエンコードするメール。
• クエリ文字列。標準Base64の文字には、別途URLエンコードが必要になる場合があります。
• 任意のバイナリデータを直接格納できない設定ファイルやXML文書。

国際化ドメイン名も、データを制限された文字セットに変換する例ですが、Base64ではなくPunycodeを使います。標準Base64にはプラス記号、スラッシュ、等号が含まれることがあるため、URLに入れる値にはURLエンコーダーも必要になる場合があります。

Base64をデコードできない、または文字化けするのはなぜですか？

入力にコピーしたプレフィックスが含まれている、データが破損または途中で切れている、デコーダーが想定するBase64形式と一致していない、といった理由でデコードに失敗することがあります。文字化けに見える場合は、有効な画像のバイナリデータをデコードした後、通常のテキストとして誤って表示していることがよくあります。

• コピーされたプレフィックスは、生のBase64だけを受け付けるデコーダーでエラーの原因になります。生のBase64デコーダーを使う前に、data:image/png;base64,のような部分を削除してください。
• 破損または途中で切れた入力をデコードすると、不完全な画像になり、ビューアーで開けないことがあります。
• 二重エンコードの場合、最初にデコードしても別のBase64文字列が得られます。すでにエンコード済みの値をさらにエンコードしたデータなら、2回目のデコードが必要です。
• 異なる文字セットを使っていると、デコーダーが別の方式を想定している場合にエラーになります。Base64urlでは、標準Base64のプラス記号とスラッシュに当たる箇所でハイフンとアンダースコアを使います。
• パディングの欠落は、厳密なデコーダーに影響することがあります。標準Base64の末尾には等号が1個または2個付く場合がありますが、意図的に省略するシステムもあります。

デコード結果がバイナリデータなら、テキストエディターで開くのではなく、正しい画像形式で保存してください。文字列が完全で、想定される形式を使っていれば、Base64デコーダーまたはBase64を画像に変換を使って元に戻せます。

形式の選び方と扱いにくい入力

標準Base64は、メール、データURL、または標準Base64を明示的に求めるシステムに適しています。URLのパス、クエリパラメーター、トークンでは、受け取り側のシステムが指定する方式を使ってください。仕様で求められている場合はBase64urlが適しています。このツールはPHPの標準的なbase64_encode処理を使うため、出力をBase64urlだとみなさないでください。

このツールがエンコードするのは、アップロードされた画像のバイト列です。SVG内の空白、句読点、数字、アクセント付き文字、非ラテン文字や、画像のメタデータに含まれるこれらの文字も、バイト列の一部としてエンコードされます。そのような文字を含むファイル名はファイル内容とは別のものであり、Base64に必ず含まれるわけではありません。

PHPでは、空のバイト列をbase64_encodeに渡すと空の値が返されます。ファイルが長ければ文字列も長くなり、Base64では、周囲に付加するJSONやデータURLの構文を除いても、元のバイト数がおよそ3分の1増えます。画像を圧縮したり、画質を向上させたり、ピクセル寸法を変えたりするものではありません。

よくある質問

Base64画像をCSSに直接埋め込めますか？

はい。画像URLを受け付けるCSSプロパティでは、正しい形式のデータURLを使えます。小さくて単体で完結する素材に適していますが、大きな画像を埋め込むとスタイルシートのサイズが増え、CSSファイルとは別にキャッシュできません。

Base64文字列に改行が入るのはなぜですか？

PHPのbase64_encodeは改行を挿入しないため、このツールは改行のない値を返します。改行がある場合は、その後のコピーや別の場所での処理によって追加されたものです。空白文字を無視するデコーダーは多いものの、厳密なAPIでは拒否されることがあります。受け取り側の仕様で求められている場合は、改行のない文字列を使ってください。

画像のファイル名を変えるとBase64の値も変わりますか？

Base64が表すのはファイルのバイト列であり、ファイル名ではありません。そのため、内容が変わっていないファイルは名前を変更してもエンコード結果が変わりません。ただし、メタデータの編集、画像の再保存、形式の変換を行うとバイト列が変わり、別の文字列になります。

Base64で非公開の画像を保護できますか？

いいえ。Base64はパスワードや秘密鍵がなくても元に戻せます。機密情報には適切な暗号化、認証、アクセス制御を使用してください。また、このツールでは処理のため、画像がHTTPS経由でサーバーに送信されることも覚えておいてください。

正しく変換できたか確認するには？

文字列全体をデコードし、元の形式に対応する画像ビューアーで結果を開いてください。画像のサイズと表示内容が元画像と一致することを確認します。出力先から明示的に削除を求められていない限り、末尾のパディング文字は残してください。