Niezbędne wtyczki WordPress do pracy z animowanymi GIF-ami

Kiedyś ograniczone do tandetnych, migających banerów w neonowych kolorach i kreskówek, które przepływały przez wyskakujące okienka i nagłówki e-maili, GIF-y zmieniły się na lepsze. Dzięki tej zmianie zostaną tutaj, szczególnie dla użytkowników i programistów WordPress. Zaprojektowane specjalnie dla sieci, pliki GIF są zazwyczaj niewielkich rozmiarów, dzięki czemu idealnie nadają się do dodania do posta odrobiny ruchu. W rzeczywistości animowane pliki GIF mogą ożywić statyczny artykuł lub temat.

Jednak animowane pliki GIF mają swój udział w problemach i frustracjach. Ponieważ animowane pliki GIF składają się z wielu klatek, mogą szybko zmienić się z małych, dyskretnych plików w jedne z najbardziej nieporęcznych elementów graficznych na serwerze. Pliki GIF znane są z tego, że spowalniają ładowanie stron, na których są używane, co czyni je barierą dla powtarzającego się ruchu i problemem dla webmasterów, którzy rozumieją znaczenie szybkości w czasach niecierpliwości.

Następnie są wszystkie problemy specyficzne dla WordPress. WordPress nie został stworzony z myślą o animowanych GIF-ach, a ich odrodzenie przysporzyło programistom pewnych bólów głowy. Podczas gdy WordPress zazwyczaj automatycznie zmienia rozmiar obrazów, ten proces przerywa animacje, wyświetlając tylko pierwszą klatkę. Ponadto animowane pliki GIF mogą być trudne w użyciu jako polecane obrazy w WordPress. Mogą zakłócać kanały RSS, kampanie e-mailowe, wyświetlanie stron głównych i miniatury.

W większości przypadków korzyści nadal przeważają nad negatywnymi. Jednak, aby GIF-y stały się skuteczną częścią Twoich publikacji WordPress, być może będziesz musiał wypróbować kilka nowych technik. Sprawdź poniżej kilka niezbędnych wtyczek i technik pracy z animowanymi GIF-ami.

Podstawowe: Spraw, aby Twoja witryna WordPress była szybsza

Jednym z głównych problemów związanych z używaniem animowanych plików GIF w WordPress jest problem z czasem ładowania. Utrzymanie czasu ładowania tak szybko, jak to możliwe, jest niezbędne, aby zadowolić odwiedzających i uczynić witrynę tak efektywną, jak to tylko możliwe.

Według KISSmetrics czas ładowania jest głównym czynnikiem przyczyniającym się do porzucenia strony. Przy czasie ładowania wynoszącym zaledwie 4 sekundy, współczynnik porzucania strony skacze do 25% i zbliża się do 50%, gdy czas ten zbliża się do 10 sekund. Dodatkowo 1-sekundowe opóźnienie w odpowiedzi strony może spowodować 7% spadek konwersji.

Oznacza to, że jeśli witryna przynosi 100 000 USD dziennie – witryna handlu elektronicznego lub inny sprzedawca internetowy – opóźnienie strony o 1 sekundę może wynieść 2,5 miliona USD utraconej sprzedaży każdego roku. Ma to również bezpośredni wpływ na zadowolenie klientów. Jednosekundowe opóźnienie zmniejsza zadowolenie klientów o 16%. Twoi klienci chcą, aby Twoja witryna działała bez opóźnień.

Ponieważ GIF-ów można używać do zwiększania zadowolenia użytkowników, staje się to jeszcze bardziej problematyczne. Być może używasz animowanego GIF-a, aby zilustrować działanie produktu, tak jak w przypadku poniższej pułapki na zwierzęta. GIF to po prostu najszybszy i najłatwiejszy sposób wyjaśnienia mechanizmu ustawiania i zwalniania pułapki.

