画像をBase64に変換

インライン化が有効な場合

データURLを使うとリクエストを1つ減らせますが、単独ではキャッシュできません。データURLを含むHTMLやCSSのコピーごとに再ダウンロードされ、ファイルより約3分の1大きくなります。このトレードオフは、スタイルシート内のアイコンやぼかしたプレースホルダーなど、数キロバイト程度の小さな画像に適しています。ページ間で再利用する写真や画像は、通常のファイルのほうが速く読み込まれます。SVGでは、通常Base64ではなくマークアップをURLエンコードしたほうが短いデータURLになります。

データURLが機能しない場所

Gmailをはじめ多くのメールクライアントは、データURLとして埋め込まれた画像を表示しません。そのため、ニュースレターでは代わりにホストされた画像へリンクしてください。Base64画像を受け付ける多くのAPIが必要とするのはペイロードだけです。base64の後にあるカンマまでを含め、それより前をすべて削除してください。Content Security Policyを設定したページでは、インライン画像を読み込む前にimg-srcディレクティブへdata:を指定する必要があります。

使い方

1. 画像を選びます。
2. ローカルでエンコードします。
3. 生成されたdata URLをコピーします。

プライバシーと制限事項

ファイルはお使いのデバイスに留まります。Base64はエンコーディングであり暗号化ではなく、サイズはおおよそ3分の1だけ増加します。