Jak pociąć obrazek w mailingu?

Ze względu na spore zainteresowanie naszym świeżym gadżetem – FreshMail Inspektorem, o którym pisaliśmy w tym artykule, pojawiły się pytania. Jedno z nich – bardzo ważne, dotyczy „cięcia obrazków” w trakcie przygotowywania kreacji.

Trzeba pamiętać, że programy antyspamowe skanują wysyłkę pod kątem spamu. Dzięki Spam Testowi, który jest dostępny z poziomu naszego systemu, możesz ocenić czy przypadkiem stosunek grafiki w stosunku do tekstu nie jest za duży. A jeżeli jest, trzeba wykonać niezbędne cięcie ;-) Istnieje także drugi powód, dla którego warto to zrobić – zauważyliśmy, że programy pocztowe automatycznie blokują większe obrazki pytając, czy chcesz je pobrać. Jeżeli będzie ich kilka, o małych rozmiarach, istnieje większe prawdopodobieństwo, że wyświetlą się od razu.

Oczywiście kwestia samego przedzielania obrazka na mniejsze części to żaden problem – możesz to zrobić niemalże w każdym najprostszym edytorze graficznym. Kiedy jednak zachodzi potrzeba pokrojenia zbyt dużej do udźwignięcia przez programy pocztowe grafiki należy również ją poprawnie złożyć za pomocą kodu HTML. A to już wyższa szkoła jazdy.

Przykładowo kod dla podzielonego na pół obrazka o oryginalnej szerokości 600px będzie wyglądał następująco:

<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff;width:600px;margin:0 auto;padding:0;border:none;">
<tr>
<td bgcolor="#ffffff" width="300" style="background-color: #ffffff;width:300px;">
<img src="01a.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height:300px;"/>
</td>
<td bgcolor="#ffffff" width="300" style="background-color:#ffffff;width:300px;">
<img src="01b.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height: 300px;"/>
</td>
</tr>
</table>

Obrazek podzielony na cztery części o oryginalnej szerokości 600px pod względem kodu HTML będzie wyglądał analogicznie do poprzedniego. Wystarczy dołożyć jeden rząd w tabeli:

<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff;width:600px;margin:0 auto;padding:0;border:none;">
<tr>
<td bgcolor="#ffffff" width="300" style="background-color: #ffffff;width:300px;">
<img src="01a.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height:300px;"/>
</td>
<td bgcolor="#ffffff" width="300" style="background-color:#ffffff;width:300px;">
<img src="01b.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height: 300px;"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="300" style="background-color: #ffffff;width:300px;">
<img src="02a.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height:300px;"/>
</td>
<td bgcolor="#ffffff" width="300" style="background-color:#ffffff;width:300px;">
<img src="02b.jpg" alt="Pobierz obrazki!" style="border: none; display: block; width: 300px; height: 300px;"/>
</td>
</tr>
</table>

W przypadku pytań, zapraszamy na mail info@freshmail.pl. Dziękujemy za zwrócenie uwagi na wytłumaczenie tego zagadnienia i zachęcamy do dzielenia się z nami swoimi spostrzeżeniami.