Przepływ pracy w kreatorze GIF powinien sprawić, że synchronizacja będzie widoczna

Przydatny kreator GIF to coś więcej niż tylko akceptowanie stosu obrazów. Powinien pokazywać kolejność klatek, ujawniać opóźnienia między klatkami i sprawiać, że końcowe pobieranie będzie oczywiste. Ma to znaczenie, gdy GIF ma wyjaśnić krok produktu, pokazać krótkie podsumowanie przed i po lub dodać lekką animację do dokumentacji.

Na potrzeby tej aktualizacji przetestowałem produkcyjny kreator GIF Batch Printer w przeglądarce z trzema oczyszczonymi ramkami: PNG, JPG i WebP. Test był celowo prosty, więc zachowanie danych wyjściowych było łatwe do sprawdzenia. Strona zaakceptowała wszystkie trzy typy obrazów w jednej kolejności, wyświetliła je jako ponumerowane klatki i wygenerowała podgląd GIF do pobrania po naciśnięciu Create GIF.

Zacznij od ramek, które opowiadają jedną krótką historię

GIF-y działają najlepiej, gdy każda klatka przedstawia tę samą krótką historię. Trzy zrzuty ekranu przedstawiające otwarcie, wybór i pobranie są łatwiejsze do prześledzenia niż dziesięć niepowiązanych ze sobą obrazów. Przed otwarciem narzędzia umieść pliki źródłowe w takiej kolejności, w jakiej chcesz, aby widz je zobaczył, i usuń niemal zduplikowane klatki, które tylko dodają wagi.

• PNG klatek, gdy tekst, krawędzie interfejsu użytkownika lub płaska grafika muszą zachować ostrość.
• JPG ramki do zwykłych zdjęć, gdzie nie jest wymagana przezroczystość.
• WebP klatek, gdy obrazy źródłowe pochodzą już z eksportu zoptymalizowanego pod kątem Internetu.
• Jeśli to możliwe, używaj klatek tego samego rozmiaru, aby animacja nie przeskakiwała między kształtami.
• Wyraźna pierwsza klatka, ponieważ w niektórych miejscach przed rozpoczęciem odtwarzania wyświetlana jest tylko klatka otwierająca.

Co przetestowałem w przeglądarce

Dane wejściowe testu stanowiły łańcuch składający się z trzech klatek o 900 x 600 pikseli. Pierwsza klatka była niebieska PNG, druga klatka była pomarańczowa JPG, a trzecia była zielona WebP. Po przesłaniu narzędzie produkcyjne wyświetliło komunikat Selected Files: 3, ponumerowało każdą miniaturę od 1 do 3 i pozostawiło widoczne obok kolejki elementy sterujące Dodaj więcej i Wyczyść.

Domyślne opóźnienie pokazane w przebiegu to 500ms, które interfejs użytkownika określa jako 2.0 fps. Przy tym opóźnieniu efekt końcowy przypominał raczej zamierzoną sekwencję slajdów niż szybką animację. W przypadku mikrodemonstracji interfejsu użytkownika przetestowałbym krótsze opóźnienie, ale w przypadku obrazu produktu lub procesu przed i po 500ms daje widzom czas na zrozumienie każdej klatki.

Od kolejki klatek do wygenerowanego GIF-u

Po kliknięciu Create GIF wynik pojawił się poniżej panelu opcji z komunikatem o powodzeniu, animowanym podglądem i przyciskiem __CHROŃ_17__. Pobrany plik z tego małego, płaskiego testu to 45,901 bytes. Tej liczby nie należy traktować jako obietnicy dla każdego GIF-a: ramki zawierające dużo zdjęć, większe wymiary i dłuższe łańcuchy klatek spowodują, że pliki do pobrania będą cięższe.

Ważne szczegóły przed i po były widoczne na samej stronie. Przed utworzeniem narzędzie pokazywało jedynie uporządkowane ramki źródłowe i ustawienia. Po utworzeniu pokazał wyrenderowany podgląd. Dało mi to szansę sprawdzenia tempa przed użyciem pliku w innym miejscu.

Kompromisy dotyczące czasu, jakości i rozmiaru pliku

• Opóźnienie kontroluje postrzeganą prędkość. Dłuższe opóźnienie sprawia, że ​​każda nieruchoma klatka jest czytelna; krótsze opóźnienie może wydawać się płynniejsze, ale może być trudniejsze do naśladowania.
• Jakość wpływa na wagę. Highwyższa jakość wizualna jest przydatna w przypadku tekstu interfejsu użytkownika i krawędzi produktu, natomiast niższa jakość może być akceptowalna w przypadku trudnych reakcji na czacie.
• Wymiary mają znaczenie przed kodowaniem. Zmniejszanie klatek źródłowych przed utworzeniem pliku GIF zwykle zmniejsza wagę pliku w bardziej przewidywalny sposób niż samo przesuwanie suwaka jakości.
• Liczba klatek to najłatwiejsza dźwignia wagi. Jeśli dwie klatki pokazują prawie to samo, usuń jedną i obejrzyj ponownie.
• Ograniczenia kolorów GIF mogą powodować powstawanie pasm gradientów, dlatego płaska grafika i proste zdjęcia produktów często wyglądają czyściej niż subtelne gradienty zdjęć.

Gdzie GIFy się psują

GIF nie zastępuje wideo, gdy potrzebujesz dźwięku, długiego czasu trwania, płynnego ruchu lub ostrych szczegółów fotograficznych. Lepiej jest w przypadku krótkich pętli, w których widz może zrozumieć akcję w kilku klatkach. Jeśli materiałem źródłowym jest szczegółowe nagranie ekranu, wyeksportuj wybrane klatki, zamiast próbować zamieniać każdą chwilę w GIF.

Sprawdź także, gdzie GIF będzie używany. Niektóre programy poczty e-mail, narzędzia czatu i przeglądarki dokumentów obsługują animację w inny sposób. Bezpiecznym nawykiem jest jednorazowe otwarcie pobranego pliku, sprawdzenie, czy pierwsza klatka ma sens i przetestowanie go w miejscu docelowym przed zastąpieniem statycznego obrazu.

Często zadawane pytania dotyczące Kreatora GIF

Czy mogę mieszać formaty obrazów w jednym GIF-ie? Podczas testu przeglądarka zaakceptowała razem pliki PNG, JPG i WebP i wyświetliła je jako jedną uporządkowaną kolejkę ramek.

Czy Create GIF pobiera się automatycznie? W tym uruchomieniu produkcyjnym po raz pierwszy pojawił się panel sukcesu z podglądem i przyciskiem Download, co było przydatne, ponieważ mogłem sprawdzić animację przed jej zapisaniem.

Co powinienem sprawdzić po pobraniu? Otwórz plik GIF, obejrzyj pierwszą pętlę i potwierdź kolejność klatek, tempo i jakość obrazu. Jeśli wydaje Ci się, że jest za ciężki lub za wolny, zmniejsz wymiary, usuń klatki lub zmień opóźnienie.