Iimayl Suuqgeynta & Automation-ka

Sida Loo Isticmaalo Sawirada Xalinta Sare leh ee Muujinta Retina ee Emailkaaga HTML

Muujinta retina waa erey suuqgeyn oo ay isticmaalaan Apple si loo qeexo bandhig heer sare ah oo leh cufnaanta pixel sare oo ku filan in isha bini'aadamku aanay awoodin inay kala soocaan pixels shakhsi ahaaneed fogaanta daawashada caadiga ah. Muujinta retina waxay caadi ahaan leedahay cufnaanta pixel 300 pixels halkii inch (ppi) ama ka sarreeya, kaas oo si weyn uga sarreeya bandhigga caadiga ah oo leh cufnaanta pixel ee 72 ppi.

Bandhigyada 'retina' ayaa hadda ah kuwo caadi u ah bandhigyada, laptop-yada, aaladaha mobilada, iyo tablets-yada. Soosaarayaal badan ayaa hadda bixiya bandhigyo cabbir sare leh oo leh cufnaanta pixel ee u dhigma ama ka sarreeya bandhigyada Apple's Retina.

CSS Si uu u Muujiyo Sawirka Xallin Sarre ee Muqaalka Retina

Waxaad isticmaali kartaa koodhka CSS ee soo socda si aad ugu shubto sawir-qaran sare oo loogu talagalay soo-bandhigidda Retina. Koodhkani wuxuu ogaanayaa cufnaanta aaladda wuxuuna ku shubaa sawirka @ 2x daba-galka ah ee bandhigyada Retina, iyadoo la raraynayo sawirka heerka-qiyamka ee bandhigyada kale.

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

Habka kale waa in la isticmaalo sawirada vector ama SVG sawirro, kuwaas oo cabbiri kara xallin kasta iyada oo aan tayada lumin. Waa kan tusaale:

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

Tusaalahan, koodka SVG wuxuu si toos ah ugu dhex jiraa emailka HTML iyadoo la isticmaalayo <svg> tag The viewBox sifo ayaa qeexaysa cabbirka sawirka SVG, halka xmlns sifo ayaa qeexaysa meesha magaca XML ee SVG.

The max-width hantidu waxay ku taal div element si loo hubiyo in sawirka SVG uu si otomaatig ah u miisaamo si uu ugu habboonaado booska bannaan, ilaa ballaca ugu badan ee 300px kiiskan. Tani waa habka ugu wanaagsan ee lagu hubinayo in sawirada SVG si sax ah loogu soo bandhigay dhammaan aaladaha iyo macaamiisha iimaylka.

Fiiro gaar ah: Taageerada SVG way kala duwanaan kartaa iyadoo ku xidhan iimaylka macmiilka, marka waa muhiim inaad emailkaaga ku tijaabiso macaamiil badan si loo hubiyo in sawirka SVG si sax ah loo soo bandhigay.

Hab kale oo lagu codeeyo emails HTML ee bandhigyada Retina waa in la isticmaalo srcset. Isticmaalka sifada srcset waxay kuu ogolaanaysaa inaad bixiso sawiro heer sare ah oo loogu talagalay bandhigyada Retina iyadoo la hubinayo in sawiradu ay si sax ah u cabbiraan aaladaha xallinta hoose.

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

Tusaalahan, the srcset sifadu waxay bixisaa laba ilo sawir: image.jpg qalabka leh xallinta 600 pixels ama ka yar, iyo image@2x.jpg qalabka leh xallinta 1200 pixels ama ka badan. The 600w iyo 1200w Sharaxayaashu waxay cayimaan cabbirka sawirada pixels, kaas oo ka caawiya browserka inuu go'aamiyo sawirka la soo dejiyo iyadoo lagu saleynayo xallinta qalabka.

Dhammaan macaamiisha iimaylka ma taageeraan srcset sifo. Heerka taageerada ee srcset si weyn ayey u kala duwanaan kartaa iyadoo ku xiran iimaylka macmiilka ah, sidaa darteed waxaa muhiim ah in lagu tijaabiyo iimayladaada macaamiil badan si loo hubiyo in sawirada si sax ah loo soo bandhigay.

HTML ee Sawirada ku jira iimaylka La hagaajiyay Sawirada Retina

