Envato Elements - pobieraj co chcesz, ile chcesz

Dawno, dawno temu… W każdym razie na stronach internetowych panoszyły się przeróżne animowane GIFy – a to jakieś koła zębate symbolizujące pracującą maszynerię „pod strona”, a to jakieś kolorowe napisy, czy też rożnej maści GIFy „strona w trakcie tworzenia”. Na szczęście te czasy są już dawno za nami, ale „dzięki” mediom społecznościowym i komunikatorom internetowym GIFy powróciły, choć już trochę w innym stylu…

Photoshop Video2GIF: test kompresji

Obecnie animowane GIFy to głównie krótkie sekwencje wyciągnięte z filmów, seriali, programów telewizyjnych czy też reklam, które mają oddać jakieś emocje, przedstawić jakieś zdarzenie, czy też (dowcipnie) skomentować jakiś temat lub wydarzenie. Z tego też powodu rozmiar tak przygotowanych GIFów zazwyczaj jest trochę większy, niż choćby animacja wspomnianych już wcześniej kół zębatych.

I tym sposobem dochodzimy do kwestii dość istotnej, a często pomijanej – rozmiaru i jakości animowanego GIFa. Dlatego postanowiłem przygotować małe zestawienie, by pokazać jak wybór parametrów zapisu GIFa może mieć wpływ na jego rozmiar, jak i jakość prezentowanego materiału.

Założenia testu, czyli co i po co

Wprawdzie nie jestem miłośnikiem zdjęć, filmików czy też GIFów z kotami, to na potrzeby tego testu postanowiłem wykorzystać filmik przedstawiający właśnie koty, a do tego w połączeniu z jakby już zapomnianą (ale wciąż smaczną i zdrową) gwiazdą pewnych wydarzeń, czyli bananem.

Film zaimportowałem do programu Photoshop (klatki wideo na warstwy), a następnie wybrałem trzy sekundowy fragment, który po lekkiej modyfikacji (wydłużenia czasu wyświetlania pojedynczej klatki z 0,04 do 0,1 sekundy) następnie zapisałem jako animowane GIFy – z różnymi parametrami. Dla porównania najlepszej jakości GIFa w zestawieniu postanowiłem poddać automatycznej kompresji w serwisie Comressor.io – by GIFy nie były zbyt duże do umieszczenia na stronie zostały przeskalowane z Full HD do rozmiaru 720×405 pikseli (natomiast w filmie – który również znajdziecie we wpisie – zostały wykorzystane GIFy w pełnej rozdzielczości, tj. 1920×1080 px).

Co i jak, czyli test w praktyce

Poniżej znajdziecie kilka przykładowych GIFów, wraz z przypisanym zrzutem z ustawień Photoshopa, a na samym końcu dodatkowo zbiorcze zestawienie porównawcze, oraz filmik przedstawiający ten sam proces, choć już w pełnym HD.

256 kolorów, roztrząsanie – szum, rozmiar GIFa to 985 KB:

256 kolorów, bez roztrząsania, rozmiar GIFa to 775 KB:

Kompresja w serwisie Compressor.io (plik wejściowy: 256 kolorów, roztrząsanie – szum), rozmiar GIFa to 553 KB:

128 kolorów, roztrząsanie – szum, rozmiar GIFa to 787 KB:

128 kolorów, bez roztrząsania, rozmiar GIFa to 611 KB:

64 kolory, roztrząsanie – szum, rozmiar GIFa to 554 KB:

64 kolory, bez roztrząsania, rozmiar GIFa to 415 KB:

Zbiorcze zestawienie (na górze z roztrząsaniem, na dole bez):

By dodatkowo zobrazować wpływ parametrów na efekt finalny przygotowałem również film (GIFy zostały wykorzystane w rozdzielczości Full HD, czyli 1920×1080 px):

 

Podsumowanie, czyli jakość kontra rozmiar

Oczywiście zarówno materiał źródłowy, jak i same ustawienia generowanych GIFów zostały dobrane celowo, by pokazać zarówno stopniowy spadek jakości animacji, jak związaną z tym redukcję rozmiaru pliku – od 985 KB w przypadku najlepszej, prawie filmowej jakości, po 415 KB w przypadku GIFa który wprawdzie odbiegał już od oryginału, to nadal pozostał czytelny, i wielu przypadkach nic nie stałoby na przeszkodzie by go wykorzystać, a być może nawet jeszcze trochę przykręcić śrubę by jeszcze bardziej zredukować rozmiar.

Całkiem dobrą redukcję udało się osiągnąć poprzez dodatkową kompresję (stratną) w serwisie Compressor.io, ale taki sam efekt możemy osiągnąć bezpośrednio w programie w którym tworzymy GIFa, przy zachowaniu większej kontroli nad finalnym efektem. W moim przypadku Adobe Photoshop – wystarczy tylko odpowiednio „pobawić się” ustawieniami dotyczącymi m.in. liczby i adaptacji kolorów, czy roztrząsania.

Ale w przypadku, gdy macie już gotowego GIFa, i tylko chcecie zredukować jego rozmiar, a przy okazji zależy Wam na szybkości operacji, i niekoniecznie chcecie się bawić w jakąś bardziej skomplikowaną edycje, to tego typu serwisy mogą okazać się bardzo pomocne (sam najczęściej ustawiam wszystkie parametry ręcznie, ale w zakładkach mam zapisanych kilka tego typu serwisów – na wszelki wypadek ;-)).

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Monika ćwiczy przed kongresem ko..., ale zapisała się do Newslettera WebInsider.pl, choć... i tak nic nie widzi
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Roztańczona Karolina skorzystała z promocji dla czytelników WebInsider.pl i zapłaciła 80% mniej za księgowość internetową wFirma