بازاریابی ایمیلی و اتوماسیون

نحوه استفاده از تصاویر با وضوح بالا برای نمایش شبکیه چشم در ایمیل HTML

نمایش شبکیه چشم یک اصطلاح بازاریابی است که توسط اپل برای توصیف یک صفحه نمایش با وضوح بالا که دارای تراکم پیکسلی به اندازه ای است که چشم انسان قادر به تشخیص تک تک پیکسل ها در فاصله دید معمولی نباشد. یک صفحه نمایش شبکیه معمولاً دارای تراکم پیکسلی 300 پیکسل در هر اینچ است.PPI) یا بالاتر، که به طور قابل توجهی بالاتر از یک صفحه نمایش استاندارد با تراکم پیکسلی 72 ppi است.

نمایشگرهای رتینا اکنون برای نمایشگرها، لپ‌تاپ‌ها، دستگاه‌های موبایل و تبلت‌ها کاملاً رایج هستند. در حال حاضر بسیاری از تولیدکنندگان نمایشگرهایی با وضوح بالا با تراکم پیکسلی ارائه می دهند که با نمایشگرهای رتینا اپل مطابقت دارد یا بیشتر از آن است.

CSS برای نمایش تصویر با وضوح بالاتر برای نمایشگر شبکیه چشم

می توانید از کد CSS زیر برای بارگذاری یک تصویر با وضوح بالا برای نمایشگر رتینا استفاده کنید. این کد تراکم پیکسلی دستگاه را تشخیص می دهد و تصویر را با آن بارگذاری می کند @ 2x پسوند برای نمایشگرهای رتینا، در حالی که تصویر با وضوح استاندارد برای نمایشگرهای دیگر بارگیری می شود.

@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');
}

روش دیگر استفاده از گرافیک برداری یا 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 ویژگی فضای نام XML را برای SVG مشخص می کند.

La max-width ملک بر روی تنظیم شده است div عنصری برای اطمینان از اینکه تصویر SVG به طور خودکار مقیاس می شود تا با فضای موجود مطابقت داشته باشد، تا حداکثر عرض 300 پیکسل در این مورد. این بهترین روش برای اطمینان از اینکه تصاویر SVG به درستی در همه دستگاه‌ها و کلاینت‌های ایمیل نمایش داده می‌شوند، است.

توجه داشته باشید: پشتیبانی SVG بسته به مشتری ایمیل می تواند متفاوت باشد، بنابراین مهم است که ایمیل خود را روی چندین مشتری آزمایش کنید تا مطمئن شوید که تصویر SVG به درستی نمایش داده می شود.

یکی دیگر از راه های کدگذاری ایمیل های HTML برای نمایشگرهای رتینا استفاده از آن است srcset. استفاده از ویژگی srcset به شما امکان می دهد تصاویری با وضوح بالا برای نمایشگرهای رتینا تهیه کنید و در عین حال اطمینان حاصل کنید که تصاویر به اندازه مناسب برای دستگاه های با وضوح پایین تر هستند.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

در این مثال ، srcset ویژگی دو منبع تصویر را ارائه می دهد: image.jpg برای دستگاه هایی با وضوح 600 پیکسل یا کمتر، و image@2x.jpg برای دستگاه هایی با وضوح 1200 پیکسل یا بیشتر. را 600w و 1200w توصیفگرها اندازه تصاویر را بر حسب پیکسل مشخص می کنند که به مرورگر کمک می کند تا بر اساس وضوح دستگاه تعیین کند که کدام تصویر را دانلود کند.

همه مشتریان ایمیل از این پشتیبانی نمی کنند srcset صفت. سطح حمایت از srcset بسته به مشتری ایمیل می تواند بسیار متفاوت باشد، بنابراین مهم است که ایمیل های خود را روی چندین مشتری آزمایش کنید تا مطمئن شوید که تصاویر به درستی نمایش داده می شوند.

HTML برای تصاویر در ایمیل بهینه شده برای نمایشگرهای شبکیه چشم

