Jak používat obrázky ve vysokém rozlišení pro displeje sítnice ve vašem HTML e-mailu
Retina displej je marketingový termín používaný společností jablko popsat displej s vysokým rozlišením, který má hustotu pixelů dostatečně vysokou, že lidské oko není schopno rozlišit jednotlivé pixely v typické pozorovací vzdálenosti. Retina displej má obvykle hustotu pixelů 300 pixelů na palec (ppi) nebo vyšší, což je výrazně vyšší hodnota než u standardního displeje s hustotou pixelů 72 ppi.
Retina displeje jsou nyní docela běžné pro displeje, notebooky, mobilní zařízení a tablety. Mnoho výrobců nyní nabízí displeje s vysokým rozlišením a hustotou pixelů, která odpovídá nebo překračuje hodnoty Retina displejů Apple.
CSS pro zobrazení obrazu ve vyšším rozlišení pro displej sítnice
Následující kód CSS můžete použít k načtení obrázku ve vysokém rozlišení pro displej Retina. Tento kód detekuje hustotu pixelů zařízení a načte obrázek s @2x přípona pro displeje Retina, zatímco pro ostatní displeje se načítá obrázek ve standardním rozlišení.
@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');
}
Dalším přístupem je použití vektorové grafiky resp SVG obrázky, které lze škálovat na libovolné rozlišení bez ztráty kvality. Zde je pří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 příkladu je kód SVG vložen přímo do HTML e-mailu pomocí <svg>
štítek. The viewBox
atribut definuje rozměry obrázku SVG, zatímco atribut xmlns
atribut určuje jmenný prostor XML pro SVG.
Projekt max-width
nemovitost je nastavena na div
prvek, abyste zajistili, že se obrázek SVG automaticky přizpůsobí dostupnému prostoru, v tomto případě až do maximální šířky 300 pixelů. Toto je osvědčený postup pro zajištění správného zobrazení obrázků SVG na všech zařízeních a e-mailových klientech.
Poznámka: Podpora SVG se může lišit v závislosti na e-mailovém klientovi, takže je důležité otestovat svůj e-mail na více klientech, abyste se ujistili, že se obrázek SVG zobrazuje správně.
Dalším způsobem kódování e-mailů HTML pro displeje Retina je využití srcset
. Použití atributu srcset vám umožňuje poskytovat obrázky s vysokým rozlišením pro displeje Retina a zároveň zajistit, aby obrázky měly správnou velikost pro zařízení s nižším rozliš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 příkladu srcset
atribut poskytuje dva zdroje obrázků: image.jpg
pro zařízení s rozlišením 600 pixelů nebo méně a image@2x.jpg
pro zařízení s rozlišením 1200 pixelů nebo více. The 600w
a 1200w
deskriptory určují velikost obrázků v pixelech, což prohlížeči pomáhá určit, který obrázek má stáhnout na základě rozlišení zařízení.
Ne všichni e-mailoví klienti podporují srcset
atribut. Úroveň podpory pro srcset
se mohou značně lišit v závislosti na e-mailovém klientovi, takže je důležité otestovat své e-maily na více klientech, abyste se ujistili, že se obrázky zobrazují správně.
HTML pro obrázky v e-mailu optimalizované pro displeje sítnice
je možné nakódovat responzivní HTML e-mail, který správně zobrazí obrázek v rozlišení optimalizovaném pro displeje sítnice. Zde je postup:
- Vytvořte obrázek s vysokým rozlišením, který je dvakrát větší než skutečný obrázek, který chcete zobrazit v e-mailu. Pokud chcete například zobrazit obrázek 300×200, vytvořte obrázek 600×400.
- Uložte obrázek ve vysokém rozlišení pomocí @2x přípona. Pokud je například váš původní obrázek image.png, uložte verzi s vysokým rozlišením jako obrázek@2x.png.
- V e-mailovém kódu HTML použijte k zobrazení obrázku následující 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 podmíněný komentář, který se používá k cílení na konkrétní verze aplikace Microsoft Outlook, která používá aplikaci Microsoft Word k vykreslování e-mailů HTML. Vykreslovací modul HTML aplikace Microsoft Word se může značně lišit od jiných e-mailových klientů a webových prohlížečů, takže často vyžaduje zvláštní zacházení. The
(gte mso 9)
podmínka kontroluje, zda je verze Microsoft Office větší nebo rovna 9, což odpovídá Microsoft Office 2000. |(IE)
podmínka kontroluje, zda je klientem Internet Explorer, který často používá Microsoft Outlook. HTML e-mail s optimalizovanými obrázky pro zobrazení sítnice
Zde je příklad responzivního HTML e-mailového kódu, který zobrazuje obrázek v rozlišení optimalizovaném pro displeje sítnice:
<!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>
Obrazové tipy pro zobrazení sítnice
Zde je několik dalších tipů pro optimalizaci vašich HTML e-mailů pro obrázky optimalizované pro displeje Retina:
- Ujistěte se, že vaše značky obrázků vždy obsahují použití
alt
text, který poskytuje kontext obrázku. - Optimalizujte obrázky pro web, abyste zmenšili velikost souboru, aniž by došlo ke snížení kvality obrazu. To může zahrnovat použití komprese obrazu nástroje, snížení počtu barev použitých v obrázku a změnu velikosti obrázku na optimální rozměry před jeho odesláním do e-mailu.
- Vyhněte se velkým obrázkům na pozadí, které mohou zpomalit načítání e-mailů.
- Animované GIFy mohou mít větší velikost souboru než statické obrázky kvůli více snímkům potřebným k vytvoření animace, ujistěte se, že je udržujte výrazně pod 1 Mb.