Nawet poza witrynami e-commerce GIF-y mogą służyć do zilustrowania konkretnych punktów, dodania humoru do skądinąd suchego tematu lub zwiększenia poczucia interakcji użytkownika. Mogą być świetnym sposobem na powiązanie nieznanej koncepcji ze znaną, wykorzystując popkulturę jako połączenie. Na przykład blogi WebpageFX dla właścicieli firm, którzy mogą, ale nie muszą, znać terminy takie jak „meta słowa kluczowe" i „upychanie słów kluczowych”. Te praktyki są przestarzałe i całkowicie nieskuteczne – ale zamiast to powiedzieć, pokazały, jak (nie)skuteczne byłoby to z animowanym GIF-em.

Oczywiście GIF-y świetnie nadają się do zwiększania zrozumienia lub po prostu wywoływania uśmiechu na twarzy czytelnika – ale to stwarza bezpośredni dylemat. Pomimo ich nieodłącznych zalet, pliki te mogą być dość duże, a wolne czasy ładowania mogą z czasem prowadzić do utraty zysków i zmniejszenia natężenia ruchu. Jeśli pliki GIF są ważne dla Ciebie i Twojego bloga, wyeliminowanie problemów prowadzących do opóźnień i powolnego ładowania ma kluczowe znaczenie. Poniższe wtyczki mogą pomóc zmniejszyć rozmiary plików i poprawić jakość ładowania, bez poświęcania animacji ani ich jakości.

WP Smush.it

Szeroko stosowany i dostępny dla programistów na wszystkich poziomach zaawansowania, WP Smush.it zawiera funkcje niezbędne do optymalizacji obrazów w sposób, który skraca czas ładowania i zapewnia satysfakcję użytkowników końcowych. Wtyczka przeznaczona jest do:

• Zoptymalizuj kompresję JPEG
• Konwertuj niektóre statyczne pliki GIF na indeksowane pliki PNG
• Usuń nieużywane kolory z indeksowanych obrazów
• Usuń niepotrzebne metadane z obrazów
• Zwiększ wydajność animowanych plików GIF, usuwając piksele, które pozostają takie same w różnych klatkach

W przeciwieństwie do niektórych innych wtyczek do kompresji obrazu, które psują animowane pliki GIF w taki sam sposób, jak robi to sam WordPress, WP Smush.it zawiera techniki optymalizacji animowanych plików GIF.

Obrazy dodawane do stron przez użytkowników zaplecza i administratorów są automatycznie uruchamiane przez wtyczkę po przesłaniu. Oznacza to, że nie musisz w ogóle zmieniać swojego procesu, aby uzyskać lepsze wrażenia użytkownika. Nie ma nic lepszego niż to! Użytkownicy zaniepokojeni tym, jak istniejące obrazy wpływają na czas ładowania, mogą również użyć wtyczki do skanowania istniejącej zawartości. WP Smush.it jest prosty w instalacji i obsłudze.

Dowolna wtyczka Lazy Loading

Inną opcją optymalizacji czasu ładowania przy jednoczesnym dołączeniu plików GIF jest użycie wtyczki ładowania z opóźnieniem. Te wtyczki zostały zaprojektowane z myślą o użytkownikach. Zamiast czekać na załadowanie całej strony – co spowalnia czas i prowadzi do frustracji – leniwe ładowanie wtyczek ładuje tylko zawartość, która jest aktualnie widoczna na ekranie odwiedzającego. Leniwe ładowanie przyspiesza witryny z dużą ilością obrazów i może być skutecznym sposobem na zadowolenie odwiedzających.

Istnieje wiele bezpłatnych opcji, które upraszczają leniwe ładowanie. Obejmują one – ale nie ograniczają się do:

• Lazy Load – Lazy Load używa jQUery.sonar do ładowania tylko widocznych obrazów. Został napisany przez zespół WordPress VIP i otrzymuje niezmiennie wysokie rankingi od użytkowników.
• Image Lazy Load – Zaprojektowany jako lekka wersja oryginalnego Lazy Load, Image Lazy Load (Unveil.js) zapewnia obsługę obrazów o wysokiej rozdzielczości na urządzeniach z wyświetlaczami Retina.
• BJ Lazy Load – BJ Lazy Load zastępuje osadzone obrazy postów symbolami zastępczymi i ładuje treść tuż przed tym, zanim stanie się ona widoczna dla użytkowników końcowych podczas przewijania.
• Rocket Lazy Load – Rocket Lazy Load został zaprojektowany jako mały (mniej niż 2 KB) skrypt, który wyświetla wszystkie obrazy strony – widżety, elementy osadzone, miniatury, awatary i inne elementy podczas przewijania. Jest najbardziej znany ze swoich niewielkich rozmiarów.

