Ako používať obrázky s vysokým rozlíšením pre displeje sietnice vo vašom HTML e-maile
Retina displej je marketingový výraz, ktorý používa jablko opísať displej s vysokým rozlíšením, ktorý má hustotu pixelov dostatočne vysokú na to, aby ľudské oko nebolo schopné rozlíšiť jednotlivé pixely v typickej vzdialenosti sledovania. Retina displej má zvyčajne hustotu pixelov 300 pixelov na palec (ppi) alebo vyšší, čo je výrazne viac ako pri štandardnom displeji s hustotou pixelov 72 ppi.
Retina displeje sú teraz celkom bežné pre displeje, notebooky, mobilné zariadenia a tablety. Mnoho výrobcov v súčasnosti ponúka displeje s vysokým rozlíšením a hustotou pixelov, ktorá sa zhoduje s displejmi Retina od Apple alebo ich prevyšuje.
CSS na zobrazenie obrazu vo vyššom rozlíšení pre displej sietnice
Na načítanie obrázka s vysokým rozlíšením pre displej Retina môžete použiť nasledujúci kód CSS. Tento kód deteguje hustotu pixelov zariadenia a načíta obrázok s @2x prípona pre Retina displeje, pričom sa načítava obrázok so štandardným rozlíšením pre ostatné displeje.
@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');
}
Ďalším prístupom je použitie vektorovej grafiky resp SVG obrázky, ktoré sa dajú škálovať na akékoľvek rozlíšenie bez straty kvality. Tu je príklad:
<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>
V tomto príklade je kód SVG vložený priamo do HTML e-mailu pomocou <svg>
tag. The viewBox
atribút definuje rozmery obrázka SVG, zatiaľ čo atribút xmlns
atribút určuje priestor názvov XML pre SVG.
max-width
nehnuteľnosť je nastavená na div
aby sa zabezpečilo, že obrázok SVG sa automaticky prispôsobí dostupnému priestoru, v tomto prípade až do maximálnej šírky 300 pixelov. Toto je najlepší postup na zabezpečenie správneho zobrazenia obrázkov SVG na všetkých zariadeniach a e-mailových klientoch.
Poznámka: Podpora SVG sa môže líšiť v závislosti od e-mailového klienta, preto je dôležité otestovať svoj e-mail na viacerých klientoch, aby ste sa uistili, že sa obrázok SVG zobrazuje správne.
Ďalším spôsobom kódovania e-mailov HTML pre displeje Retina je využitie srcset
. Použitie atribútu srcset vám umožňuje poskytovať obrázky s vysokým rozlíšením pre displeje Retina a zároveň zabezpečiť, aby obrázky mali správnu veľkosť pre zariadenia s nižším rozlíšením.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
V tomto prípade je srcset
atribút poskytuje dva zdroje obrázkov: image.jpg
pre zariadenia s rozlíšením 600 pixelov alebo menej a image@2x.jpg
pre zariadenia s rozlíšením 1200 pixelov alebo viac. The 600w
a 1200w
deskriptory určujú veľkosť obrázkov v pixeloch, čo pomáha prehliadaču určiť, ktorý obrázok sa má stiahnuť na základe rozlíšenia zariadenia.
Nie všetci e-mailoví klienti podporujú srcset
atribút. Úroveň podpory pre srcset
sa môže značne líšiť v závislosti od e-mailového klienta, preto je dôležité otestovať e-maily na viacerých klientoch, aby ste sa uistili, že sa obrázky zobrazujú správne.
HTML pre obrázky v e-maile optimalizované pre displeje sietnice
je možné nakódovať responzívny HTML e-mail, ktorý správne zobrazí obrázok v rozlíšení optimalizovanom pre displeje sietnice. Tu je postup:
- Vytvorte obrázok s vysokým rozlíšením, ktorý je dvakrát väčší ako skutočný obrázok, ktorý chcete zobraziť v e-maile. Ak chcete napríklad zobraziť obrázok s rozmermi 300 × 200, vytvorte obrázok s rozmermi 600 × 400.
- Uložte obrázok vo vysokom rozlíšení pomocou @2x prípona. Napríklad, ak je váš pôvodný obrázok image.png, uložte verziu s vysokým rozlíšením ako image@2x.png.
- Vo svojom e-mailovom kóde HTML použite na zobrazenie obrázka nasledujúci kód:
<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)]>
je podmienený komentár, ktorý sa používa na zacielenie na konkrétne verzie programu Microsoft Outlook, ktorý používa program Microsoft Word na vykresľovanie e-mailov vo formáte HTML. Vykresľovací mechanizmus HTML programu Microsoft Word sa môže značne líšiť od iných e-mailových klientov a webových prehliadačov, takže často vyžaduje špeciálne zaobchádzanie. The
(gte mso 9)
podmienka kontroluje, či je verzia balíka Microsoft Office väčšia alebo rovná 9, čo zodpovedá balíku Microsoft Office 2000. |(IE)
podmienka kontroluje, či je klientom Internet Explorer, ktorý často používa Microsoft Outlook. HTML e-mail s optimalizovanými obrázkami pre sietnicu
Tu je príklad responzívneho e-mailového kódu HTML, ktorý zobrazuje obrázok v rozlíšení optimalizovanom pre displeje sietnice:
<!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>
Tipy na zobrazenie sietnice
Tu je niekoľko ďalších tipov na optimalizáciu e-mailov HTML pre obrázky optimalizované pre displeje Retina:
- Uistite sa, že vaše značky obrázkov vždy obsahujú použitie
alt
text na poskytnutie kontextu pre obrázok. - Optimalizujte obrázky pre web, aby ste zmenšili veľkosť súboru bez zníženia kvality obrazu. To môže zahŕňať použitie kompresia obrazu nástroje, zníženie počtu farieb použitých v obrázku a zmena veľkosti obrázka na optimálne rozmery pred jeho nahraním do e-mailu.
- Vyhnite sa veľkým obrázkom na pozadí, ktoré môžu spomaliť načítanie e-mailov.
- Animované súbory GIF môžu mať väčšiu veľkosť súboru ako statické obrázky kvôli viacerým snímkam potrebným na vytvorenie animácie, dbajte na to, aby ich veľkosť nepresahovala 1 Mb.