Email Marketing & Automation

Yadda Ake Amfani da Hotunan Maɗaukakin Maɗaukakin Maɗaukakin Maɗaukaki don Nuni na Ritina A cikin Imel ɗin ku na HTML

Nunin retina kalmar talla ce da ake amfani da ita apple don bayyana babban nuni wanda ke da girman girman pixel wanda idon ɗan adam ya kasa bambance pixels guda ɗaya a tazarar kallo. Nunin retina yawanci yana da nauyin pixel na 300 pixels a kowace inch (ppi) ko mafi girma, wanda ya fi girma fiye da daidaitaccen nuni tare da ƙimar pixel na 72 ppi.

Nunin retina yanzu sun zama na al'ada don nuni, kwamfyutoci, na'urorin hannu, da allunan. Yawancin masana'antun yanzu suna ba da nuni mai ƙima tare da ƙimar pixel waɗanda suka dace ko wuce na nunin Retina na Apple.

CSS Don Nuna Hoton Maɗaukakin Maɗaukakin Maɗaukaki Don Nuni na Ritina

Kuna iya amfani da lambar CSS mai zuwa don loda hoto mai tsayi don nunin Retina. Wannan lambar tana gano ƙimar pixel na na'urar kuma tana loda hoton tare da @ 2x kari don nunin Retina, yayin loda madaidaicin hoto don sauran nunin.

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

Wata hanyar ita ce amfani da zane-zane na vector ko SVG hotuna, wanda zai iya daidaitawa zuwa kowane ƙuduri ba tare da rasa inganci ba. Ga misali:

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

A cikin wannan misali, an saka lambar SVG kai tsaye a cikin imel ɗin HTML ta amfani da <svg> alama. The viewBox sifa ta bayyana girman hoton SVG, yayin da xmlns sifa ta ƙayyade sararin sunan XML don SVG.

The max-width an saita dukiya akan div kashi don tabbatar da cewa hoton SVG yana yin awo ta atomatik don dacewa da sararin samaniya, har zuwa matsakaicin faɗin 300px a wannan yanayin. Wannan shine mafi kyawun aiki don tabbatar da cewa an nuna hotunan SVG da kyau akan duk na'urori da abokan cinikin imel.

lura: Tallafin SVG na iya bambanta dangane da abokin ciniki na imel, don haka yana da mahimmanci a gwada imel ɗin ku akan abokan ciniki da yawa don tabbatar da cewa an nuna hoton SVG yadda ya kamata.

Wata hanyar coding imel ɗin HTML don nunin Retina ita ce amfani srcset. Yin amfani da sifa srcset yana ba ku damar samar da hotuna masu ƙima don nunin Retina yayin da tabbatar da cewa hotunan suna da girman da ya dace don ƙananan na'urori masu ƙuduri.

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

A cikin wannan misalin, da srcset sifa ta samar da tushen hoto guda biyu: image.jpg don na'urori masu ƙudurin pixels 600 ko ƙasa da haka, kuma image@2x.jpg don na'urori masu ƙudurin pixels 1200 ko fiye. The 600w da kuma 1200w masu siffantawa suna ƙayyade girman hotuna a cikin pixels, wanda ke taimaka wa mai bincike ya tantance ko wane hoton zai zazzage bisa ƙudurin na'urar.

Ba duk abokan ciniki na imel ke goyan bayan srcset sifa. Matsayin tallafi don srcset na iya bambanta ko'ina dangane da abokin ciniki na imel, don haka yana da mahimmanci a gwada imel ɗinku akan abokan ciniki da yawa don tabbatar da cewa an nuna hotunan yadda yakamata.

HTML Don Hotuna A cikin Imel An inganta don Nuni na Retina

yana yiwuwa a ƙididdige imel ɗin HTML mai amsa wanda zai nuna hoto da kyau a ƙudurin da aka inganta don nunin ido. Ga yadda:

  1. Ƙirƙirar hoto mai girma wanda ya ninka girman ainihin hoton da kake son nunawa a cikin imel. Misali, idan kuna son nuna hoton 300×200, ƙirƙirar hoto 600×400.
  2. Ajiye babban hoto tare da @ 2x kari. Misali, idan hotonku na asali shine image.png, ajiye babban ƙudurin sigar azaman hoto@2x.png.
  3. A cikin lambar imel ɗin ku ta HTML, yi amfani da lambar mai zuwa don nuna hoton:
<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)]> sharhi ne na sharadi wanda ake amfani da shi don niyya takamaiman nau'ikan Microsoft Outlook, wanda ke amfani da Microsoft Word don yin imel ɗin HTML. Injin sarrafa HTML na Microsoft Word na iya bambanta sosai da sauran abokan cinikin imel da masu binciken gidan yanar gizo, don haka galibi yana buƙatar kulawa ta musamman. The

(gte mso 9) yanayin yana bincika idan nau'in Microsoft Office ya fi ko daidai da 9, wanda yayi daidai da Microsoft Office 2000. |(IE) yanayin yana bincika idan abokin ciniki shine Internet Explorer, wanda Microsoft Outlook galibi ke amfani dashi.

Imel na HTML Tare da Ingantattun Hotunan Retina

Ga misalin lambar imel ɗin HTML mai amsawa wanda ke nuna hoto a ƙudurin da aka inganta don nunin retina:

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

Tukwici na Nuni na retina

Anan akwai ƙarin nasihu akan inganta Imel ɗinku na HTML don hotunan da aka inganta don nunin Retina:

  • Tabbatar cewa koyaushe ana haɗa alamun alamun hotonku da amfani alt rubutu don samar da mahallin hoton.
  • Haɓaka hotuna don gidan yanar gizo don rage girman fayil ba tare da lalata ingancin hoto ba. Wannan na iya haɗawa da amfani matsin lambar kayan aiki, rage adadin launuka da ake amfani da su a cikin hoton, da kuma mayar da hoton zuwa mafi girman girmansa kafin loda shi zuwa imel.
  • Guji manyan hotunan bango waɗanda zasu iya rage lokutan lodin imel.
  • GIF masu rai na iya zama mafi girma cikin girman fayil fiye da hotuna masu tsattsauran ra'ayi saboda firam ɗin da yawa da ake buƙata don ƙirƙirar motsin, tabbatar da kiyaye su da kyau a ƙarƙashin 1 Mb.

Douglas Karr

Douglas Karr shine CMO Bude INSIGHTS kuma wanda ya kafa Martech Zone. Douglas ya taimaka da yawa na nasara MarTech farawa, ya taimaka a cikin ƙwazo na sama da $5 biliyan a Martech saye da zuba jari, kuma ya ci gaba da taimaka wa kamfanoni wajen aiwatar da sarrafa sarrafa tallace-tallace da dabarun talla. Douglas ƙwararren ƙwararren dijital ne na duniya kuma ƙwararren MarTech kuma mai magana. Douglas kuma marubuci ne da aka buga na jagorar Dummie da kuma littafin jagoranci na kasuwanci.

shafi Articles

Komawa zuwa maɓallin kewayawa
Close

An Gano Adblock

Martech Zone zai iya ba ku wannan abun cikin ba tare da farashi ba saboda muna yin monetize da rukunin yanar gizon mu ta hanyar kudaden talla, hanyoyin haɗin gwiwa, da tallafi. Za mu yi godiya idan za ku cire mai hana tallan ku yayin da kuke duba rukunin yanar gizon mu.