画像からBase64
Base64はバイナリ画像バイトをASCIIテキストに符号化し、HTMLのimg src、CSSのurl()、JSONペイロードに貼れます。小さなアイコン、プロトタイプのデータURI、インライン画像を期待するAPIに便利です。
画像をBase64に符号化する手順
1. 画像ファイルをアップロードします（小さく保つ——約100 KB未満が実用的）。
2. 生成されたBase64文字列または完全なデータURLをコピーします。
3. HTML、CSS、または設定に貼ります。
4. 対象環境でテストします——一部のメールクライアントはデータURIを制限します。
符号化の例
HTMLメールのインラインロゴ
2 KBのPNGロゴを data:image/png;base64,... にすると、厳しい企業受信箱での外部画像ブロックを避けられます。
プロトタイプのCSS背景
資産ホスティングなしの単一ファイルデモに、Base64テクスチャを貼ります。
APIテストフィクスチャ
画像アップロードエンドポイントのテスト向けに、JSONリクエストボディに小さなBase64 JPEGを含めます。
Base64画像が役立つとき
• 1回のHTTPリクエストがインラインサイズのオーバーヘッドより高くつく、ごく小さな資産向け。
• オフラインの単一ファイルHTMLプロトタイプ向け。
• ロックダウン環境で外部ホスティングが使えないとき。
パフォーマンス予算の中のBase64
インライン化はラウンドトリップを除きますが、画像の別キャッシュを妨げます。ファーストビューの重要な小さなアイコンに控えめに使い、大きなメディアは通常どおり遅延読み込みします。
よくある質問
Base64がファイルより大きいのはなぜですか？
符号化は3バイトごとに4文字を使うため、おおよそ33%のオーバーヘッドにデータURL接頭辞が加わります。
データURLとは何ですか？
形式: data:image/png;base64,iVBORw0KG... ——MIMEタイプと符号化したペイロード。
メールの最大サイズは？
メッセージ増加の合計を10〜20 KB未満に保ちます。多くのクライアントは巨大なインライン画像で詰まります。
ファイルに戻せますか？
必要ならBase64エンコーダー／デコーダーツールでASCIIをバイナリに戻します。
SVGからBase64は？
小さなSVGテキストなら可能です。データURIではラスタ形式の方が一般的です。