Nepravilno prikazovanje slik v e-mail sporočilih v Outlooku

Prikazovanje e-mailov v različnih e-mail klientih običajno vedno prinaša težave. Ena takšnih težav je tudi nepravilno prikazovanje slik e-mailov v Outlooku. Razlog zato tiči v »umetnem« povečevanjem elementov, ki se nastavi skozi nastavitve Windows.

T.i. »DPI Scaling« v Outlooku 2007-2013 je glavni krivec za nepravilno prikazovanje slik v e-mail sporočilih. Običajno takšnih napak ne opazimo, če sami nimamo ustreznih nastavitev, ampak se z njimi srečamo, ko prejmemo »screenshote« nepravilnega prikazovanja. V praksi se napaka kaže v obliki praznih prostorov na desni ali levi strani slik.

Outlookovo delovanje na e-mail

Vsakič, ko odpremo e-mail v Outlooku, se vsebina prikaže s pomočjo motorja za renderiranje. To pa je osnova naših težav, namreč umetna povečava naredi naslednje:

  • Vse širine in višine definirane s pomočjo HRML atributov se ohranijo, kot PX vrednosti.
  • Vse dimenzije VML oblik se ohranijo v PX vrednostih.
  • Vse ostale vrednosti se pretvorijo v PT vrednosti.
  • DPI povečevanje, ki se vklopiv Windowsih se nanaša na vse PT vrednosti. V praksi to pomeni, da se 10PT enot pri 150% povečanju spremeni v 15PT.

Zaradi tega se spremenijo velikosti fontov, odmikov, … ker pa tabele in slike uporabljajo PX enote se te vrednosti ne spremenijo.

Rešitev za Outlook povečevanje slik

Vsem tabelam oz. njenim celicam v e-mailu določimo »inline« stile v katerih dorečemo višine in širine.

<!-- Wrapper table is percent width, no inline style needed -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">

<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td height="200" align="center" style="width: 600px; height: 200px;">
<!-- Use inline styles for pixel widths and heights -->
<!-- Still need height attribute for Gmail -->
</td>
</tr>
</table>

</td>
</tr>
</table>

Za ustrezno VML prikazovanje potrebujemo še naslednjo kodo v glavi.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

Za ustrezno »cellspacing« in »cellpadding« dodamo naslednje mso stile.

<table cellspacing="5" cellpadding="10" border="0" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>

Pred uporabo vedno naredite ustrezne teste.
Vir: https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013