Sudah 2019 dan sudah tiba masanya kita memutuskan GIF ( - di sini kita bercakap tentang sebutan dalam bahasa Inggeris, bagi kami ini tidak relevan - lebih kurang. terjemahan). GIF mengambil sejumlah besar ruang (biasanya beberapa megabait!), yang, jika anda seorang pembangun web, benar-benar bertentangan dengan keinginan anda! Sebagai pembangun web, anda ingin meminimumkan perkara yang pengguna perlu muat turun supaya tapak dimuatkan dengan cepat. Atas sebab yang sama, anda mengecilkan JavaScript, mengoptimumkan PNG, JPEG dan kadangkala menukar . Tetapi apa yang perlu dilakukan dengan GIF lama?
Kami tidak memerlukan GIF ke mana kami pergi!
Jika matlamat anda adalah untuk meningkatkan kelajuan pemuatan tapak, maka anda perlu menyingkirkan GIF! Tetapi bagaimana anda membuat gambar animasi? Jawapannya ialah video. Dan dalam kebanyakan kes, anda akan mendapat kualiti yang lebih baik dan penjimatan ruang sebanyak 50-90%! Dalam kehidupan, kebanyakan perkara ada kebaikan dan keburukannya. Apabila anda menggantikan GIF dengan video, selalunya anda tidak akan dapat mencari sebarang keburukan.
Kurangkan semua GIF!
Nasib baik, menggantikan GIF dengan video telah menjadi perkara biasa dalam beberapa tahun kebelakangan ini, jadi semua alatan yang diperlukan sudah digunakan. Dalam siaran ini, saya tidak akan mencipta semula roda, tetapi hanya akan menambah baik sedikit penyelesaian sedia ada. Jadi inilah intipatinya:
- Ambil GIF dan tukarkannya kepada video
- Enkodkan video menggunakan H.264 atau VP9, i.e. mampatkannya dan masukkan ke dalam bekas MP4 atau WebM
- Gantikan
<img>dengan GIF animasi dihidupkan<video>dengan roller - Hidupkan automain tanpa bunyi dan gelung untuk kesan GIF
Dah 2019
Sekarang dah 2019. Kemajuan bergerak ke hadapan, dan kita mesti mengikutinya. Setakat ini kami mempunyai dua pilihan codec yang disokong secara meluas merentas semua penyemak imbas dan alat pengekodan video:
- H.264 - diperkenalkan pada tahun 2003 dan paling banyak digunakan hari ini
- VP9 - muncul pada 2013 dan mencapai peningkatan mampatan hampir 50% berbanding H.264, walaupun tidak semuanya tidak selalu begitu cerah
Nota: Walaupun H.265 adalah versi H.264 seterusnya dan mampu bersaing dengan VP9, saya tidak menganggapnya disebabkan sokongan pelayar yang lemah, seperti yang ditunjukkan pada halaman . Kos pelesenan ialah sebab utama mengapa H.265 tidak meluas seperti H.264 dan sebab konsortium Alliance of Open Media bekerja dengan codec bebas royalti, AV1.
Ingat, matlamat kami adalah untuk mengecilkan GIF yang besar kepada saiz terkecil yang mungkin untuk mempercepatkan masa pemuatan. Pelik 2019 jika kami tidak mempunyai standard baharu untuk pemampatan video dalam senjata kami. Tetapi ia wujud dan dipanggil AV1. Dengan AV1 anda boleh . Lepota! 🙂
AV1 sedia berkhidmat untuk anda sejak 2019!
Pada desktop
Baru-baru ini sokongan untuk penyahkodan video AV1 telah ditambahkan pada versi desktop и . Pada masa ini sokongan Firefox adalah buggy dan boleh menyebabkan ranap, tetapi perkara harus diperbaiki dengan penambahan sudah ada dalam Firefox 67 ( - lebih kurang terjemah.). Untuk butiran tentang versi baharu baca -
Pada telefon pintar
Pada masa ini tiada sokongan perkakasan untuk telefon pintar kerana kekurangan penyahkod yang sesuai. Anda boleh melakukan penyahkodan perisian, walaupun ini akan membawa kepada peningkatan penggunaan bateri. SOC mudah alih pertama yang menyokong penyahkodan perkakasan AV1 akan muncul pada tahun 2020.
Dan kemudian pembaca artikel itu seperti, "jadi jika telefon bimbit masih belum menyokongnya dengan betul, mengapa menggunakan AV1?"
AV1 ialah codec yang agak baharu, dan kami berada pada permulaan penyesuaiannya. Fikirkan artikel ini sebagai peringkat "semasa anda memasak, orang ramai akan mengikuti". Sokongan desktop itu sendiri akan mempercepatkan tapak untuk sesetengah khalayak. Dan codec lama boleh digunakan sebagai senario sandaran apabila AV1 tidak disokong pada peranti sasaran. Tetapi apabila pengguna beralih kepada peranti dengan sokongan AV1, semuanya akan sedia. Untuk mencapai matlamat ini, kita perlu mencipta teg video seperti yang ditunjukkan di bawah, yang akan membolehkan penyemak imbas memilih format pilihannya − AV1 - >> VP9 - >> H.264. Nah, jika pengguna mempunyai peranti atau navigator yang sangat lama yang tidak menyokong video sama sekali (yang sangat tidak mungkin dengan H264), kemudian dia hanya akan melihat 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>Penciptaan AV1
Mencipta video dalam AV1 adalah mudah. dan gunakan arahan di bawah. Kami menggunakan 2 pas untuk mencapai kadar bit sasaran. Untuk melakukan ini, kami akan menjalankan ffmpeg dua kali. Kali pertama kami menulis hasilnya ke fail yang tidak wujud. Ini akan mencipta log yang diperlukan untuk larian kedua 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.mp4Berikut ialah pecahan parameter:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Membuat GIF
Untuk mencipta GIF saya menggunakan arahan di bawah. Untuk mengurangkan saiz, saya menskalakan GIF kepada 720px lebar dan 12 fps berbanding video asal 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.gifKeputusan ujian
Lebih baik melihat sekali daripada membaca seratus kali, bukan? Mari pastikan AV1 adalah pilihan yang tepat untuk tujuan kita. Saya mengambil video Tears Of Steel percuma yang tersedia di sini , dan menukarnya menggunakan lebih kurang kadar bit yang sama untuk codec AV1, VP9, H.264. Hasilnya ada di bawah supaya anda boleh membandingkannya sendiri.
Nota 1: Jika fail di bawah tidak dimuatkan untuk anda, mungkin sudah tiba masanya untuk mengemas kini penyemak imbas anda. Saya akan mengesyorkan penyemak imbas berasaskan Chromium seperti Chrome, Vivaldi, Brave atau Opera. Berikut ialah maklumat terkini tentang sokongan AV1
Nota 2: Untuk Firefox 66 di Linux anda perlu menetapkan bendera media.av1.enabled menjadi makna true в about:config
Nota 3: Saya telah memutuskan untuk tidak memasukkan GIF biasa di bawah kerana saiznya yang besar dan jumlah data yang diperlukan untuk memuatkan halaman ini! (Yang akan menjadi ironik, kerana halaman ini adalah mengenai mengurangkan jumlah data pada halaman :)). Tetapi anda boleh melihat GIF akhir di sini
Nota penterjemah: Habr tidak membenarkan anda mendayakan automain dan gelung fail, jadi anda hanya boleh menilai kualitinya. Anda boleh melihat rupa "gambar animasi" secara langsung .
Scene 1 @ 200 Kbps
Terdapat banyak pergerakan di sini, yang sangat sensitif pada kadar bit rendah. Anda boleh melihat dengan serta-merta betapa teruknya H.264 pada kadar bit ini; segi empat sama kelihatan serta-merta. VP9 menambah baik keadaan sedikit, tetapi petak masih kelihatan. AV1 jelas menang, menghasilkan gambar yang jelas lebih baik.
H.264
VP9
AV1
Scene 2 @ 200 Kbps
Terdapat banyak kandungan CGI lut sinar di sini. Hasilnya tidak berbeza seperti kali terakhir, tetapi secara keseluruhan AV1 kelihatan lebih baik.
H.264
VP9
AV1
Scene 3 @ 100 Kbps
Dalam adegan ini, kami menurunkan kadar bit kepada 100 Kbps dan hasilnya konsisten. AV1 mengekalkan kepimpinannya walaupun pada kadar bit yang rendah!
H.264
VP9
AV1
Ceri pada kek
Untuk menyelesaikan artikel ini dengan merasakan jumlah lebar jalur yang disimpan berbanding GIF - jumlah saiz semua video adalah lebih tinggi... 1.62 MB!! Betul. Beberapa sialan 1,708,032 bait! Sebagai perbandingan, berikut ialah saiz video GIF dan AV1 untuk setiap adegan
GIF
AV1
Adegan 1
11.7 MB
0.33 MB
Adegan 2
7.27 MB
0.18 MB
Adegan 3
5.62 MB
0.088 MB
Cukup menakjubkan! bukan?
Nota: Saiz fail VP9 dan H264 tidak diberikan, kerana ia boleh dikatakan tidak berbeza daripada AV1 kerana penggunaan kadar bit yang sama. Ia akan menjadi berlebihan untuk menambah dua lagi lajur dengan saiz yang sama, hanya untuk menyerlahkan bahawa codec ini menghasilkan kualiti yang jauh lebih baik daripada GIF pada saiz fail yang lebih kecil.
Sumber: www.habr.com