Είναι 2019 και ήρθε η ώρα να αποφασίσουμε για GIF ( - εδώ μιλάμε για προφορά στα αγγλικά, για εμάς αυτό δεν είναι σχετικό - περίπου. μετάφραση). Τα GIF καταλαμβάνουν τεράστιο χώρο (συνήθως αρκετά megabyte!), κάτι που, αν είσαι προγραμματιστής ιστού, είναι εντελώς αντίθετο με τις επιθυμίες σου! Ως προγραμματιστής ιστού, θέλετε να ελαχιστοποιήσετε τα πράγματα που πρέπει να κατεβάζουν οι χρήστες, ώστε ο ιστότοπος να φορτώνει γρήγορα. Για τον ίδιο λόγο, ελαχιστοποιείτε τη JavaScript, βελτιστοποιείτε τα PNG, JPEG και μερικές φορές μετατρέπετε . Τι να κάνουμε όμως με το παλιό GIF;
Δεν θα χρειαστούμε GIF εκεί που πάμε!
Εάν ο στόχος σας είναι να βελτιώσετε την ταχύτητα φόρτωσης του ιστότοπου, τότε πρέπει να απαλλαγείτε από τα GIF! Αλλά πώς τότε μπορείτε να κάνετε κινούμενες εικόνες; Η απάντηση είναι βίντεο. Και στις περισσότερες περιπτώσεις, θα έχετε καλύτερη ποιότητα και εξοικονόμηση χώρου 50-90%! Στη ζωή, τα περισσότερα πράγματα έχουν τα θετικά και τα αρνητικά τους. Όταν αντικαθιστάτε το GIF με βίντεο, τις περισσότερες φορές δεν θα μπορείτε να βρείτε κανένα μειονέκτημα.
Κάτω όλα τα GIF!
Ευτυχώς, η αντικατάσταση των GIF με βίντεο είναι συνηθισμένη τα τελευταία χρόνια, επομένως όλα τα απαραίτητα εργαλεία χρησιμοποιούνται ήδη. Σε αυτήν την ανάρτηση, δεν θα επανεφεύρω τον τροχό, αλλά θα βελτιώσω ελαφρώς τις υπάρχουσες λύσεις. Ιδού λοιπόν η ουσία:
- Πάρτε ένα GIF και μετατρέψτε το σε βίντεο
- Κωδικοποιήστε το βίντεο χρησιμοποιώντας H.264 ή VP9, δηλ. συμπιέστε το και συσκευάστε το σε κοντέινερ MP4 ή WebM
- Αντικαθιστώ
<img>με κινούμενο GIF ενεργοποιημένο<video>με ρολό - Ενεργοποιήστε την αυτόματη αναπαραγωγή χωρίς ήχο και βρόχο για εφέ GIF
Είναι 2019
Είναι 2019 τώρα. Η πρόοδος προχωρά μπροστά και πρέπει να την ακολουθήσουμε. Μέχρι στιγμής είχαμε δύο επιλογές κωδικοποιητή που υποστηρίζονται ευρέως σε όλα τα προγράμματα περιήγησης και τα εργαλεία κωδικοποίησης βίντεο:
- H.264 - εισήχθη το 2003 και χρησιμοποιείται ευρέως σήμερα
- VP9 - εμφανίστηκε το 2013 και πέτυχε βελτιώσεις συμπίεσης σχεδόν 50% σε σύγκριση με το H.264, αν και δεν είναι όλα δεν είναι πάντα τόσο ρόδινα
Σημείωση: Αν και το H.265 είναι η επόμενη έκδοση του H.264 και είναι ικανό να ανταγωνιστεί το VP9, δεν το θεωρώ λόγω κακής υποστήριξης του προγράμματος περιήγησης, όπως φαίνεται στη σελίδα . Το κόστος αδειοδότησης είναι ο κύριος λόγος για τον οποίο το H.265 δεν έχει γίνει τόσο διαδεδομένο όσο το H.264 και γιατί η κοινοπραξία Alliance of Open Media συνεργάζεται με έναν κωδικοποιητή χωρίς δικαιώματα, τον AV1.
Θυμηθείτε, στόχος μας είναι να συρρικνώσουμε τεράστια GIF στο μικρότερο δυνατό μέγεθος για να επιταχύνουμε τους χρόνους φόρτωσης. Θα ήταν περίεργο το 2019 αν δεν είχαμε ένα νέο πρότυπο για τη συμπίεση βίντεο στο οπλοστάσιό μας. Υπάρχει όμως και λέγεται AV1. Με το AV1 μπορείτε . Λεπότα! 🙂
Το AV1 είναι στη διάθεσή σας από το 2019!
Σε επιτραπέζιους υπολογιστές
Πρόσφατα προστέθηκε υποστήριξη για αποκωδικοποίηση βίντεο AV1 στις εκδόσεις για επιτραπέζιους υπολογιστές и . Αυτήν τη στιγμή, η υποστήριξη του Firefox είναι προβληματική και μπορεί να προκαλέσει σφάλματα, αλλά τα πράγματα θα βελτιωθούν με την προσθήκη του ήδη στον Firefox 67 ( - περίπου μετάφρ.). Για λεπτομέρειες σχετικά με τη νέα έκδοση διαβάστε -
Σε smartphones
Προς το παρόν δεν υπάρχει υποστήριξη υλικού για smartphone λόγω έλλειψης κατάλληλων αποκωδικοποιητών. Μπορείτε να κάνετε αποκωδικοποίηση λογισμικού, αν και αυτό θα οδηγήσει σε αυξημένη κατανάλωση μπαταρίας. Τα πρώτα SOC για κινητά που υποστηρίζουν αποκωδικοποίηση υλικού AV1 θα εμφανιστούν το 2020.
Και τότε οι αναγνώστες του άρθρου λένε, "έτσι αν τα κινητά τηλέφωνα δεν το υποστηρίζουν ακόμη σωστά, γιατί να χρησιμοποιήσω το AV1;"
Το AV1 είναι ένας αρκετά νέος κωδικοποιητής και βρισκόμαστε στην αρχή της προσαρμογής του. Σκεφτείτε αυτό το άρθρο ως το στάδιο "ενώ μαγειρεύετε, το πλήθος θα ακολουθεί". Η υποστήριξη για επιτραπέζιους υπολογιστές από μόνη της θα επιταχύνει τους ιστότοπους για κάποιο από το κοινό. Και οι παλιοί κωδικοποιητές μπορούν να χρησιμοποιηθούν ως εναλλακτικό σενάριο όταν το AV1 δεν υποστηρίζεται στη συσκευή προορισμού. Αλλά καθώς οι χρήστες αλλάζουν σε συσκευές με υποστήριξη AV1, όλα θα είναι έτοιμα. Για να το πετύχουμε αυτό, πρέπει να δημιουργήσουμε μια ετικέτα βίντεο όπως φαίνεται παρακάτω, η οποία θα επιτρέψει στο πρόγραμμα περιήγησης να επιλέξει την προτιμώμενη μορφή του − AV1 - >> VP9 - >> H.264. Λοιπόν, εάν ο χρήστης έχει μια πολύ παλιά συσκευή ή πρόγραμμα πλοήγησης που δεν υποστηρίζει καθόλου βίντεο (το οποίο είναι εξαιρετικά απίθανο με το H264), τότε απλώς θα δει το 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>Δημιουργία AV1
Η δημιουργία βίντεο σε AV1 είναι εύκολη. και χρησιμοποιήστε τις παρακάτω εντολές. Χρησιμοποιούμε 2 περάσματα για να πετύχουμε τον στόχο bitrate. Για να το κάνουμε αυτό θα τρέξουμε το ffmpeg δύο φορές. Την πρώτη φορά γράφουμε το αποτέλεσμα σε ανύπαρκτο αρχείο. Αυτό θα δημιουργήσει ένα αρχείο καταγραφής που θα χρειαστεί για τη δεύτερη εκτέλεση του 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.mp4Ακολουθεί μια ανάλυση των παραμέτρων:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Δημιουργία GIF
Για να δημιουργήσω το GIF χρησιμοποίησα την παρακάτω εντολή. Για να μειώσω το μέγεθος, κλιμάκωσα το GIF σε πλάτος 720 px και 12 fps αντί για το αρχικό βίντεο 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.gifΑποτελέσματα δοκιμών
Είναι καλύτερα να δεις μια φορά παρά να διαβάσεις εκατό φορές, σωστά; Ας βεβαιωθούμε ότι το AV1 είναι η σωστή επιλογή για τους σκοπούς μας. Πήρα το δωρεάν βίντεο Tears Of Steel που είναι διαθέσιμο εδώ και το μετέτρεψε χρησιμοποιώντας περίπου τον ίδιο ρυθμό μετάδοσης bit για κωδικοποιητές AV1, VP9, H.264. Τα αποτελέσματα είναι παρακάτω για να τα συγκρίνετε μόνοι σας.
Σημείωση 1: Εάν το παρακάτω αρχείο δεν φορτωθεί για εσάς, ίσως ήρθε η ώρα να ενημερώσετε το πρόγραμμα περιήγησής σας. Θα συνιστούσα ένα πρόγραμμα περιήγησης που βασίζεται στο Chromium, όπως το Chrome, το Vivaldi, το Brave ή το Opera. Ακολουθούν οι πιο πρόσφατες πληροφορίες σχετικά με την υποστήριξη AV1
Σημείωση 2: Για τον Firefox 66 σε Linux θα πρέπει να ορίσετε τη σημαία media.av1.enabled σε νόημα true в about:config
Σημείωση 3: Αποφάσισα να μην συμπεριλάβω κανονικά GIF παρακάτω λόγω του μεγάλου μεγέθους τους και του όγκου των δεδομένων που θα απαιτούσε για τη φόρτωση αυτής της σελίδας! (Πράγμα που θα ήταν ειρωνικό, καθώς αυτή η σελίδα έχει να κάνει με τη μείωση του όγκου των δεδομένων σε μια σελίδα :)). Αλλά μπορείτε να δείτε τα τελικά GIF εδώ
Σημείωση μεταφραστή: Το Habr δεν σας επιτρέπει να ενεργοποιήσετε την αυτόματη αναπαραγωγή και να επαναφέρετε το αρχείο, επομένως μπορείτε να αξιολογήσετε μόνο την ποιότητα. Μπορείτε να δείτε πώς θα μοιάζουν οι "κινούμενες εικόνες" ζωντανά .
Σκηνή 1 @ 200 Kbps
Υπάρχει μεγάλη κίνηση εδώ, η οποία είναι ιδιαίτερα ευαίσθητη σε χαμηλούς ρυθμούς bit. Μπορείτε να δείτε αμέσως πόσο κακό είναι το H.264 σε αυτό το bitrate· τα τετράγωνα είναι αμέσως ορατά. Το VP9 βελτιώνει λίγο την κατάσταση, αλλά τα τετράγωνα εξακολουθούν να είναι ορατά. Το AV1 ξεκάθαρα κερδίζει, δημιουργώντας μια εμφανώς καλύτερη εικόνα.
H.264
VP9
AV1
Σκηνή 2 @ 200 Kbps
Υπάρχει πολύ ημιδιαφανές περιεχόμενο CGI εδώ. Τα αποτελέσματα δεν είναι τόσο διαφορετικά όσο την προηγούμενη φορά, αλλά συνολικά το AV1 φαίνεται καλύτερο.
H.264
VP9
AV1
Σκηνή 3 @ 100 Kbps
Σε αυτή τη σκηνή, μειώνουμε το bitrate στα 100 Kbps και τα αποτελέσματα είναι συνεπή. Το AV1 διατηρεί την ηγετική του θέση ακόμα και σε χαμηλούς bitrates!
H.264
VP9
AV1
Višenka σε κέικ
Για να ολοκληρώσετε αυτό το άρθρο νιώθοντας το μέγεθος του εύρους ζώνης που εξοικονομείται σε σύγκριση με το GIF - το συνολικό μέγεθος όλων των βίντεο είναι υψηλότερο... 1.62 MB!! Σωστά. Κάποια γαμημένα 1,708,032 byte! Για σύγκριση, εδώ είναι τα μεγέθη βίντεο GIF και AV1 για κάθε σκηνή
GIF
AV1
Σκηνή 1
11.7 MB
0.33 MB
Σκηνή 2
7.27 MB
0.18 MB
Σκηνή 3
5.62 MB
0.088 MB
Απλά εκθαμβωτικό! Δεν είναι?
Σημείωση: Τα μεγέθη αρχείων των VP9 και H264 δεν δίνονται, αφού πρακτικά δεν διαφέρουν από το AV1 λόγω της χρήσης του ίδιου bitrate. Θα ήταν περιττό να προσθέσουμε δύο ακόμη στήλες με τα ίδια μεγέθη, απλώς για να τονίσουμε ότι αυτοί οι κωδικοποιητές παράγουν πολύ καλύτερη ποιότητα από το GIF σε πολύ μικρότερα μεγέθη αρχείων.
Πηγή: www.habr.com