Zasięg

Grow

Manage

Automate

Zasięg

Grow

Manage

Automate

Znaczenie rozmiaru pliku e-mail

Email

1 min read

Znaczenie rozmiaru pliku e-mail

Email

1 min read

Znaczenie rozmiaru pliku e-mail

Gdy mówimy o rozmiarach plików w poczcie e-mail, naprawdę mówimy o 3 tematach: rozmiarze wysyłanego pliku HTML, rozmiarze zewnętrznych zasobów oraz pełnym załadowanym rozmiarze. Chcemy, aby wszystkie te rozmiary plików były jak najmniejsze, ale jakie są maksymalne rozmiary i do czego powinniśmy dążyć?

HTML Rozmiar Pliku

Rozmiar pliku HTML to rozmiar pliku .html, który jest faktycznie wysyłany. Rozmiar pliku nie obejmuje rozmiaru załączonych obrazów, ponieważ są one linkowane z tego pliku html i pobierane po otwarciu.

Maksymalny rozmiar, jaki zalecamy, to 100KB, ponieważ wszystko powyżej może prowadzić do problemów z dostarczaniem i wyświetlaniem. Na przykład Gmail przytnie Twój html przy 102KB. Przycięcie ukryje koniec twojego e-maila i może zepsuć twoje układ.

Większość e-maili powinna łatwo mieścić się poniżej 50KB. Jednak czasami skomplikowane progresywne ulepszenia lub duża ilość treści kampanii skutkują większym rozmiarem pliku. Jeśli tak się stanie, istnieje wiele sposobów na zmniejszenie rozmiaru pliku HTML.

  • Wyczyść swój kod. E-mail ciągle się zmienia i widzimy wiele szablonów z przestarzałym kodem. Szybkie posprzątanie może zaoszczędzić kilka KB.

  • Nie przesadzaj z kodowaniem. Niektóre szablony, które widzimy, zawierają dodatkowy kod, który po prostu nie jest potrzebny. Najgorszym przypadkiem jest dodawanie dodatkowych elementów tabeli. Większość układów można osiągnąć za pomocą 5-10 tabel, ale często widzimy kod z 30-40 tabelami. Mniejsza liczba tabel ma również tę zaletę, że ułatwia czytanie kodu.

  • Przenieś część kodu z HTML do CSS. Jeszcze nie jest bezpiecznie przenieść wszystkie style do CSS, ale jeśli zrobione poprawnie, przeniesienie niektórych stylów inline do stylów osadzonych może pomóc zmniejszyć kod.

  • Uprość swój projekt. Inna opcja to powrót do etapu projektowania. E-maile jednokolumnowe używają znacznie mniej kodu.

  • Zminimalizuj swój kod. Minimalizacja kodu usunie niepotrzebne spacje i komentarze. Może to mieć duży wpływ, ale bądź ostrożny, ponieważ wiele ESP wymusza maksymalną długość linii, co może wymusić nową linię i zepsuć kod.

Rozmiar zewnętrznych zasobów

Zewnętrzny rozmiar zasobu to rozmiar wszystkich twoich obrazów i zewnętrznych arkuszy stylów. Ponieważ zewnętrzne rozmiary są rzadkie, skupimy się teraz bardziej na obrazach.

Jeśli używasz obrazów tła i kwerend mediów, to w niektórych środowiskach możliwe jest, że nie wszystko zostanie pobrane dla każdego użytkownika. Ale pamiętaj, że nawet jeśli zdefiniujesz display:none; na elemencie <img>, to i tak zostanie pobrany. Obecnie nie ma sposobu, aby to zatrzymać.

Maksymalny rozmiar większości obrazów to 100KB, ale jeśli masz jeden duży obraz wysokiej rozdzielczości lub animowany gif, może on sięgnąć do 500KB. Jednak chodzi bardziej o całkowity rozmiar, co omówimy w sekcji dotyczącej pełnego załadowania rozmiaru e-maila.

Istnieje mnóstwo zasobów, które pomogą w kompresji rozmiarów obrazów:

  • ImageOptim – na Macu lub jako usługa internetowa

  • Caesium – na Windows

  • CDN – Wiele CDN-ów ma wbudowaną optymalizację obrazów. Niektóre nawet dopasowują kompresję w zależności od dostępnej przepustowości.

Oto kilka innych wskazówek, które polecamy:

  • Upewnij się, że używasz najbardziej odpowiedniego formatu, .jpg dla zdjęć, .gif dla grafiki i .png, gdy potrzebujesz kanałów alfa

  • Uprość swój projekt. Wróć ponownie do etapu projektowania, aby użyć mniejszej liczby obrazów, mniejszych obrazów lub prostszych obrazów, które można skompresować do mniejszych rozmiarów.

Zewnętrzny rozmiar zasobu to rozmiar wszystkich twoich obrazów i zewnętrznych arkuszy stylów. Ponieważ zewnętrzne rozmiary są rzadkie, skupimy się teraz bardziej na obrazach.

Jeśli używasz obrazów tła i kwerend mediów, to w niektórych środowiskach możliwe jest, że nie wszystko zostanie pobrane dla każdego użytkownika. Ale pamiętaj, że nawet jeśli zdefiniujesz display:none; na elemencie <img>, to i tak zostanie pobrany. Obecnie nie ma sposobu, aby to zatrzymać.

