102 kodu e-mail: praca z obrazami

Widok kodu rozlewającego się przed tobą może być niesamowicie onieśmielający, a czasem frustrujący. Obiecuję, od marketera do marketera, że ​​jest to o wiele łatwiejsze niż się wydaje. Ponadto umiejętność nawigowania w wiadomościach HTML w wiadomościach e-mail jest niezwykle cenną umiejętnością. W naszej serii Podstawy kodu poczty e-mail nauczymy Cię podstaw HTML poczty e-mail, które musisz znać, aby lepiej opanować kod poczty e-mail.

W naszym ostatnim poście omówiliśmy, w jaki sposób możesz poruszać się po kodzie e-mail , aby na bieżąco aktualizować linki lub wprowadzać szybkie zmiany w kopiowaniu. Ale co z obrazami?

Obrazy są podstawą wielu skutecznych wiadomości e-mail. Jednak przy stale rosnącej złożoności i różnych typach plików, rozmiarach, dostępności i czasie ładowania, które należy wziąć pod uwagę, może to przytłoczyć nawet najbardziej wykwalifikowanego marketera.

W tym artykule omówimy niektóre z najczęstszych sposobów dodawania obrazów do e-maili i omówimy podstawy, aby zapewnić swoim subskrybentom jak najlepsze wrażenia. Jeśli szukasz szczegółowych informacji na temat obrazów, zapoznaj się z tymi przewodnikami:

• Kompletny przewodnik po obrazach tła w wiadomości e-mail
• Przewodnik po animowanych plikach GIF w e-mailu
• Korzystanie z obrazów w wiadomościach e-mail w formacie HTML

Możesz łatwo śledzić tematy poruszane w tym przewodniku, więc śmiało otwórz e-mail w programie Litmus Builder, a my zaczniemy!

Przygotuj swój obraz

Zanim dodasz obraz do wiadomości e-mail, upewnij się, że jest skonfigurowany tak, aby odniósł sukces. Najpierw upewnij się, że obraz, którego używasz, ma odpowiedni typ i rozmiar pliku do poczty e-mail . Duże rozmiary plików spowalniają czas wczytywania, zmniejszając ogólną liczbę konwersji i zaangażowanie, więc upewnij się, że używasz lekkiego obrazu, który wczytuje się szybko.

Wstaw swój obraz

Znajdź w kodzie miejsce, w którym chcesz dodać obraz — jeśli używasz Litmus Buildera, włącz widok siatki, aby kliknąć miejsce, w którym ma się pojawić obraz, a następnie kliknij widok kodu. Po znalezieniu idealnego miejsca użyj tagu <img>, aby dodać obraz, ale zastąp tutaj adres URL bezpośrednim linkiem do obrazu.

Jeśli nie masz pewności, co to jest link bezpośredni, zwróć uwagę na koniec nazwy pliku, który powinien kończyć się typem pliku obrazu, takim jak „.png”, „.jpg” lub „.gif”. Linki do folderów lub HTML nie będą tutaj działać, muszą wskazywać bezpośrednio na obraz, który dodajesz do wiadomości e-mail.

 <img src="img-url.jpg" />

Otóż ​​to! Gdy dodasz tag, Twój obraz pojawi się w okienku podglądu, jeśli jesteś w Litmus Builder.

Ciekawi Cię, gdzie możesz przechowywać swoje obrazy? Większość ESP ma system hostingu plików, w którym możesz przesyłać swoje obrazy i używać tych publicznych adresów URL jako źródła obrazu w wiadomości e-mail, więc najpierw sprawdź ESP. Jeśli Twój ESP nie zapewnia hostingu plików obrazów, rozważ użycie AWS firmy Amazon lub serwera FTP własnej witryny do hostingu obrazów.

Znajdź odpowiednie wymiary

Najlepiej użyć obrazu, który jest dwukrotnie większy niż miejsce, które chcesz wstawić, aby wyglądał świetnie na wszystkich monitorach i nie było pikselizacji ani rozmycia. Dostosuj szerokość i wysokość obrazów, dodając modyfikator do tagu <img> utworzonego w poprzednim kroku. Będzie to wyglądać mniej więcej tak:

 <img src="img-url.jpg" width="400" height="100" />

