HTML メールで Retina ディスプレイ用の高解像度画像を使用する方法
Retina ディスプレイは、 Apple 人間の目は、通常の表示距離で個々のピクセルを区別できないほど高いピクセル密度を持つ高解像度ディスプレイを表します。 通常、Retina ディスプレイのピクセル密度は 300 インチあたり XNUMX ピクセルです (PPI) 以上で、ピクセル密度 72 ppi の標準ディスプレイよりも大幅に高くなっています。
Retina ディスプレイは現在、ディスプレイ、ラップトップ、モバイル デバイス、およびタブレットの主流となっています。 現在、多くのメーカーが、Apple の Retina ディスプレイと同等以上のピクセル密度を備えた高解像度ディスプレイを提供しています。
Retina ディスプレイ用に高解像度の画像を表示するための CSS
次の CSS コードを使用して、Retina ディスプレイ用の高解像度画像を読み込むことができます。 このコードは、デバイスのピクセル密度を検出し、画像をロードします。 @2x Retina ディスプレイの場合はサフィックスを追加し、他のディスプレイの場合は標準解像度の画像を読み込みます。
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}
もう XNUMX つのアプローチは、ベクター グラフィックスまたは SVG 品質を損なうことなく任意の解像度にスケーリングできます。 次に例を示します。
<div style="max-width: 300px;">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
この例では、SVG コードは HTML メールに直接埋め込まれています。 <svg>
タグ。 ザ· viewBox
属性は SVG 画像の寸法を定義しますが、 xmlns
属性は、SVG の XML 名前空間を指定します。
max-width
プロパティはに設定されています div
要素を使用して、利用可能なスペースに合わせて SVG 画像が自動的にスケーリングされるようにします。この場合、最大幅は 300px です。 これは、すべてのデバイスと電子メール クライアントで SVG 画像が適切に表示されるようにするためのベスト プラクティスです。
注: SVG のサポートは、電子メール クライアントによって異なる場合があります。であるため、複数のクライアントでメールをテストして、SVG 画像が正しく表示されることを確認することが重要です。
Retina ディスプレイ用に HTML メールをコーディングするもう XNUMX つの方法は、 srcset
. srcset 属性を使用すると、Retina ディスプレイに高解像度の画像を提供しながら、画像が低解像度のデバイスに適切なサイズであることを確認できます。
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
この例では、 srcset
属性は、次の XNUMX つの画像ソースを提供します。 image.jpg
解像度が 600 ピクセル以下のデバイスの場合、および image@2x.jpg
解像度が 1200 ピクセル以上のデバイスの場合。 の 600w
& 1200w
記述子は、画像のサイズをピクセル単位で指定します。これにより、ブラウザはデバイスの解像度に基づいてダウンロードする画像を決定できます。
すべての電子メールクライアントがサポートしているわけではありません srcset
属性。 サポートのレベル srcset
メール クライアントによって大きく異なる場合があるため、複数のクライアントでメールをテストして、画像が正しく表示されることを確認することが重要です。
Retina ディスプレイ用に最適化された電子メール内の画像の HTML
Retina ディスプレイ用に最適化された解像度で画像を適切に表示するレスポンシブ HTML 電子メールをコーディングすることは可能です。 方法は次のとおりです。
- メールに表示する実際の画像の 300 倍のサイズの高解像度画像を作成します。 たとえば、200×600 の画像を表示する場合は、400×XNUMX の画像を作成します。
- で高解像度画像を保存します @2x サフィックス。 たとえば、元の画像が image.png、高解像度バージョンを名前を付けて保存します 画像@2x.png.
- HTML メール コードで、次のコードを使用して画像を表示します。
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
は、Microsoft Word を使用して HTML メールをレンダリングする特定のバージョンの Microsoft Outlook を対象とするために使用される条件付きコメントです。 Microsoft Word の HTML レンダリング エンジンは、他の電子メール クライアントや Web ブラウザーとはかなり異なる場合があるため、多くの場合、特別な処理が必要になります。 の
(gte mso 9)
条件は、Microsoft Office のバージョンが 9 以上であるかどうかをチェックします。これは、Microsoft Office 2000 に対応します。 |(IE)
条件は、クライアントが Microsoft Outlook でよく使用される Internet Explorer であるかどうかをチェックします。 Retina ディスプレイに最適化された画像を含む HTML メール
Retina ディスプレイ用に最適化された解像度で画像を表示するレスポンシブ HTML 電子メール コードの例を次に示します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Retina-Optimized Email</title>
<style>
/* Mobile-specific styles */
@media only screen and (max-width: 480px) {
/* Add mobile-specific styles here */
}
/* High-density display styles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
img {
display: block;
width: 300px !important;
height: 200px !important;
max-width: 100%;
height: auto;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 40px 0 30px 0;">
<img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Retina ディスプレイ画像のヒント
Retina ディスプレイ用に最適化された画像用に HTML メールを最適化するための追加のヒントを次に示します。