Jest teraz rok 2019 i musimy podjąć decyzję dotyczącą GIF-ów ( — chodzi o wymowę w języku angielskim, dla nas to nieaktualne — przyp. tłum.). GIF-y zajmują ogromną ilość miejsca (zazwyczaj kilka megabajtów!), co, jeśli jesteś deweloperem webowym, całkowicie kłóci się z twoimi pragnieniami! Jako deweloper webowy chcesz minimalizować rzeczy, które użytkownicy muszą pobrać, aby strona ładowała się szybko. Z tego samego powodu minimalizujesz JavaScript, optymalizujesz PNG, JPEG, a czasami konwertujesz . Ale co zrobić ze starym GIF-em?
Tam, gdzie zmierzamy, GIF-y nie będą potrzebne!
Jeśli twoim celem jest poprawa prędkości ładowania strony, należy pozbyć się GIF-ów! Ale jak wtedy robić animowane obrazki? Odpowiedź — wideo. A w większości przypadków uzyskasz lepszą jakość i oszczędność miejsca o 50-90%! W życiu większość rzeczy ma swoje plusy i minusy. Zastępując GIF-y wideo, rzadko znajdziesz jakiekolwiek minusy.
Niech żyje koniec GIF-ów!
Na szczęście, zastąpienie GIF-ów wideo stało się powszechną praktyką w ostatnich latach, więc wszystkie potrzebne narzędzia są już dostępne. W tym poście nie zamierzam wymyślać koła na nowo, a jedynie nieco poprawić istniejące rozwiązania. Oto w skrócie:
- Weź GIF-a i przekształć go w wideo
- Skoduj wideo za pomocą H.264 lub VP9, tj. skompresuj je i zapakuj w kontener MP4 lub WebM
- Zastąp
<img>animowany GIF nafilm - Włącz automatyczne odtwarzanie bez dźwięku i zapętl, aby uzyskać efekt GIF-a
Jest teraz rok 2019
Jest teraz rok 2019. Postęp idzie naprzód, a my musimy za nim podążać. Do tej pory mieliśmy dwa kodeki, które są szeroko wspierane we wszystkich przeglądarkach i narzędziach do kodowania wideo:
- H.264 — wprowadzony w 2003 roku i najpowszechniej używany dzisiaj
- VP9 — wprowadzony w 2013 roku i osiągający poprawę kompresji o prawie 50% w porównaniu do H.264, chociaż nie wszystko i nie zawsze jest tak różowo
Uwaga: choć standard H.265 — następna wersja H.264 może konkurować z VP9, nie rozważam go ze względu na słabe wsparcie przeglądarek, co zostało pokazane na stronie Koszty licencjonowania są głównym powodem, dla którego H.265 nie stał się tak powszechny jak H.264, oraz powodem, dla którego konsorcjum Alliance of Open Media pracuje nad kodekiem bez opłat – z AV1.
Pamiętaj, że naszym celem jest zmniejszenie ogromnych plików GIF do możliwie najmniejszego rozmiaru, aby przyspieszyć ładowanie. To byłby dziwny 2019 rok, gdybyśmy nie mieli nowego standardu kompresji wideo. Jest i nazywa się AV1. Z AV1 można Cudownie! 🙂
AV1 jest dostępny od 2019 roku!
Na komputerach stacjonarnych
Ostatnio wsparcie dla dekodowania wideo AV1 zostało dodane do wersji desktopowych i Obecnie wsparcie w Firefoxie jest niestabilne i może powodować awarie, ale sytuacja powinna poprawić się wraz z dodaniem już w Firefoxie 67, ( — przyp. tłum.)Szczegóły dotyczące nowej wersji znajdziesz w artykule —
Na smartfonach
Dla smartfonów wsparcie sprzętowe obecnie nie jest dostępne z powodu braku odpowiednich dekoderów. Można zrobić dekodowanie programowe, co jednak zwiększy zużycie baterii. Pierwsze mobilne SOC z wsparciem dla sprzętowego dekodowania AV1 pojawią się w 2020 roku.
I tutaj czytelnicy artykułu myślą: „więc jeśli na telefonach mobilnych wsparcie jest słabe, czemu mielibyśmy używać AV1?”
AV1 to stosunkowo nowy kodek i jesteśmy na początku jego adaptacji. Myślcie o tym artykule jak o etapie „podczas gdy gotujesz, ludzie się dostosowują”. Wsparcie na komputerach stacjonarnych samo w sobie przyspieszy strony dla części użytkowników. Stare kodeki można użyć jako alternatywny scenariusz, gdy urządzenie docelowe nie obsługuje AV1. Z czasem, gdy użytkownicy przejdą na urządzenia z wsparciem dla AV1, wszystko już będzie gotowe. Aby to osiągnąć, musimy stworzyć tag wideo, jak pokazano poniżej, który pozwoli przeglądarkom wybierać preferowany format — AV1 ->> VP9 ->> H.264. A jeśli użytkownik ma naprawdę stare urządzenie lub przeglądarkę, która w ogóle nie obsługuje wideo (co jest mało prawdopodobne przy H264),to po prostu zobaczy GIF.
<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
<source src="media/RollingCredits.av1.mp4" type="video/mp4">
<source src="media/RollingCredits.vp9.webm" type="video/webm">
<source src="media/RollingCredits.x264.mp4" type="video/mp4">
<img src="media/RollingCredits.gif">
</video>Tworzenie AV1
Stworzenie wideo w AV1 nie jest trudne. Użyj poniższych poleceń. Używamy 2 przejść, aby osiągnąć docelową przepływność. Dlatego wykonamy ffmpeg dwa razy. Po raz pierwszy zapiszemy wynik w nieistniejącym pliku. To stworzy dziennik, który będzie potrzebny do drugiego uruchomienia ffmpeg.
# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null &&
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4
# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4Oto szczegółowe opisy parametrów:
-i - Plik wejściowy.
-pix_fmt - Używany format 4:2:0 do wyboru informacji o kolorze w wideo. Istnieje wiele innych możliwych formatów, ale 4:2:0 jest najbardziej kompatybilny.
-c:v - Jaki kodek użyć, w naszym przypadku - AV1.<br />
-b:v – Średni bitrate, który chcemy osiągnąć.
-filter:v scale - Filtr skali ffmpeg jest używany do zmniejszenia rozdzielczości wideo. Ustawiamy X:-1, co mówi ffmpeg, aby zmniejszył szerokość do X, zachowując proporcje.
-strict experimental - Należy to określić, ponieważ AV1 jest dość nowym kodekiem.
-cpu-used - Źle nazwany parametr, który tak naprawdę jest używany do wyboru poziomu jakości wideo. Możliwe wartości to 0-4. Im mniejsza wartość, tym lepsza jakość, a co za tym idzie, dłuższy czas kodowania.
-tile-columns - Do użycia z wieloma wątkami. Informuje AV1, aby podzielił wideo na oddzielne kolumny, które mogą być kodowane niezależnie dla lepszego wykorzystania CPU.
-row-mt – To samo, co poprzedni parametr, ale dzieli również na wiersze w kolumnach.
-threads - Liczba wątków.
-pass - Która passa jest obecnie wykonywana.
-f - Używane tylko podczas pierwszego przejścia. Określa format pliku wyjściowego, czyli MP4 w naszym przypadku.
-movflags faststart - Włączamy szybki start wideo, przenosząc część danych na początek pliku. To pozwoli rozpocząć odtwarzanie jeszcze przed pełnym załadowaniem pliku.
Tworzenie GIF-u
Aby stworzyć GIF, użyłem poniższego polecenia. Aby zmniejszyć rozmiar, przeskalowałem GIF do 720px szerokości i 12 fps w porównaniu do oryginalnego wideo 24 fps.
./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gifWyniki testów
Lepiej raz zobaczyć, niż sto razy przeczytać, prawda? Upewnijmy się, że AV1 to odpowiedni wybór dla naszych potrzeb. Wziąłem darmowe wideo Tears Of Steel, dostępne tutaj , a następnie przekonwertowałem je, używając zbliżonej przepływności dla kodeków AV1, VP9, H.264. Wyniki poniżej, więc możesz je porównać samodzielnie.
Uwaga 1: Jeśli poniższy plik się nie ładuje, może nadszedł czas na zaktualizowanie przeglądarki. Poleciłbym przeglądarkę opartą na Chromium, na przykład Chrome, Vivaldi, Brave lub Opera. Oto najnowsze informacje o wsparciu AV1
Uwaga 2: Aby Firefox 66 na Linuxie działał, musisz włączyć flagę media.av1.enabled na wartość true do about:config
Uwaga 3: Zdecydowałem się nie zamieszczać zwykłych GIF-ów poniżej z uwagi na ich dużą wagę i ilość danych, które mogłyby być potrzebne do załadowania tej strony! (Co byłoby ironiczne, skoro ta strona dotyczy redukowania objętości danych na stronie :)). Ale możesz obejrzeć finalne GIF-y tutaj
Uwaga tłumacza: Habr nie pozwala na automatyczne odtwarzanie i powtarzanie pliku, więc można ocenić tylko jakość. Możesz zobaczyć, jak będą wyglądać 'animowane obrazy' na żywo w .
Scena 1 @ 200 Kbps
Jest tu dużo ruchu, co jest szczególnie widoczne przy niskich przepływnościach. Od razu widać, jak słaby jest H.264 przy tej przepływności — od razu widoczne są kwadraty. VP9 nieco poprawia sytuację, ale kwadraty są wciąż widoczne. AV1 wyraźnie wygrywa, oferując wyraźnie lepszy obraz.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Jest tu dużo półprzezroczystych treści CGI. Wyniki już nie różnią się tak bardzo, jak poprzednio, ale ogólnie AV1 wygląda lepiej.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
W tej scenie obniżamy przepływność do 100 Kbps i wyniki to potwierdzają. AV1 utrzymuje przewagę również przy niskich przepływnościach!
H.264
VP9
AV1
Wisienka na torcie
Aby zakończyć artykuł, odczuwając ilość zaoszczędzonego ruchu w porównaniu z GIF-em — łączny rozmiar wszystkich filmów powyżej… 1.62 MB!! Dokładnie. Jakieś przeklęte 1,708,032 bajtów! Dla porównania, oto rozmiar wideo GIF i AV1 dla każdej ze scen
GIF
AV1
Scena 1
11.7 MB
0.33 MB
Scena 2
7.27 MB
0.18 MB
Scena 3
5.62 MB
0.088 MB
Po prostu niesamowicie! Nieprawdaż?
Uwaga: Rozmiary plików VP9 i H264 nie zostały podane, ponieważ praktycznie nie różnią się od AV1 z powodu używania tego samego bitrate'u. Byłoby zbędne dodawanie jeszcze dwóch kolumn z identycznymi rozmiarami, aby podkreślić, że te kodeki oferują znacznie lepszą jakość niż GIF przy znacznie mniejszych rozmiarach plików.
Źródło: habr.com
