メールHTMLテンプレート向けCSSスプライト
画像最適化が重要なHTMLメールテンプレートでCSSスプライトを使用します。メールクライアントの制限、インラインCSS要件、メールレンダリングエンジンでのHTTP/2の欠如に対処します。
Use Cases
詳細な説明
メールHTMLでのスプライト
HTMLメールテンプレートはCSSスプライトが大きな価値を提供する最後の砦の一つです。メールレンダリングエンジンにはスプライトを特に有用にする厳しい制限があります。
メールでスプライトが重要な理由
- HTTP/2なし — メールクライアントはプロキシサーバーへのHTTP/1.1接続で画像を読み込む
- 接続制限 — 画像プロキシサーバーには厳格な同時接続制限がある
- レンダリング速度 — 画像数が少ないほどメールクライアントでの描画が速い
- 画像ブロック — 多くのクライアントはデフォルトで画像をブロック
- SVGサポートなし — ほとんどのメールクライアントはSVGをレンダリングしない
メールスプライトのベストプラクティス
- CDNでホスト — 高速で信頼性の高いCDNを使用
- 絶対URLを使用 — メールクライアントは完全なhttps://URLが必要
- すべてのCSSをインライン化 — メールクライアントは
<style>ブロックを除去 - 代替テキストを提供 — 画像ブロック時に意味のあるテキストを表示
- ファイルサイズを小さく — 大きな画像はブロックされるか読み込みが遅い
- 広範にテスト — LitmusやEmail on Acidでクライアント間テスト
ユースケース
メールマーケターやHTMLメールテンプレートを構築する開発者は、画像が多いメールを最適化するためにスプライトを使用します。ソーシャルメディアアイコン付きのニュースレター、商品カテゴリアイコン付きのプロモーションメール、ステータスアイコン付きのトランザクションメールはすべて、画像をスプライトシートに結合することで恩恵を受けます。
試してみる — Sprite Sheet Generator
Drop images here or click to upload
PNG, JPG, SVG, GIF, WebP supported