Grafika w kreacji email. Tips and tricks. Część 1

kreacja

Każdy szanujący się specjalista do e-mail marketingu wie, dlaczego warto używać grafiki w swoich kreacjach. Jak wiadomo większość osób w internecie skanuje tekst nie czytając go. Dzięki grafice możemy skupić uwagę użytkownika na najbardziej konkretnych dla nas informacjach, które chcemy przekazać naszym subskrybentom i zachęcić ich do akcji.

Nasze wiadomości dzięki obrazkom są nie tylko ładne, ale też osoba skupia się na naszej wiadomości, ponieważ właśnie obrazki przyciągają uwagę.

Jednak nawet te zalety dla wielu osób przygotowujących kreacje email nie są wystarczające, aby bardziej skupić swoją uwagę na prawidłowo przygotowanej grafice do kreacji email. Specjalinie dla Was przygotowaliśmy kilka punktów, które Wam w tym pomogą.

Format plików

Nie mamy tu dużego popisu w przypadku kreacji e-mail. Popularne wersje klientów pocztowych obsługują niestety cztery formaty JPG, GIF, PNG oraz BMP. Ostatni możemy od razu pominąć, ponieważ nie oferuje kompresji, o której powiem później. Tak więc zostały nam trzy. Osobiście używam formatu PNG, gdyż łączy w sobie przezroczystość formatu GIF oraz prawie bezstratną kompresję.

Kilka słów o kompresji. Kompresja to metoda zmniejszania liczby bitów potrzebnych do wyrażenia danej informacji. Mówiąc po polsku nasze obrazki zajmują mniej. Dzięki temu:

  • nasze kreacje przez mniejszą objętość plików graficznych rzadziej trafiają do spamu,
  • jeśli rozliczamy się za transfer to płacimy mniej dla ESP (Email service provider) lub firmy hostingowej,
  • klienci nie muszą za długo czekać na załadowanie grafiki. Jest to bardzo ważne w przypadku użytkowników z łączami mobilnymi lub osób czytających nasze e-maile na komórkach.

Jeśli wysyłamy kampanię do kilku tysięcy subskrybentów to wybór odpowiedniego formatu obrazka jest raczej mało istotny. Jednak jeśli subskrybentów mamy blisko 7 cyfrowej liczby, to dobór odpowiedniego formatu pozwoli zaoszczędzić znaczną część transferu.

Oprócz oczywistych korzyści dla przedsiębiorców (mniejsze rachunki za transfer danych) dobór odpowiedniego formatu dla użytkowników końcowych pozwala uzyskać znakomity efekt wizualny, nawet przy znacznej kompresji i skróceniu czasu wczytywania obrazków. Jeśli header naszej wiadomości i jej główny przekaz jest wyrażony obrazkiem, to tak naprawdę mamy kilka sekund, aby obrazek się pobrał i zachęcił odbiorcę.

JPG

Idealny format kompresji do zdjęć dzięki zachowaniu 24bitowego koloru. Aby uzyskać odpowiedni rozmiar należy zastosować mocniejszą kompresję, która jest w przypadku JPG stratna i źle się sprawdza z ostrymi krawędziami (np. tekst w formie obrazka). JPG pozwala zaś zastosować najmniejszy możliwy rozmiar obrazka, nawet kosztem jakości.

Zalety:

  • 24-bitowy kolor,
  • idealny format dla zdjęć, obrazków z paletą barw większą niż 256 kolorów,

Wady:

  • kompresja stratna, przez to obrazy są rozmazane i nieostre,
  • nie najlepszy do przezetnacji tekstu i obrazków z ostrymi krawędziami,
  • brak możliwości animacji,
  • nie obsługuje przezroczystości,

 GIF

W przypadku formatu GIF mamy odwrotną sytuację niż formacie JPG. Format GIF idealnie nadaje się do prezentacji ikon, tekstu, logo produktów. W formacie GIF w przypadku zdjęć możemy zastosować przezroczystość, a kompresja w tym formacie jest prawie bezstratna. Niestety za to wszystko musimy zapłacić tylko 256 kolorami. Tak więc zdjęcia w gif’ie są po prostu brzydkie.

Najważniejszą zaletą obrazków GIF, która przypadła do gustu e-mail marketerom, jest możliwość tworzenia animacji. Przy pomocy odpowiedniego programu możemy przygotować kilka klatek animacji, przez co nasze grafiki otrzymują dynamikę.

Zalety:

  • obsługuje przezroczystość,
  • obraz może być animowany,
  • idealny format dla tekstu, ikon, logo,
  • kompresja bezstratna,

Wady

  • tylko 256 kolorów,
  • nie najlepszy format do zdjęć,
  • przy dużej liczbie szczegółów obraz staje się zbyt ciężki do zastosowania w internecie,

 PNG

Najbardziej nowoczesny format. Przez zastosowanie 2 wersji kompresji – 8 i 16 bitowej pozwala mu przyjąć najlepsze cechy dwóch wspomnianych poprzedników. Idealny do zdjęć, logo, tekstów i obrazów o ostrych krawędziach. Przy odpowiednim programie umożliwia kompresję prawie bezstratną. Wiele szczegółów na obrazie nie powoduje, że jego wielość rośnie w szalonym tempie. Niestety PNG nie pozwala animować obrazów jak w przypadku GIF. Również nie wszystkie przeglądarki obsługują powyższy format.