Maksymalny rozmiar większości obrazów to 100KB, ale jeśli masz jeden duży obraz wysokiej rozdzielczości lub animowany gif, może on sięgnąć do 500KB. Jednak chodzi bardziej o całkowity rozmiar, co omówimy w sekcji dotyczącej pełnego załadowania rozmiaru e-maila.

Istnieje mnóstwo zasobów, które pomogą w kompresji rozmiarów obrazów:

  • ImageOptim – na Macu lub jako usługa internetowa

  • Caesium – na Windows

  • CDN – Wiele CDN-ów ma wbudowaną optymalizację obrazów. Niektóre nawet dopasowują kompresję w zależności od dostępnej przepustowości.

Oto kilka innych wskazówek, które polecamy:

  • Upewnij się, że używasz najbardziej odpowiedniego formatu, .jpg dla zdjęć, .gif dla grafiki i .png, gdy potrzebujesz kanałów alfa

  • Uprość swój projekt. Wróć ponownie do etapu projektowania, aby użyć mniejszej liczby obrazów, mniejszych obrazów lub prostszych obrazów, które można skompresować do mniejszych rozmiarów.

Zewnętrzny rozmiar zasobu to rozmiar wszystkich twoich obrazów i zewnętrznych arkuszy stylów. Ponieważ zewnętrzne rozmiary są rzadkie, skupimy się teraz bardziej na obrazach.

Jeśli używasz obrazów tła i kwerend mediów, to w niektórych środowiskach możliwe jest, że nie wszystko zostanie pobrane dla każdego użytkownika. Ale pamiętaj, że nawet jeśli zdefiniujesz display:none; na elemencie <img>, to i tak zostanie pobrany. Obecnie nie ma sposobu, aby to zatrzymać.

Maksymalny rozmiar większości obrazów to 100KB, ale jeśli masz jeden duży obraz wysokiej rozdzielczości lub animowany gif, może on sięgnąć do 500KB. Jednak chodzi bardziej o całkowity rozmiar, co omówimy w sekcji dotyczącej pełnego załadowania rozmiaru e-maila.

Istnieje mnóstwo zasobów, które pomogą w kompresji rozmiarów obrazów:

  • ImageOptim – na Macu lub jako usługa internetowa

  • Caesium – na Windows

  • CDN – Wiele CDN-ów ma wbudowaną optymalizację obrazów. Niektóre nawet dopasowują kompresję w zależności od dostępnej przepustowości.

Oto kilka innych wskazówek, które polecamy:

  • Upewnij się, że używasz najbardziej odpowiedniego formatu, .jpg dla zdjęć, .gif dla grafiki i .png, gdy potrzebujesz kanałów alfa

  • Uprość swój projekt. Wróć ponownie do etapu projektowania, aby użyć mniejszej liczby obrazów, mniejszych obrazów lub prostszych obrazów, które można skompresować do mniejszych rozmiarów.

Całkowity Rozmiar Email

To jest łączny rozmiar wszystkiego, gdy email jest otwierany i wszystko jest pobierane. To może się różnić w zależności od środowiska, w jakim email jest otwierany.

Głównym problemem tutaj jest czas ładowania emaila. Prawdopodobnie będziesz testować swoje emaile w biurze z bardzo szybkim połączeniem, ale wielu z twoich odbiorców może używać urządzeń mobilnych z wolnym połączeniem 3G.

Przy dobrym połączeniu, cały rozmiar emaila wynoszący 1mb załadowałby się w ułamku sekundy i wydawałby się natychmiastowy dla użytkownika. Jednak przy połączeniu 3G może to zająć od 2 do 14 sekund, aby załadować cały email. A jeśli twoja docelowa grupa odbiorców prawdopodobnie korzysta z połączenia 2G, ten proces pobierania mógłby zająć kilka minut.

Jest to również potencjalnym problemem dla użytkowników z restrykcyjnymi planami danych, którzy muszą rozważyć każdy MB, który pobierają. To szczególnie ważne w krajach rozwijających się.

Parę rzeczy, które możesz zrobić, aby pomóc:

Po pierwsze, spójrz na wszystkie rekomendacje, o których wspomnieliśmy, dotyczące optymalizacji rozmiaru html i obrazów.
Jeśli masz czas, zawsze dobrze jest eksperymentować z kodem i testować, co jest naprawdę potrzebne, a co możesz pominąć. Eksperymentuj z obrazami i wypróbuj różne sposoby ich kompresji. Upewnij się, że twój email wygląda dobrze i ma sens bez obrazów, tak aby użytkownicy mogli zacząć przeglądać twój email, czekając na obrazy.

Łącząc Wszystko Razem

Przy rozmiarach plików, podobnie jak w przypadku wielu rzeczy, wszystko sprowadza się do kompromisu. Możesz przeprowadzić testy A/B i odkryć, że duże obrazy o wysokiej rozdzielczości sprawdzają się dobrze. Możesz odkryć, że wiele szczegółowych treści sprawdza się dobrze. Możesz odkryć, że złożona interaktywność sprawdza się dobrze. Jednak, gdy połączysz wszystkie trzy elementy w jedną kampanię – możesz zauważyć, że zaczynają one działać gorzej.

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Pinterest
Logo Uber
Square logo
Logo Adobe
Logo Meta
Logo PayPal

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Uber
Square logo
Logo Adobe
Logo Meta

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Uber
Logo Adobe
Logo Meta

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.