Średnio zaawansowany: zainstaluj kilka wygodnych wtyczek do animacji

Po opanowaniu czasów ładowania i szybkości nadszedł czas, aby przejść do czegoś bardziej zaawansowanego, ale nadal wykonalnego dla większości ogólnych użytkowników WordPress. Te wtyczki do animacji sprawiają, że istniejące pliki GIF są bardziej przyjazne dla użytkownika i jeszcze bardziej widocznie atrakcyjne. Wymienione poniżej wygodne wtyczki do animacji zwiększają możliwości WordPressa w zakresie wyświetlania GIF-ów.

Zmiana rozmiaru animowanego GIF-a

Animated GIF Resize naprawia funkcję automatycznej zmiany rozmiaru WordPressa, dzięki czemu można zmieniać rozmiar animowanych GIF-ów bez przerywania animacji. Eliminuje to często spotykany problem WordPressa z wyświetlaniem pierwszej klatki animowanego GIF-a bez niczego innego.

Giphypress

Każdy, kto często pracował z animowanymi GIF-ami, jest prawdopodobnie zaznajomiony z Giphy, animowanym archiwum GIF, które pozwala użytkownikom wyszukiwać według tagów i znajdować GIF-y związane z niemal każdym tematem. Giphypress ułatwia osadzanie plików Giphy w Twojej witrynie — wystarczy użyć przycisku dodanego przez wtyczkę, aby wyszukać idealny obraz i kliknąć „Umieść w poście”.

Podgląd animacji GIF

GIF Animation Preview wyszukuje i znajduje dowolne miejsce, w którym użyłeś animowanego GIF-a w swojej witrynie WordPress i zastępuje je obrazami podglądu. Niezależnie od tego, skąd pochodzi plik GIF (zarówno źródła obrazu na miejscu, jak i poza nim działają), wtyczka wykorzystuje pierwszą klatkę animacji do wygenerowania podglądu. Następnie odwiedzający witrynę mają możliwość kliknięcia odtwarzania, aby zobaczyć pozostałą część animacji lub przejść dalej bez oglądania animacji.

To świetny sposób na skrócenie czasu ładowania stron w Twojej witrynie, zwłaszcza jeśli zdecydowałeś się nie używać wtyczki ładowania z opóźnieniem – zamiast konieczności ładowania każdej klatki każdego animowanego GIF-a na stronie, odwiedzający muszą tylko załadować pierwsza ramka. Tego rodzaju funkcjonalność jest używana przez duże strony internetowe, takie jak BuzzFeed, zwłaszcza dla użytkowników mobilnych, którzy mają więcej powodów, by wybierać dane, które chcą pobrać.

Zaawansowane: rób fajniejsze rzeczy dzięki animowanym GIF-om

Te wtyczki i techniki są nieco trudniejsze do skonfigurowania, ale są dość wydajne. Czytaj dalej, aby dowiedzieć się, jak ustawić GIF jako polecany obraz (coś, co coraz częściej widzimy na stronach takich jak BuzzFeed, Mashable i TechCrunch) oraz jak zamienić serię oddzielnych plików graficznych w animowaną sekwencję bezpośrednio w Twojej witrynie.

Ustawianie animowanego GIF-a jako wyróżnionego obrazu

W większości projektanci stron internetowych i programiści byli ograniczeni – zwłaszcza w WordPress – podczas próby ustawienia animowanego GIF-a jako wyróżnionego obrazu. Ponieważ WordPress automatycznie tworzy obraz miniatury z dostarczonego przez Ciebie polecanego obrazu, łamiąc animowane pliki GIF, może to być naprawdę trudne do wykonania. Nie oznacza to jednak, że jest to niemożliwe.