Zalety:

  • kompresja bezstratna,
  • mała wielkość pliku,
  • idealny format do tekstu, logo, obrazów z ostrymi krawędziami,

Wady

  • brak animacji,
  • nie działa na wszystkich klientach pocztowych i przeglądarkach,
  • duży rozmiar przy rozbudowanych obrazach,

Osobiście jeśli nie muszę używać animacji w kreacji, to używam formatu PNG. Daje prawie idealny obraz, a do tego bardzo dobry stosunek jakości do rozmiaru poprzez zastosowanie narzędzia tinypng.com.

Przygotowywanie obrazu

Przed przygotowaniem obrazka musimy zastanowić się, czy naprawdę go chcemy w naszej kampanii, czy lepiej używać wymyślnej czcionki na grafice, czy też tło pod tekstem zastąpić tabelką z kolorowym tłem i wstawić czcionkę standardową. Wizualnie pewnie pierwsze rozwiązanie jest lepsze, ale pamiętajmy, że nie wszyscy na starcie otwierają nasze obrazki.

Jeśli już zdecydowanie chcemy grafikę w naszej kreacji, to raczej powinniśmy stosować grafikę dużych rozmiarów, czyli – 550px – 650px szerokości oraz 300px – 500px wysokości to absolutne maksimum. Jednak nawet takie obrazki lepiej podzielić na mniejsze elemety. Przez to uda się ominąć filtry antyspamowe.

Następnym krokiem jest zapis naszych kawałków grafiki do formatu PNG bez kompresji. Niestety większość programów z Photoshopem na czele nie uzyska tak idealnego stopnia kompresji jak program dostępny pod adresem tinypng.com dlatego zapisujemy je jako orgniały i zmieniamy poprzez wcześniej podaną stronę. Następny krok to już tylko osadzenie w html.

Wstawienie obrazu do kreacji

Teraz zostało jedynie osadzenie grafiki w kodzie html. Jednak tutaj też są pułapki. Jak wiadomo każdy klient poczty inaczej traktuje standardy html i css, przez co dokładne kodowanie obrazka pozwoli uniknąć „rozsypywania się” kreacji. Dość pomocnym narzędziem będzie http://www.htmlkit.com/services/is/. Wstawiamy na stronę skryptu nasz duży obrazek, konfigurujemy, na ile kwadratów ma być pocięty i Voilà mamy gotowe małe kwadraty wraz z kodem html. Jednak i ten kod musimy trochę zmodyfikować.

Wszystkie obrazy stawiamy w tabelę w komórki <TD>. Przy jednym obrazku na całą kreację jest to gruba przesada, ale jeśli chcemy obrazkowi dobrze określić położenie w naszej kreacji, jest to absolutnie konieczne.  Dodatkowo jeden obrazek na jedną komórkę <TD> – pozwoli idealnie określić położenie wszystkich obrazków i uniemożliwi ich przemieszczanie, co jednak się zdarza w niektórych klientach pocztowych.

Pierwszą rzeczą, którą należy przygotować, to wstawienie nagłówka tabeli:

<table cellspasing="0" cellpadding="0" border="0">

Powyższy kod pozwoli uzyskać tabelkę bez odstępów między komórkami. Pokazując obok siebie 2 obrazki uzyskamy jakby jeden całościowo większy obrazek i ominiemy filtr spamu. Następnie umieszczamy obrazek w komórce <td>. Pamiętajmy by nie stosować colspan. Jeśli chcemy tabelę podzielić na mniejsze elementy, stosujmy tabelę w tabeli. Samo wstawienie obrazka niczym się nie różni od standardowego użycia html:

<table cellspasing="0" cellpadding="0" border="0">
<tr>
<td><img src="obrazek.png"></td>
</tr>
</table>

Bardzo ważnych jest tutaj kilka parametrów, które powiniśmy dopisać do naszego obrazka. Pierwszy to border=”0″, który spowoduje, że jeśli podlinkujemy nasz obrazek, to nie pojawi się wokół niego niebieska otoczka. Drugim ważnym parametrem jest style=”display: block”, który zlikwiduje odstępy miedzy obrazkami tworzone przez np. outlook. Następnie dodajemy rzeczywisty rozmiar naszego obrazka poprzez parametr width i height oraz w stylach. Uzyskamy dzięki temu obszar, który klient pocztowy utworzy dla danego obrazka. Dzięki temu zlikwidujemy sytuacje poruszania kreacji i tekstu podczas pobierania obrazów. No i na koniec warto również opisać wysokość i szerokość obrazka w komórce <TD> specjalnie przygotownej do tego, gdyż nie wszyscy klienci pocztowi od razu rezerwują miejsce na niepobrany/zablokowany obraz. Tak więc nasz kod wygląda tak:

<table cellspasing="0" cellpadding="0" border="0">
<tr>
<td width="300" height="300"><img border="0" style="display: block; width: 300px; height: 300px;" src="obrazek.png"></td>
</tr>
</table>

Jak mogliście zauważyć, specjalnie nie podałem wartości px w szerokości i wysokości komórek tabeli. Niestety Microsoft Outlook niedokładnie interpertuje ten parametr i nie zawsze rysuje oczekiwaną przez nas tabelę. Podanie samych liczb rozwiązuje problem.

To  narazie tyle. Oczywiście nie są to wszystkie możliwości, które można zastosować na obrazkach w kreacjach e-mail, ale o tym w kolejnym wpisie.

3 komentarze

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *