E-posta Pazarlama ve Otomasyon

HTML E-postanızda Retina Ekranlar İçin Yüksek Çözünürlüklü Görüntüler Nasıl Kullanılır?

Retina ekran, tarafından kullanılan bir pazarlama terimidir. Apple insan gözünün tipik bir izleme mesafesindeki pikselleri tek tek ayırt edemeyeceği kadar yüksek bir piksel yoğunluğuna sahip yüksek çözünürlüklü bir ekranı tanımlamak için. Bir retina ekranın tipik olarak inç başına 300 piksel piksel yoğunluğu vardır (ppi) veya daha yüksek, bu da 72 ppi piksel yoğunluğuna sahip standart bir ekrandan önemli ölçüde daha yüksektir.

Retina ekranlar artık ekranlar, dizüstü bilgisayarlar, mobil cihazlar ve tabletler için oldukça yaygın. Artık birçok üretici, Apple'ın Retina ekranlarıyla eşleşen veya aşan piksel yoğunluklarına sahip yüksek çözünürlüklü ekranlar sunuyor.

Bir Retina Ekran İçin Daha Yüksek Çözünürlüklü Bir Görüntü Göstermek İçin CSS

Retina ekran için yüksek çözünürlüklü bir görüntü yüklemek için aşağıdaki CSS kodunu kullanabilirsiniz. Bu kod, cihazın piksel yoğunluğunu algılar ve görüntüyü @ 2x diğer ekranlar için standart çözünürlüklü görüntüyü yüklerken Retina ekranlar için son ek.

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

Başka bir yaklaşım, vektör grafikleri veya SVG kaliteden ödün vermeden herhangi bir çözünürlüğe ölçeklenebilen görüntüler. İşte bir örnek:

<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>

Bu örnekte, SVG kodu, kullanılarak doğrudan HTML e-postasına katıştırılmıştır. <svg> etiket. viewBox niteliği, SVG görüntüsünün boyutlarını tanımlarken, xmlns niteliği, SVG için XML ad alanını belirtir.

The max-width özellik üzerinde ayarlanır div SVG görüntüsünün, bu durumda maksimum 300 piksel genişliğe kadar mevcut alana sığacak şekilde otomatik olarak ölçeklenmesini sağlamak için öğe. Bu, SVG resimlerinin tüm cihazlarda ve e-posta istemcilerinde düzgün şekilde görüntülenmesini sağlamak için en iyi uygulamadır.

Not: SVG desteği, e-posta istemcisine bağlı olarak değişebilir, bu nedenle, SVG görüntüsünün düzgün görüntülendiğinden emin olmak için e-postanızı birden çok istemcide test etmeniz önemlidir.

Retina ekranlar için HTML e-postalarını kodlamanın başka bir yolu da, srcset. srcset niteliğini kullanmak, görüntülerin daha düşük çözünürlüklü aygıtlar için uygun şekilde boyutlandırılmasını sağlarken Retina ekranlar için yüksek çözünürlüklü görüntüler sağlamanıza olanak tanır.

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

Bu örnekte, srcset öznitelik iki görüntü kaynağı sağlar: image.jpg 600 piksel veya daha az çözünürlüğe sahip cihazlar için ve image@2x.jpg 1200 piksel veya daha fazla çözünürlüğe sahip cihazlar için. bu 600w ve 1200w tanımlayıcılar, görüntülerin boyutunu piksel cinsinden belirtir; bu, tarayıcının cihazın çözünürlüğüne göre hangi görüntünün indirileceğini belirlemesine yardımcı olur.

Tüm e-posta istemcileri şunları desteklemez: srcset bağlanmak. için destek seviyesi srcset e-posta istemcisine bağlı olarak büyük ölçüde değişiklik gösterebilir, bu nedenle, resimlerin düzgün görüntülendiğinden emin olmak için e-postalarınızı birden çok istemcide test etmeniz önemlidir.

Retina Ekranlar İçin Optimize Edilmiş E-postadaki Görüntüler İçin HTML

bir görüntüyü retina ekranlar için optimize edilmiş bir çözünürlükte düzgün şekilde görüntüleyecek duyarlı bir HTML e-postası kodlamak mümkündür. İşte nasıl:

  1. E-postada görüntülemek istediğiniz gerçek görüntünün iki katı büyüklüğünde yüksek çözünürlüklü bir görüntü oluşturun. Örneğin, 300×200 boyutunda bir görüntü görüntülemek istiyorsanız, 600×400 boyutunda bir görüntü oluşturun.
  2. ile yüksek çözünürlüklü görüntüyü kaydedin. @ 2x sonek Örneğin, orijinal görüntünüz resim.png, yüksek çözünürlüklü sürümü şu şekilde kaydedin: resim@2x.png.
  3. HTML e-posta kodunuzda, resmi görüntülemek için aşağıdaki kodu kullanın:
<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)]> HTML e-postalarını işlemek için Microsoft Word'ü kullanan Microsoft Outlook'un belirli sürümlerini hedeflemek için kullanılan koşullu bir yorumdur. Microsoft Word'ün HTML oluşturma motoru, diğer e-posta istemcilerinden ve web tarayıcılarından oldukça farklı olabilir, bu nedenle genellikle özel işlem gerektirir. bu

(gte mso 9) koşul, Microsoft Office sürümünün Microsoft Office 9'e karşılık gelen 2000'dan büyük veya eşit olup olmadığını kontrol eder. |(IE) koşul, istemcinin genellikle Microsoft Outlook tarafından kullanılan Internet Explorer olup olmadığını kontrol eder.

Retina Ekranı Optimize Edilmiş Görüntülerle HTML E-postası

Bir görüntüyü retina ekranlar için optimize edilmiş bir çözünürlükte görüntüleyen duyarlı bir HTML e-posta koduna bir örnek:

<!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 Ekran Görüntüsü İpuçları

Burada, HTML E-postalarınızı Retina ekranlar için optimize edilmiş resimler için optimize etmeye ilişkin bazı ek ipuçları verilmiştir:

  • Resim etiketlerinizin her zaman şunları içerdiğinden emin olun: alt resim için bağlam sağlamak için metin.
  • Görüntü kalitesinden ödün vermeden dosya boyutunu küçültmek için görüntüleri web için optimize edin. Bu, kullanmayı içerebilir görüntü sıkıştırma araçları, resimde kullanılan renk sayısını azaltmak ve e-postaya yüklemeden önce resmi en uygun boyutlarına getirmek için yeniden boyutlandırmak.
  • E-posta yükleme sürelerini yavaşlatabilecek büyük arka plan resimlerinden kaçının.
  • Animasyonlu GIF'ler, animasyonu oluşturmak için gereken birden çok kare nedeniyle dosya boyutunda statik görüntülerden daha büyük olabilir, bunları 1'in altında tuttuğunuzdan emin olun. Mb.

Douglas Karr

Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

İlgili Makaleler

Başa dön düğmeye
Kapanış

Adblock Algılandı

Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.