Mamy rok 2019 i najwyższy czas zdecydować się na GIF-y ( - tutaj mówimy o wymowie w języku angielskim, dla nas nie ma to znaczenia - ok. tłumaczenie). Pliki GIF zajmują ogromną ilość miejsca (zwykle kilka megabajtów!), Co, jeśli jesteś twórcą stron internetowych, jest całkowicie sprzeczne z Twoimi pragnieniami! Jako twórca stron internetowych chcesz zminimalizować liczbę rzeczy, które użytkownicy muszą pobierać, aby witryna ł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 się wybieramy, nie będziemy potrzebować GIF-ów!
Jeśli Twoim celem jest poprawa szybkości ładowania witryny, musisz pozbyć się GIF-ów! Ale jak w takim razie zrobić animowane obrazy? Odpowiedzią jest wideo. W większości przypadków uzyskasz lepszą jakość i oszczędność miejsca o 50-90%! W życiu większość rzeczy ma swoje zalety i wady. Kiedy zamieniasz GIF na wideo, najczęściej nie będziesz w stanie znaleźć żadnych wad.
Precz ze wszystkimi GIF-ami!
Na szczęście zastępowanie GIF-ów filmami jest w ostatnich latach powszechną praktyką, więc wszystkie niezbędne narzędzia są już w użyciu. W tym poście nie będę wymyślać koła na nowo, a jedynie nieznacznie udoskonalę istniejące rozwiązania. Oto sedno:
- Weź GIF i przekonwertuj go na wideo
- Zakoduj wideo za pomocą H.264 lub VP9, tj. skompresuj go i zapakuj do kontenera MP4 lub WebM
- Zastępować
<img>z włączonym animowanym GIF-em<video>z rolką - Włącz automatyczne odtwarzanie bez dźwięku i zapętlaj efekt GIF
Jest rok 2019
Mamy rok 2019. Postęp postępuje i musimy za nim nadążać. Do tej pory mieliśmy dwie opcje kodeków, które są szeroko obsługiwane we wszystkich przeglądarkach i narzędziach do kodowania wideo:
- H.264 - wprowadzony w 2003 roku i obecnie najczęściej używany
- VP9 - pojawił się w 2013 roku i osiągnął poprawę kompresji o prawie 50% w porównaniu do H.264 nie wszystko nie zawsze jest takie różowe
Uwaga: Choć H.265 jest następną wersją H.264 i jest w stanie konkurować z VP9, to nie rozważam tego ze względu na słabą obsługę przeglądarek, co widać na stronie . Koszty licencji to główny powód, dla którego standard H.265 nie stał się tak powszechny jak H.264 i dlaczego konsorcjum Alliance of Open Media pracuje nad bezpłatnym kodekiem AV1.
Pamiętaj, że naszym celem jest zmniejszenie ogromnych plików GIF do możliwie najmniejszego rozmiaru, aby przyspieszyć czas ładowania. Dziwny byłby rok 2019, gdybyśmy nie mieli w naszym arsenale nowego standardu kompresji wideo. Ale istnieje i nazywa się AV1. Z AV1 możesz . Lepota! 🙂
AV1 jest do Twojej dyspozycji od 2019 roku!
Na komputerach stacjonarnych
Niedawno do wersji na komputery stacjonarne dodano obsługę dekodowania wideo AV1 и . W tej chwili obsługa Firefoksa jest błędna i może powodować awarie, ale sytuacja powinna się poprawić po dodaniu już w Firefoksie 67 ( - około. tłumacz.). Aby uzyskać szczegółowe informacje na temat nowej wersji, przeczytaj -
Na smartfonach
Obecnie nie ma wsparcia sprzętowego dla smartfonów ze względu na brak odpowiednich dekoderów. Możesz wykonać dekodowanie programowe, chociaż będzie to prowadzić do zwiększonego zużycia baterii. Pierwsze mobilne SOC obsługujące dekodowanie sprzętowe AV1 pojawią się w 2020 roku.
A potem czytelnicy artykułu mówią: „więc jeśli telefony komórkowe jeszcze tego nie obsługują, po co używać AV1?”
AV1 to dość nowy kodek i jesteśmy na samym początku jego adaptacji. Potraktuj ten artykuł jako etap „kiedy będziesz gotować, tłum za tobą podąży”. Obsługa komputerów stacjonarnych sama w sobie przyspieszy działanie witryn dla niektórych odbiorców. Stare kodeki mogą być używane jako scenariusz awaryjny, gdy urządzenie docelowe nie obsługuje AV1. Ale gdy użytkownicy przejdą na urządzenia obsługujące AV1, wszystko będzie gotowe. Aby to osiągnąć, musimy utworzyć tag wideo, jak pokazano poniżej, który pozwoli przeglądarce wybrać preferowany format − AV1 - >> VP9 - >> H.264. Cóż, jeśli użytkownik ma bardzo stare urządzenie lub nawigator, który w ogóle nie obsługuje wideo (co jest niezwykle mało prawdopodobne w przypadku H264), wtedy zobaczy po prostu 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>Stworzenie AV1
Tworzenie filmów w AV1 jest łatwe. i użyj poniższych poleceń. Aby osiągnąć docelowy bitrate, wykorzystujemy 2 przebiegi. W tym celu dwukrotnie uruchomimy ffmpeg. Za pierwszym razem zapisujemy wynik do nieistniejącego pliku. Spowoduje to utworzenie dziennika, 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 zestawienie parametrów:
-i - Входной файл.
-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.
-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.
-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.
-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.
-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.
-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.
-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.
-threads - Количество тредов.
-pass - Какой проход сейчас выполняется.
-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.
-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Tworzenie GIF-ów
Aby utworzyć GIF, użyłem poniższego polecenia. Aby zmniejszyć rozmiar, przeskalowałem GIF do szerokości 720 pikseli i 12 kl./s zamiast oryginalnego wideo 24 kl./s.
./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 testu
Lepiej raz zobaczyć, niż przeczytać sto razy, prawda? Upewnijmy się, że AV1 będzie właściwym wyborem dla naszych celów. Wziąłem darmowy film Tears Of Steel dostępny tutaj i przekonwertowałem go przy użyciu w przybliżeniu tej samej przepływności dla kodeków AV1, VP9, H.264. Wyniki znajdują się poniżej, więc możesz je porównać samodzielnie.
Notatka 1: Jeśli poniższy plik nie zostanie załadowany, być może nadszedł czas na aktualizację przeglądarki. Polecam przeglądarkę opartą na Chromium, taką jak Chrome, Vivaldi, Brave lub Opera. Oto najnowsze informacje na temat obsługi AV1
Notatka 2: W przypadku przeglądarki Firefox 66 w systemie Linux konieczne będzie ustawienie flagi media.av1.enabled w znaczenie true в about:config
Notatka 3: Zdecydowałem się nie umieszczać poniżej zwykłych GIF-ów ze względu na ich duży rozmiar i ilość danych wymaganych do załadowania tej strony! (Co byłoby ironią, ponieważ ta strona ma na celu zmniejszenie ilości danych na stronie :)). Ale tutaj możesz zobaczyć końcowe GIF-y
Uwaga tłumacza: Habr nie pozwala na włączenie automatycznego odtwarzania i zapętlenie pliku, więc możesz jedynie ocenić jakość. Możesz zobaczyć na żywo, jak będą wyglądać „animowane obrazy”. .
Scena 1 przy 200 Kb/s
Ruchu jest tu sporo, co jest szczególnie wrażliwe przy niskich przepływnościach. Od razu widać, jak zły jest H.264 przy tej przepływności; kwadraty są natychmiast widoczne. VP9 trochę poprawia sytuację, ale kwadraty są nadal widoczne. AV1 wyraźnie wygrywa, dając wyraźnie lepszy obraz.
H.264
VP9
AV1
Scena 2 przy 200 Kb/s
Jest tu dużo przezroczystej treści CGI. Wyniki nie są tak różne jak ostatnim razem, ale ogólnie AV1 wygląda lepiej.
H.264
VP9
AV1
Scena 3 przy 100 Kb/s
W tej scenie zmniejszamy bitrate do 100 Kbps, a wyniki są spójne. AV1 utrzymuje pozycję lidera nawet przy niskich przepływnościach!
H.264
VP9
AV1
Višenka na ciastach
Aby zakończyć ten artykuł, oceniając ilość zaoszczędzonej przepustowości w porównaniu z GIF-em – całkowity rozmiar wszystkich filmów jest większy… 1.62MB!! Prawidłowy. Jakieś pieprzone 1,708,032 1 XNUMX bajtów! Dla porównania, oto rozmiary wideo GIF i AVXNUMX dla każdej sceny
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 oszałamiające! Czyż nie?
Uwaga: Rozmiary plików VP9 i H264 nie są podane, ponieważ praktycznie nie różnią się one od AV1 ze względu na użycie tej samej przepływności. Dodawanie dwóch kolejnych kolumn o tych samych rozmiarach byłoby zbędne tylko po to, aby podkreślić, że te kodeki zapewniają znacznie lepszą jakość niż GIF przy znacznie mniejszych rozmiarach plików.
Źródło: www.habr.com