画像を Base64 に変換

画像を Base64 に変換する方法

1. 画像を枠にドロップするか、Ctrl+V（Mac では Cmd+V）でクリップボードから貼り付けるか、ファイル選択を使います。スクリーンショットはクリップボードから直接貼れますし、複数のファイルを同時に扱うこともできます。
2. 必要なら、先に縮小や変換をします。最大幅 にピクセル数を入力する、変換先 で PNG、JPEG、WebP を選ぶ、品質 を設定する、メタデータ（EXIF）を削除 にチェックを入れる、といった操作ができます。
3. 出力形式 で形式を選びます。このページは Data URI から始まります。
4. 出力をコピー を押すか、長い結果なら .txt で保存 を使います。

プレビューには、ファイル名、サイズ、MIME タイプ、ピクセル寸法が表示されます。ボタンの下には入力サイズ、出力サイズ、増加率が表示されるので、これから貼り付けるものの大きさがわかります。

出力形式と使い道

Base64 のデータはどの形式でも同じで、変わるのはそれを包む部分だけです。以下の例は logo.png という 32×32 の PNG を使い、省略して示しています。

<img> の出力には width と height が含まれるので、ブラウザは画像のデコード前に表示領域を確保できます。Markdown レンダラーの中には、画像の data: URL を取り除くものがあります（特にホスティング型のプラットフォーム）。Markdown 出力を使う前に、お使いの環境で確認してください。

エンコードする前にリサイズ・変換する

Base64 は何を入れてもサイズを 3 分の 1 増やすので、短い文字列を得るいちばんの方法は画像を小さくすることです。300 ピクセルのサムネイルとして表示するスマートフォンの写真に、元の 4000 ピクセルは要りません。最大幅 を、高 DPI の画面でもくっきり見える表示サイズの 2 倍の 600 にすれば、どんなエンコードの工夫よりも大きく削れます。

各オプションの働き：

• 最大幅 は縮小だけを行います。それより狭い画像は寸法が変わらず、縦横比は常に保たれます。
• 変換先 で JPEG を選ぶと、JPEG にはアルファチャンネルがないため、透明な部分は白で塗りつぶされます。透過と小さなサイズを両立したいなら WebP を使ってください。
• 品質 は、ほかのオプションによって再エンコードが行われるときの JPEG と WebP の出力に適用されます。PNG は可逆なので無視されます。
• メタデータ（EXIF）を削除 は、GPS 座標、端末の機種、撮影日時などのカメラのデータを取り除きます。画像を描き直すことで実現しているので、JPEG は選んだ品質で再圧縮されます。
• GIF、BMP、AVIF は、形式を維持 で再エンコードすると PNG として書き出されます。ブラウザは canvas からこれらの形式を作れないからです。アニメーション GIF は最初のフレームだけが残ります。
• Safari は WebP にエンコードできません。Safari で WebP を選ぶと、ツールは代わりに PNG を出力し、その旨を表示します。
• SVG ファイルはそのままエンコードされます。もともとテキストであり、ベクター画像をラスター化してはその利点が失われるからです。

最適化ツールですでに圧縮した PNG は、再エンコードすると大きくなることがあります。プレビューには元のサイズの横に新しいサイズが表示されるので、コピーする前に比べてください。

画像を埋め込むべきとき、そうでないとき

Data URI を使えば HTTP リクエストが 1 つ減り、すべてを 1 つのファイルに収められます。これが効果を発揮するのは次のような場合です。

• 数 KB のアイコン、ロゴ、小さな UI 画像
• レポート、オフラインのドキュメント、書き出したダッシュボードなど、単一ファイルの HTML 文書
• 本物の画像を読み込む間に表示する、小さなぼかしのプレースホルダー
• 別ファイルが扱いにくいテスト用フィクスチャや JSON のペイロード

写真や大きなものには逆効果です。エンコードしたコピーは約 33% 大きく、それを含む HTML や CSS と切り離してキャッシュできず、埋め込んだページごとに毎回ダウンロードされます。スタイルシート内の画像はスタイルシートの読み込みを遅らせ、それが描画を遅らせます。loading="lazy" も役に立ちません。バイト列はすでに文書の中にあるからです。詳しくは Data URI のパフォーマンス をご覧ください。サイズ計算ツール を使えば、決める前にエンコード後のサイズがわかります。

メールは特殊なケースです。Gmail などいくつかの Web メールは Data URI の画像をまったく表示しないので、ニュースレターでは通常、サーバーに置いた画像か CID 添付を使います。メールの Base64 をご覧ください。

API や AI の画像認識モデルに渡す画像

JSON にはバイナリの型がないので、リクエスト本文で画像を受け取る API は Base64 を想定しています。画像を説明したり分類したり、画像内の文字を読み取ったりできる多くのマルチモーダル AI モデルもそうです。渡し方は 2 通りあります。

• 1 つの文字列に完全な Data URI を入れる：data:image/jpeg;base64,/9j/4AAQ...
• 1 つのフィールドに Base64 だけを入れ、別のフィールドにメディアタイプ（image/jpeg）を入れる

前者には Data URI を、後者には プレーン Base64 を使ってください。Base64 だけを想定する API に data: の接頭辞を付けて送ったり、その逆をしたりするのは、こうしたリクエストが拒否されるよくある原因です。こうしたサービスはたいていリクエストサイズに上限があり、大きな画像はどのみちサービス側で縮小されることが多いので、エンコード前にリサイズしておけば、ほとんど損をせずにリクエストを小さくできます。

埋め込める画像形式

HEIC と TIFF も問題なくエンコードできますが、どちらの Data URI も Chrome と Firefox では壊れた画像になります。代わりにどうすればよいかは HEIC と TIFF のページで説明しています。ほかのシグネチャは よくある Base64 の接頭辞 をご覧ください。

コードで同じことをする

ブラウザでは、FileReader が Data URI を直接返します。

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

Python では、バイト列を読み込んで接頭辞を自分で付けます。

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

大きなファイルのストリーミングを含むほかのやり方は、JavaScript の Base64 と Python の Base64 にあります。

画像が表示されないとき

• HTML で画像が壊れて表示される。 Data URI では URLセーフ（- _） のチェックを外してください。ブラウザは data: URL を標準のアルファベットでしかデコードしないので、+ や / の代わりに - や _ があると画像が壊れます。
• HTML では表示されるのに CSS では表示されない。 76 文字で折り返し は文字列に改行を入れます。HTML の属性は改行を許容しますが、CSS の url("...") の文字列内に改行があるとルールが無効になります。メール本文以外では折り返しをオフにしてください。
• 接頭辞が二重になっている。 data:image/png;base64,data:image/png;base64, で始まる文字列は、自前で接頭辞を付けるテンプレートに Data URI を貼り付けた結果です。そこでは プレーン Base64 を使ってください。
• デコード後に違う画像になる、または何も表示されない。 先頭の文字を上の表と照らし合わせてください。先頭が形式と合わないなら、文字列が途中で切れているか、取り違えています。Base64 を画像に変換 で、バイト列の本当の中身がわかります。

よくある質問