Nola erabili bereizmen handiko irudiak erretinako pantailetarako zure HTML posta elektronikoan
Erretina pantailak erabiltzen duen marketin terminoa da Apple pixel-dentsitatea nahikoa handia duen bereizmen handiko pantaila bat deskribatzeko, gizakiaren begiak ikusmen-distantzia tipiko batean pixel indibidualak bereizteko gai ez dezan. Erretinako pantaila batek normalean 300 pixeleko dentsitatea du hazbeteko (ppp) edo handiagoa, 72 ppi-ko pixel-dentsitatea duen pantaila estandarra baino nabarmen handiagoa dena.
Erretina pantailak nahiko ohikoak dira pantaila, ordenagailu eramangarri, gailu mugikor eta tabletetarako. Fabrikatzaile askok orain bereizmen handiko pantailak eskaintzen dituzte Apple-ren Retina pantailen pareko edo gainditzen duten pixel-dentsitateekin.
CSS Erretina Pantailarako bereizmen handiagoko irudia bistaratzeko
CSS kodea hau erabil dezakezu Retina pantaila baterako bereizmen handiko irudi bat kargatzeko. Kode honek gailuaren pixel-dentsitatea detektatzen du eta irudia kargatzen du @ 2x Retina pantailetarako atzizkia, beste pantailetarako bereizmen estandarreko irudia kargatzen duzun bitartean.
@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');
}
Beste ikuspegi bat grafiko bektorialak edo erabiltzea da SVG irudiak, edozein bereizmenera eskala daitezkeenak, kalitatea galdu gabe. Hona hemen adibide bat:
<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>
Adibide honetan, SVG kodea HTML mezu elektronikoan zuzenean txertatzen da <svg>
etiketa. The viewBox
atributuak SVG irudiaren dimentsioak definitzen ditu, eta xmlns
atributuak SVGrako XML izen-espazioa zehazten du.
The max-width
jabetzan ezarrita dago div
elementua SVG irudia automatikoki eskalatzen dela bermatzeko erabilgarri dagoen espaziora egokitzeko, kasu honetan 300 px-ko gehienezko zabalera arte. Hau praktika onena da SVG irudiak gailu guztietan eta posta elektronikoko bezero guztietan behar bezala bistaratzen direla ziurtatzeko.
Ohar: SVG laguntza alda daiteke posta-bezeroaren arabera, beraz, garrantzitsua da zure posta elektronikoa hainbat bezerotan probatzea SVG irudia behar bezala bistaratzen dela ziurtatzeko.
Retina pantailetarako HTML mezu elektronikoak kodetzeko beste modu bat erabiltzea da srcset
. Srcset atributua erabiliz, Retina pantailetarako bereizmen handiko irudiak eskaintzeko aukera ematen du, irudiak bereizmen baxuko gailuetarako tamaina egokia dutela bermatuz.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Adibide honetan, srcset
atributuak bi irudi iturri eskaintzen ditu: image.jpg
600 pixeleko edo gutxiagoko bereizmena duten gailuetarako, eta image@2x.jpg
1200 pixeleko edo gehiagoko bereizmena duten gailuetarako. The 600w
1200w
deskribatzaileek irudien tamaina pixeletan zehazten dute, eta horrek arakatzaileari zein irudi deskargatu gailuaren bereizmenaren arabera zehazten laguntzen du.
Posta elektronikoko bezero guztiek ez dute onartzen srcset
atributu. Laguntza maila srcset
asko alda daiteke posta-bezeroaren arabera, beraz, garrantzitsua da zure mezu elektronikoak hainbat bezerotan probatzea irudiak behar bezala bistaratzen direla ziurtatzeko.
Erretina Pantailetarako Optimizatutako Posta Elektronikoko Irudietarako HTML
posible da erretinako pantailetarako optimizatutako bereizmenean irudi bat behar bezala bistaratuko duen HTML email email bat kodetzea. Hona hemen nola:
- Sortu mezu elektronikoan erakutsi nahi duzun benetako irudiaren tamaina bikoitza duen bereizmen handiko irudia. Adibidez, 300×200 irudi bat bistaratu nahi baduzu, sortu 600×400 irudi bat.
- Gorde bereizmen handiko irudia @ 2x atzizkia. Adibidez, zure jatorrizko irudia bada image.png, gorde bereizmen handiko bertsioa honela irudia@2x.png.
- Zure HTML posta elektronikoko kodean, erabili kode hau irudia bistaratzeko:
<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)]>
Baldintzapeko iruzkin bat da, Microsoft Outlook-en bertsio zehatzetara bideratzeko erabiltzen dena, Microsoft Word erabiltzen duena HTML mezu elektronikoak errendatzeko. Microsoft Word-en HTML errendatze-motorra beste posta-bezero eta web-arakatzaileetatik nahiko desberdina izan daiteke, beraz, askotan manipulazio berezia behar du. The
(gte mso 9)
baldintzak egiaztatzen du Microsoft Office bertsioa 9 baino handiagoa edo berdina den, Microsoft Office 2000-ri dagokiona. |(IE)
Baldintzak bezeroa Internet Explorer den egiaztatzen du, Microsoft Outlook-ek askotan erabiltzen duena. HTML posta elektronikoa Erretinaren pantaila optimizatutako irudiekin
Hona hemen erretinako pantailetarako optimizatutako bereizmenean irudi bat bistaratzen duen HTML email kode erantzuteko adibide bat:
<!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>
Erretina bistaratzeko irudiaren aholkuak
Hona hemen zure HTML mezu elektronikoak optimizatzeko aholku gehigarri batzuk Retina pantailetarako optimizatutako irudietarako:
- Ziurtatu beti zure irudi-etiketak erabiltzea barne hartzen duzula
alt
testua irudiari testuingurua emateko. - Optimizatu irudiak sarerako fitxategien tamaina murrizteko, irudiaren kalitatea kaltetu gabe. Horrek erabil dezake irudien konpresioa tresnak, irudian erabilitako kolore kopurua murriztuz eta irudia bere dimentsio optimoetara tamainaz aldatzea posta elektronikora igo aurretik.
- Saihestu posta elektronikoaren karga-denbora moteldu dezaketen atzeko planoko irudi handiak.
- GIF animatuek fitxategi-tamaina handiagoa izan dezakete irudi estatikoak baino, animazioa sortzeko beharrezkoak diren fotograma anitz direla eta, ziurtatu 1etik behera mantentzea. Mb.