メールマーケティングと自動化

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 電子メールをコーディングすることは可能です。 方法は次のとおりです。

  1. メールに表示する実際の画像の 300 倍のサイズの高解像度画像を作成します。 たとえば、200×600 の画像を表示する場合は、400×XNUMX の画像を作成します。
  2. で高解像度画像を保存します @2x サフィックス。 たとえば、元の画像が image.png、高解像度バージョンを名前を付けて保存します 画像@2x.png.
  3. 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 メールを最適化するための追加のヒントを次に示します。

  • 画像タグには常に使用を含めるようにしてください alt 画像のコンテキストを提供するテキスト。
  • Web 用に画像を最適化して、画質を損なうことなくファイル サイズを縮小します。 これには、 画像圧縮 ツールを使用して、画像で使用される色の数を減らし、電子メールにアップロードする前に画像を最適なサイズにサイズ変更します。
  • メールの読み込み時間を遅くする可能性がある大きな背景画像は避けてください。
  • アニメーション GIF は、アニメーションの作成に複数のフレームが必要なため、静止画像よりもファイル サイズが大きくなる可能性があります。 Mb.

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。