waxaa suurtogal ah in la codeeyo iimaylka jawaabaha leh ee HTML kaas oo si sax ah u muujin doona sawirka xallinta loo habeeyay bandhigyada retina. Waa kan sida:

  1. Samee sawir heersare ah oo laban laabaya cabbirka sawirka dhabta ah ee aad rabto inaad ku muujiso iimaylka. Tusaale ahaan, haddii aad rabto inaad muujiso sawir 300×200, samee sawir 600×400 ah.
  2. Ku keydi sawirka qaraarka sare leh @ 2x daba-gal. Tusaale ahaan, haddii sawirkaagii asalka ahaa uu yahay image.png, u keydi nooca xalinta sare sida sawir@2x.png.
  3. Koodhka iimaylkaaga HTML, isticmaal koodka soo socda si aad u muujiso sawirka:
<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)]> waa faallo shuruudaysan oo loo isticmaalo in lagu beegsado noocyo gaar ah oo Microsoft Outlook ah, kaas oo isticmaala Microsoft Word si uu u bixiyo emails HTML. Matoorka samaynta HTML ee Microsoft Word wuxuu aad uga duwanaan karaa macaamiisha kale ee iimaylka iyo daalacashada webka, sidaa darteed waxay inta badan u baahan tahay maarayn gaar ah. The

(gte mso 9) xaaladdu waxay hubinaysaa haddii nooca Microsoft Office uu ka weyn yahay ama la mid yahay 9, kaas oo u dhigma Microsoft Office 2000. |(IE) xaaladdu waxay hubinaysaa haddii macmiilku yahay Internet Explorer, kaas oo inta badan ay isticmaasho Microsoft Outlook.

Iimayl HTML leh Sawirada La Hagaajiyey ee Retina

Waa kuwan tusaale koodhka iimaylka ah ee HTML ka jawaabaya kaas oo muujinaya sawirka xallinta loo habeeyay bandhigyada 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>

Tilmaamaha Sawirka ee Retina

Waa kuwan qaar ka mid ah talooyin dheeraad ah oo ku saabsan hagaajinta iimaylada HTML-kaaga ee sawirrada loo habeeyay bandhigyada Retina:

  • U hubso inaad had iyo jeer haysato astaanta sawirkaaga oo ay ku jirto isticmaalka alt qoraal si ay u bixiyaan macnaha guud ee sawirka.
  • U wanaaji sawirada shabakada si aad u yarayso cabbirka faylka adiga oo aan waxyeello u geysan tayada sawirka. Tan waxaa ka mid noqon kara isticmaalka faafidda sawirka qalabka, yaraynta tirada midabada loo isticmaalo sawirka, iyo dib u habeynta sawirka cabbirkiisa ugu wanaagsan ka hor inta aan la gelin emailka.
  • Ka fogow sawirada gadaale ee waaweyn ee hoos u dhigi kara wakhtiyada rarka iimaylka.
  • GIF-yada fir-fircooni waxay ka weynaan karaan cabbirka faylka marka loo eego sawirada taagan sababta oo ah xarafyo badan oo loo baahan yahay si loo abuuro animation, hubi inaad si fiican uga hoosayso 1 Mb.

Douglas Karr

Douglas Karr waa CMO INSIGHTS iyo aasaasihii Martech Zone. Douglas waxa uu caawiyay daraasiin guulo bilaabay MarTech, waxa uu ka caawiyay dadaalka saxda ah ee ka badan $5 bilyan ee iibsiga iyo maalgashiga Martech, waxana uu sii wadaa in uu ka caawiyo shirkadaha hirgelinta iyo habaynta xeeladahooda iibka iyo suuqgeynta. Douglas waa isbeddel dhijitaal ah oo caalami ah oo la aqoonsan yahay iyo khabiir MarTech iyo afhayeenka. Douglas sidoo kale waa qoraa la daabacay ee hagaha Dummie iyo buug hogaaminta ganacsiga.

Qodobbo la xiriira

Gadaal u laab
Close

Adblock waa la ogaaday

Martech Zone wuxuu awoodaa inuu ku siiyo macluumaadkan lacag la'aan sababtoo ah waxaanu ka galnay boggayaga dakhliga xayaysiiska, xidhiidhada xiriirka, iyo kafaalaqaadyada. Waanu qadarin lahayn haddii aad ka saari lahayd xannibaadahaaga xayaysiisyada markaad aragto boggayaga.