[Win] Jak skonwertować animowane grafiki .gif na .mp4


(Kowpa1990) #1

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ć :wink:

01.jpg

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.

02.png

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ść:

  1. 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.

  1. 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.

03.png

pkt 2.2.

 

2.3. Przejdź do ścieżki zainstalowanego programu  WinFF  np. C:\Program Files (x86)\WinFF i wklej program  ffmpeg.exe.

04.png

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.

05.png

pkt 3.1.

 

  1. Odczytaj wymiary obrazka który chcesz przekonwertować. Kiedy najedziesz kursorem na plik powinna wyświetlić się chmurka z m.in. rozdzielczością.

06.png

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).

07.png

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ść.

08.png

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.