امکان کدنویسی یک ایمیل HTML پاسخگو وجود دارد که تصویری را به درستی با وضوح بهینه شده برای نمایشگرهای شبکیه نمایش دهد. در اینجا به این صورت است:

  1. یک تصویر با وضوح بالا ایجاد کنید که اندازه آن دو برابر تصویر واقعی است که می خواهید در ایمیل نمایش داده شود. به عنوان مثال، اگر می خواهید یک تصویر 300×200 نمایش دهید، یک تصویر 600×400 ایجاد کنید.
  2. ذخیره تصویر با وضوح بالا با @ 2x پسوند. برای مثال، اگر تصویر اصلی شما باشد image.png، نسخه با وضوح بالا را ذخیره کنید image@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 Outlook استفاده می‌شود که از Microsoft Word برای ارائه ایمیل‌های HTML استفاده می‌کند. موتور رندر HTML مایکروسافت ورد می تواند کاملاً با سایر سرویس گیرندگان ایمیل و مرورگرهای وب متفاوت باشد، بنابراین اغلب به مدیریت خاصی نیاز دارد. را

(gte mso 9) شرط بررسی می کند که آیا نسخه مایکروسافت آفیس بزرگتر یا مساوی 9 است که مطابق با Microsoft Office 2000 است. |(IE) شرط بررسی می کند که آیا کلاینت اینترنت اکسپلورر است، که اغلب توسط Microsoft Outlook استفاده می شود.

ایمیل HTML با نمایش تصاویر بهینه شده شبکیه چشم

در اینجا نمونه ای از یک کد ایمیل 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>

نکات تصویر نمایش شبکیه چشم

در اینجا چند نکته اضافی در مورد بهینه سازی ایمیل های HTML برای تصاویر بهینه سازی شده برای نمایشگرهای رتینا آورده شده است:

  • مطمئن شوید که همیشه تگ های تصویر شما شامل استفاده است alt متن برای ارائه زمینه برای تصویر.
  • تصاویر را برای وب بهینه کنید تا اندازه فایل را بدون کاهش کیفیت تصویر کاهش دهید. این می تواند شامل استفاده از فشرده سازی تصویر ابزارها، کاهش تعداد رنگ های استفاده شده در تصویر و تغییر اندازه تصویر به ابعاد بهینه آن قبل از آپلود آن در ایمیل.
  • از تصاویر پس‌زمینه بزرگ که می‌توانند زمان بارگذاری ایمیل را کاهش دهند، خودداری کنید.
  • GIF های متحرک به دلیل فریم های متعدد مورد نیاز برای ایجاد انیمیشن، می توانند از نظر اندازه فایل بزرگتر از تصاویر ثابت باشند، مطمئن شوید که آنها را به خوبی زیر 1 نگه دارید. Mb.

Douglas Karr

Douglas Karr CMO از است OpenINSIGHTS و بنیانگذار Martech Zone. داگلاس به ده‌ها استارت‌آپ موفق MarTech کمک کرده است، به بررسی دقیق بیش از 5 میلیارد دلار در خرید و سرمایه‌گذاری Martech کمک کرده است، و همچنان به شرکت‌ها در پیاده‌سازی و خودکارسازی استراتژی‌های فروش و بازاریابی کمک می‌کند. داگلاس یک متخصص و سخنران تحول دیجیتال و MarTech است. داگلاس همچنین نویسنده کتاب راهنمای Dummie و کتاب رهبری تجاری است.

مقالات مرتبط

بازگشت به دکمه بالا
نزدیک

Adblock شناسایی شد

Martech Zone می تواند این محتوا را بدون هیچ هزینه ای در اختیار شما قرار دهد زیرا ما از طریق درآمد تبلیغاتی، پیوندهای وابسته و حمایت های مالی از سایت خود کسب درآمد می کنیم. اگر در حین مشاهده سایت ما، مسدود کننده تبلیغات خود را حذف کنید، خوشحال خواهیم شد.