Jednym ze sposobów obejścia napadu jest wstawienie adresu URL obrazu do pola polecanego obrazu, zamiast pobierania i przesyłania grafiki z komputera lub gdzieś w sieci. To jest trafienie lub chybienie.

Inną opcją – być może mniej niż idealną, ale wciąż wykonalną dla osób dobrze zorientowanych w programowaniu WordPress – jest zmiana formatu wyróżnionego obrazu z „wyróżnionego” na „pełny” w pliku indeksu motywu. Dzięki temu polecany obraz może pobierać oryginalne, niezniekształcone animowane gify. Wymaga to chęci do trochę kodowania i ma tę wadę, że dotyczy wszystkich polecanych obrazów – więc musisz zacząć ręcznie dopasowywać je do odpowiedniej szerokości i wysokości.

To nie musi być skomplikowane. W rzeczywistości istnieją również wtyczki ułatwiające ten proces. Autoset Featured Image i Automatic Featured Image Posts to dwie wtyczki (wybierz jedną), które automatycznie ustawiają pierwszy obraz – niezależnie od jego formatu – jako obraz polecany. Oznacza to, że jeśli Twoim pierwszym obrazem wyświetlanym w poście jest animowany GIF, stanie się on wyróżnionym obrazem. Jednak to obejście wiąże się z innymi wadami – a mianowicie, że zawsze będziesz musiał być wybredny, jeśli chodzi o obraz, który umieszczasz najwyżej w swoich postach!

Automatyczne obrazy animowane

Wtyczka Auto Animate Image umożliwia użytkownikom osadzanie animacji utworzonych z serii oddzielnych plików zamiast standardowego animowanego pliku GIF. Można go użyć do obejścia maksymalnej liczby 256 kolorów animowanych GIF-ów, co pozwala uzyskać bardziej naturalne, płynne wrażenie. Z drugiej strony łatwo jest stworzyć coś, co ogromnie spowalnia Twoją witrynę, więc korzystanie z tej wtyczki wymaga trochę finezji.

Wtyczka nie tylko wyświetla wiele obrazów – inaczej nieruchomych obrazów – w sposób ciągły, jak animacja, ale także obsługuje dowolne nazwy plików, nie jest wymagany żaden standard. Oznacza to, że GIF, PNG, JPEG, JPEG XR – i inne opcje HD Photo – BMP, TIFF, WebP i SVG mogą być używane zamiennie, aby stworzyć coś nowego i całkowicie oryginalnego. Animacje utworzone za pomocą Auto Animate Image można ustawić na opóźnienie, powtarzanie, przewijanie do tyłu, pauzę, a nawet puste, co prowadzi do większej liczby opcji niż standardowy GIF. Eliminuje potrzebę pisania JavaScript, ale w razie potrzeby można nim sterować. Wtyczka obsługuje większość przeglądarek, więc nie musisz się martwić różnymi doświadczeniami użytkowników końcowych.

Wszystko po to, aby Twoi goście byli zadowoleni

GIFy wróciły. Wielu twierdziłoby, że zmartwychwstali. Jednak zamiast starych, tandetnych animacji, którymi były, są teraz integralnymi aspektami czystych, solidnych i efektywnych projektów internetowych. Jednak podczas pracy w WordPress mogą być więcej niż trochę problematyczne.

Zacznij od początku – od poziomu podstawowego. Poświęć trochę czasu na przejrzenie wtyczek, aby przyspieszyć ładowanie, znajdź to, co Ci odpowiada i sprawdź, jak skraca się czas. Stamtąd pracuj nad bardziej zaawansowanymi wtyczkami do animacji. Następnie bądź kreatywny. Wyrwij się z „standardowej” rutyny animowanych GIF-ów, tworząc własne animacje ze statycznych obrazów i upewniając się, że animowane GIF-y można ustawić jako polecane obrazy.

Animowany GIF nie musi wywoływać frustracji, negatywnych emocji ani przerażających godzin przed ekranem komputera, starając się, aby Twoje strony ładowały się szybciej lub wyświetlały się prawidłowo. Mają być zabawne, a wtyczki i opcje opisane powyżej utrzymują je w ten sposób.