Pozbądź się ociężałych plików gif na własnej stronie www.
Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa-Na tych samych warunkach 4.0 Międzynarodowe.
Pobierz poradnik w formacie .pdf jeśli chcesz wygodnie czytać.
Jeśli prowadzisz własną stronę internetową i chcesz pozbyć się przestarzałych, ciężkich animacji w formacie gif, możesz użyć do tego celu html-owy znacznik <video> i w ten sposób zredukować transfer. Czasem niektóre gify są tak przerośnięte że trzeba długo czekać na ich załadowanie, zwłaszcza, jeśli posiadamy kilka-naście takich grafik na pojedynczej stronie.
Umieszczanie w ten sposób krótkich animacji jest coraz częściej spotykane np. witryna 4chan.org wprowadziła tag <video> z pewnymi restrykcjami:
- maksymalna wielkość pliku nie może przekroczyć 3072KB
- maksymalna długość animacji nie może przekroczyć 120s
- maksymalna rozdzielczość obrazka to 2048x2048px
- animacja nie może mieć dźwięku
Teraz czekamy na spopularyzowanie tagu <video> w polskich portalach!
Duże korzyści (w redukcji wielkości transferu/oczekiwania na załadowanie) przy konwersji .gif -> .webm/.mp4 można dostrzec właśnie wtedy, kiedy animacja gif ma powyżej 0,5MB i wyżej.
Zauważalną różnicą przy odtwarzaniu tego rodzaju plików na stronach www jest to, że można w dowolnej chwili zatrzymać (stop-klatka), przyśpieszać animację oraz wyświetlać na pełnym ekranie. Natomiast gifa można tylko zapisać i… obserwować 
Firefox i inne przeglądarki doskonale odtwarzają format .mp4 na stronach.
Specyfikacja
W tym poradniku opisana jest konwersja .gif - .mp4. W porównaniu z promowanym przez Google’a formatem WEBM i również nadającym się do tego poradnika, kodek H264 jest bardziej dojrzały i technologicznie bardziej zaawansowany. Jest standardem przemysłowym. Wsparcie dla odtwarzania H264 posiadają odtwarzacze DVD/tunery DVB-T, smartfony, telewizory. Wszystkie popularne przeglądarki internetowe również wspierają ten format.
Minusem tego formatu jest fakt, że rozdzielczość pionowa (wysokość) i pozioma (szerokość) klipu musi być podzielna przez 2. W przeciwnym razie np. przy zapisie animacji z nieparzystą liczbą pikseli w pionie w enkoderze x264 wyskoczy błąd.
Rozdzielczość klipu w H264 musi być podzielna przez 2.
W poradniku ten problem rozwiązany został przez obcięcie 1px z lewej/dołu klipu tak aby zachować parzystą liczbę pikseli w pionie/poziomie. Szczegóły w dalszej części.
UWAGA!
Jeśli posiadasz grafiki gif z przeźroczystością (kanałem alpha) nie jest technicznie możliwy zapis do formatu H264. Można to zrobić w inny sposób – jednak odtwarzanie zapisanych w ten sposób klipów będzie możliwe tylko w Google Chrome.
Kolejność:
- Pobierz i zainstaluj WinFF.
1.1. Zapamiętaj folder gdzie zainstalujesz program. Ścieżka będzie nam później potrzebna. W tym przykładzie jest to C:\Program Files (x86)\WinFF.
- Pobierz najnowszy build ffmpeg. Jest kilka wersji, wybierz odpowiednią dla twojego systemu operacyjnego (np. Static 64-bit).
2.1. Wypakuj archiwum 7z.
2.2. Przejź do katalogu bin wypakowanego archiwum i skopiuj plik ffmpeg.exe.
pkt 2.2.
2.3. Przejdź do ścieżki zainstalowanego programu WinFF np. C:\Program Files (x86)\WinFF i wklej program ffmpeg.exe.
pkt 2.3.
2.4. Nadpisz plik.
3. Pobierz szablon do konwersji plików .gif – .mp4.
3.1. Uruchom program WinFF i załaduj przygotowany szablon.
pkt 3.1.
- Odczytaj wymiary obrazka który chcesz przekonwertować. Kiedy najedziesz kursorem na plik powinna wyświetlić się chmurka z m.in. rozdzielczością.
pkt 4.
W tym przypadku wysokość nie jest podzielna przez 2. Trzeba przyciąć obrazek w pionie o 1px.
4.1. W polu " Konwertuj do:" wybierz GIF - MP4 , w polu szablon odpowiednie przycięcie; tutaj: 3. przytnij w pionie (wysokosc).
pkt 4.1.
4.2. Zaznacz opcję Użyj folderu źródłowego (pliki zostaną zapisane w tym samym folderze co gify, z rozszerzeniem .mp4), kliknij Dodaj żeby dodać do listy pliki gif.
4.3. Następnie Konwertuj. O postępie przeróbki informuje czarne okno. Na koniec naciśnij enter żeby wyjść.
pkt 4.3.
Wstawianie tak przerobionych animacji na stronę www
Wystarczy w kodzie strony html w odpowiednim miejscu wkleić znacznik:
video src="plik.mp4" autoplay loop/video
Tak dodany kod będzie imitował zachowanie plików gif, czyli będzie zapętlał animację w nieskończoność, przeglądarka zacznie odtwarzać animację od razu i zostaną usunięte elementy sterujące. Bardziej dokładny przykład:
!DOCTYPE html
html lang="pl"
head
meta charset="utf-8"
title/title
/head
body
video src="plik.mp4" autoplay loop/video
/body
/html
Wykonałem prostą stronę gdzie umieściłem porównanie oryginalnych gifów z animacjami w formacie .mp4. Znajdują się też tam informację o zyskach w transferze (wielkości plików). Otwórz plik mp4.htm.