Animowane pliki PNG w wiadomości e-mail: alternatywa dla GIF-ów?

Animowane obrazy to jeden z najważniejszych trendów w projektowaniu wiadomości e-mail w 2019 roku . Marketingowcy e-mailowi ​​na całym świecie chcą dodać ruchu swoim kampaniom — a najpopularniejszym sposobem na to jest wykorzystanie mocy animowanych GIF-ów.

Ale animowane pliki GIF nie są jedynym typem pliku, który pozwala dodać ruch do zdjęć. Animowana przenośna grafika sieciowa - lub APNG - to również opcja, którą możesz chcieć odkryć.

Powody, dla których warto używać APNG w wiadomościach e-mail

Animowany PNG jest dokładnie tym, co sugeruje nazwa: zbiór PNG, które są połączone, aby wprowadzić ruch. Aby zrozumieć, co sprawia, że ​​APNG jest wyjątkowy, kluczowe jest zrozumienie cech prostego PNG.

Istnieją dwa rodzaje formatów PNG: PNG-8 i PNG-24. Format PNG-8 jest podobny do GIF-ów, ponieważ są zapisywane z maksymalnie 256 kolorami. Format PNG-24 jest w stanie wyświetlić miliony kolorów. Tak więc w porównaniu z ograniczonymi kolorami GIF-ów, które często nadają animacjom wygląd niskiej jakości, APNG pozwalają korzystać z pełnego zakresu głębi kolorów . Dzięki temu Twoje zdjęcia będą bardziej wyraziste — zwłaszcza w przypadku fotografii z szeroką gamą kolorów — ale wyższa jakość zawsze wiąże się z kosztami. Jeśli nie będziesz uważnie obserwować rozmiarów plików, pliki PNG mogą stać się dość duże. Jeśli używasz wielu z nich do tworzenia APNG, duże rozmiary plików mogą negatywnie wpłynąć na czas ładowania wiadomości e-mail.

Ponadto, w przeciwieństwie do GIF-ów, APNG umożliwiają pracę z przezroczystością . GIF-y źle radzą sobie z przezroczystością, stosując szorstką białą krawędź wokół elementów, gdy są ustawione na przezroczystym tle:

Pytasz, dlaczego chcesz użyć animacji na przezroczystym tle?

Przejrzystość i animacje w e-mailu: APNG w październikowym biuletynie Litmusa

W tym roku w naszym październikowym biuletynie o tematyce Halloween chcieliśmy dać naszym czytelnikom możliwość „wyłączenia świateł”, zmieniając e-mail z jasnego projektu na ciemny i upiorny. Dodatkowo, dla dodatkowego upiorności, postanowiliśmy dodać trochę animacji, która sprawi, że przerażające oczy będą mrugać w ciemności, a duchy unoszą się i ściekają — ale tylko wtedy, gdy światła są wyłączone.

Aby ukryć animacje w jasnej wersji e-maila, zaprojektowaliśmy je w tym samym kolorze, co tło, na którym zostały umieszczone w jasnej wersji. Kiedy subskrybent „wyłączył światło”, te kolory tła zmieniły się i – niespodzianka – uwidoczniły nasze upiorne animacje!

Aby ta sztuczka zadziałała, animacje musiały żyć na przezroczystym tle – i właśnie dlatego używanie GIF-ów nie było dla nas opcją. Gdybyśmy użyli GIF-a, zobaczylibyście te białe krawędzie wokół naszych ilustracji, które wyglądałyby niechlujnie i odsłoniłyby naszą ukrytą grafikę, gdy światła byłyby włączone. Z drugiej strony animowane pliki PNG doskonale radzą sobie z wyzwaniem przejrzystości.

Rozważaliśmy alternatywną taktykę rozwiązania tego problemu, polegającą na animowaniu arkusza kształtów z plików PNG przy użyciu animacji CSS z klatkami kluczowymi . Ale w kontekście tego projektu ilość CSS zaangażowana w każdą grafikę spowodowałaby, że wiadomość e-mail byłaby zbyt ciężka w kodzie. Co ważniejsze, obsługa klienta poczty e-mail dla animowanych plików PNG w ostatnich latach wyprzedziła obsługę animacji CSS .

Obsługa klienta poczty e-mail dla APNG

Wiele popularnych klientów poczty e-mail oferuje pełne wsparcie dla APNG. Najbardziej kłopotliwymi wyjątkami są Gmail (zarówno klient poczty internetowej, jak i aplikacje mobilne), Outlook.com i Outlook w systemie Windows. Te klienty poczty e-mail pokazują tylko pierwszą klatkę animacji.

Animowane pliki PNG są w pełni obsługiwane w:

• Poczta Apple
• iOS
• Poczta Samsung
• Outlook (MacOS)
• Outlook.com
• Aplikacja Outlook.com
• AOL
• Aplikacja AOL
• Wieśniak
• Aplikacja Yahoo

Tylko pierwsza ramka pokazuje się w:

• Gmail
• Aplikacja Gmail
• Outlook (Windows)

Jak tworzyć animowane pliki PNG do kampanii e-mailowych?

Obecnie nie jest możliwe zapisywanie animacji w formacie APNG z oprogramowania takiego jak Adobe Photoshop lub Adobe Animate, więc do tworzenia animacji potrzebne będą dodatkowe narzędzia. Oto jak stworzyliśmy animowane pliki PNG do naszego biuletynu:

1. Utwórz animację w Adobe CC i zapisz każdą klatkę jako PNG

Używamy Adobe Animate do tworzenia naszych animacji — bez względu na to, czy jest to GIF, czy APNG. Różnica polega jednak na tym, że Adobe Animate nie oferuje natywnej opcji eksportowania pliku APNG. Zamiast tego będziesz musiał wyeksportować każdą klatkę jako pojedynczy plik PNG. Po utworzeniu animacji przejdź do Eksportuj > Eksportuj film i wybierz „Sekwencja PNG” z menu rozwijanego.

Proces w Photoshopie jest bardzo podobny. Przejdź do Plik > Eksportuj > Renderuj wideo . W okienku Renderuj wideo wybierz „Photoshop Image Sequence” z menu rozwijanego i wybierz PNG jako format. Musisz zrobić jeszcze jeden krok, aby upewnić się, że twoje obrazy png są przezroczyste: w polu Opcje renderowania wybierz „Prosto – Niematowane” z rozwijanego menu „Kanał alfa” . Po wybraniu miejsca, w którym chcesz zapisać obrazy, naciśnij przycisk Renderuj .

2. Połącz swoje indywidualne pliki PNG w APNG

Teraz nadszedł czas, aby zebrać Twoje indywidualne pliki obrazów w APNG!

Animator PNG to świetne oprogramowanie, które możesz kupić za niewielką cenę w Apple App Store, jeśli jesteś użytkownikiem systemu operacyjnego. Bezpłatną alternatywą jest animowany kreator PNG ze strony ezgif.com, który oferuje podobną funkcjonalność.

Zdecydowaliśmy się skorzystać z narzędzia online, aby uzupełnić nasze pliki. Tutaj byliśmy w stanie wykluczyć wszelkie klatki, które nie były wymagane w ostatecznym pliku i ustawić czas potrzebny na każdą klatkę.

3. Optymalizacja rozmiaru pliku APNG do użytku w wiadomościach e-mail

Podobnie jak GIF-y, APNG mogą szybko stać się dość ciężkie. Zmniejszenie kolorów i liczby używanych ramek pomoże utrzymać małe rozmiary plików. Standardowa kompresja zlib wydawała się być jedyną opcją, która działała dla naszych plików, a kiedy już kliknęliśmy Make APNG! przycisk, możemy zobaczyć przykład naszej animacji i jej rozmiar pliku przed pobraniem. To świetna okazja do wprowadzenia dalszych zmian — takich jak zmiana szybkości lub usunięcie kilku dodatkowych klatek — przed pobraniem.

Przed przesłaniem naszych plików graficznych do użytku w naszym e-mailu byliśmy w stanie je nieco bardziej skompresować. Po prostu przepuszczaliśmy nasze pliki APNG przez TinyPNG , który zmniejsza rozmiary plików, usuwając metadane i redukując kolory, jednocześnie zachowując przezroczystość i animację. Zrobiło to ogromną różnicę, zmniejszając całkowity rozmiar pliku obrazu z 943kb do 243kb, oszczędzając ponad 74% rozmiaru pliku! Jednak nie każde narzędzie do kompresji PNG zachowa animację, więc upewnij się, że sprawdziłeś swoją pracę po przetworzeniu obrazów.

I to wszystko! Teraz możesz dodać APNG do wiadomości e-mail, tak jak przy każdym innym typie obrazu. Jeśli chcesz zobaczyć nasz pełny biuletyn w akcji, możesz go wyświetlić tutaj lub sprawdzić kod w Litmus Builder .

Jak myślisz o używaniu APNG w wiadomościach e-mail?

Czy kiedykolwiek używałeś animowanych plików PNG w swoich kampaniach e-mailowych? Na jakich narzędziach polegasz, aby je tworzyć — i utrzymywać niski rozmiar pliku? Chętnie poznamy Twoje doświadczenie. Podziel się swoimi odkryciami w komentarzach poniżej.