Dostosuj wartości szerokości i wysokości w zależności od tego, co ma sens dla Twojego e-maila. Możesz bawić się tymi wartościami i zobaczyć, jak wyglądają, wprowadzając zmiany, a następnie klikając w okienku podglądu w Konstruktorze, aby zobaczyć, jak się aktualizują.

Dodaj tekst ALT

Tekst ALT opisuje obraz, dzięki czemu osoby, które mają wyłączone obrazy w swoim kliencie poczty e-mail lub korzystają z czytnika ekranu, mogą łatwo odczytać Twoją wiadomość e-mail. Na przykład, jeśli mamy obraz promocji oferujący 20% zniżki, dodanie tekstu ALT opisującego ofertę informuje czytelnika o ofercie, nawet jeśli z jakiegoś powodu nie widzi obrazów.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Najlepszy tekst ALT jest opisowy, zwięzły i ma taką samą intencję jak Twój obraz. Jeśli przed wysłaniem prześlesz swój e-mail przez Listę kontrolną lakmusa, oznaczymy brakujący tekst ALT, abyś mógł łatwo wejść i zaktualizować go. Teraz nie musisz nawet sprawdzać u programisty!

Zamień obrazy

Zmieniłeś zdanie na temat tego jednego obrazu? Masz dwie opcje:

1. Podobnie jak w przypadku tworzenia nowego obrazu, możesz zastąpić adres URL wskazujący Twój obraz nowym. Pozwoli to zachować wszystkie wymiary, tekst ALT lub cokolwiek innego, co może pomóc w stylizacji obrazu i po prostu zaktualizować samą zawartość obrazu.

Weź bieżący tag obrazu i poszukaj ścieżki do pliku:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Zastąp ścieżkę nową ścieżką obrazu:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. W zależności od tego, gdzie Twój obraz jest hostowany, możesz również przesłać nowy obraz o dokładnie tej samej nazwie do tej samej lokalizacji. W ten sposób nie musisz w ogóle dotykać kodu, aby zaktualizować obraz e-maila.

E-mail idealny do zdjęć

Teraz, gdy możesz aktualizować i modyfikować obrazy, mądrze korzystaj z tej mocy! Obrazy w wiadomościach e-mail mogą szybko ulec uszkodzeniu. Ciężkie pliki, których wczytywanie zajmuje wieki, używanie obrazów w całej poczcie e-mail lub rezygnacja z ułatwień dostępu w celu projektowania, mogą powodować bałaganiarskie wrażenia subskrybentów.

Oto kilka szybkich sprawdzonych metod, o których należy pamiętać podczas tworzenia biblioteki obrazów:

• Dbaj o to, aby pliki były lekkie i przyjemne , najlepiej poniżej 1 MB, a im mniejszy, tym lepiej (Litmus Checklist sprawdza czas ładowania, więc nie martw się, jeśli nie znasz każdego rozmiaru obrazu).
• Dodaj tekst alternatywny, aby wiadomość e-mail była czytelna i dostępna, nawet jeśli obrazy nie są widoczne.
• Nie wysyłaj e-maili zawierających tylko obrazy i upewnij się, że Twój e-mail zawiera tekst na żywo. Zaprojektowanie całej wiadomości e-mail przy użyciu obrazu może być kuszące, ale może to zaszkodzić zaangażowaniu i konwersji z długimi czasami ładowania i słabymi doświadczeniami dla osób, które mają wyłączone obrazy.

Potrzebujesz pomocy w odpowiedzi na konkretne pytanie dotyczące kodu dla początkujących? Daj nam znać, co chciałbyś zobaczyć w tej serii. Żadne pytanie nie jest zbyt proste!

_________________________________

Dowiedz się więcej o obrazach w wiadomościach e-mail:

• Dlaczego nie należy wysyłać wiadomości e-mail zawierających tylko obrazy
• Przewodnik po animowanych plikach GIF w e-mailu  
• Zrozumienie obrazów siatkówki w wiadomościach e-mail w formacie HTML
• PNG, GIF czy JPEG? Jaki jest najlepszy format obrazu do wiadomości e-mail?  
• Animowane pliki GIF w wiadomości e-mail: 10 wskazówek, jak utrzymać małe rozmiary plików  
• Kompletny przewodnik po obrazach tła w wiadomości e-mail
• Animowane pliki PNG w wiadomości e-mail: alternatywa dla GIF-ów?