Ini tahun 2019 dan sudah waktunya kami memutuskan GIF ( - di sini kita berbicara tentang pengucapan dalam bahasa Inggris, bagi kami ini tidak relevan - kira-kira. terjemahan). GIF memakan banyak ruang (biasanya beberapa megabyte!), yang, jika Anda seorang pengembang web, sepenuhnya bertentangan dengan keinginan Anda! Sebagai pengembang web, Anda ingin meminimalkan hal-hal yang perlu diunduh pengguna agar situs dimuat dengan cepat. Untuk alasan yang sama, Anda mengecilkan JavaScript, mengoptimalkan PNG, JPEG, dan terkadang mengonversi . Tapi apa yang harus dilakukan dengan GIF lama?
Kita tidak memerlukan GIF ke mana pun kita pergi!
Jika tujuan Anda adalah meningkatkan kecepatan memuat situs, maka Anda harus menghilangkan GIF! Tapi bagaimana cara membuat gambar animasi? Jawabannya adalah video. Dan dalam kebanyakan kasus, Anda akan mendapatkan kualitas yang lebih baik dan penghematan ruang sebesar 50-90%! Dalam hidup, banyak hal mempunyai pro dan kontra. Saat Anda mengganti GIF dengan video, sering kali Anda tidak akan menemukan kekurangan apa pun.
Turun dengan semua GIF!
Untungnya, mengganti GIF dengan video sudah menjadi hal yang lumrah dalam beberapa tahun terakhir, jadi semua alat yang diperlukan sudah digunakan. Dalam postingan kali ini, saya tidak akan menemukan kembali rodanya, tetapi hanya akan sedikit meningkatkan solusi yang ada. Jadi inilah intinya:
- Ambil GIF dan ubah menjadi video
- Encode video menggunakan H.264 atau VP9, yaitu. kompres dan masukkan ke dalam wadah MP4 atau WebM
- Mengganti
<img>dengan GIF animasi aktif<video>dengan rol - Aktifkan putar otomatis tanpa suara dan putar untuk efek GIF
Ini tahun 2019
Sekarang tahun 2019. Kemajuan terus bergerak maju, dan kita harus mengikutinya. Sejauh ini kami memiliki dua opsi codec yang didukung secara luas di semua browser dan alat pengkodean video:
- H.264 - Diperkenalkan pada tahun 2003 dan paling banyak digunakan saat ini
- VP9 - muncul pada tahun 2013 dan mencapai peningkatan kompresi hampir 50% dibandingkan dengan H.264 tidak semuanya tidak selalu cerah
Catatan: Meskipun H.265 adalah versi berikutnya dari H.264 dan mampu bersaing dengan VP9, saya tidak menganggapnya karena dukungan browser yang buruk, seperti yang ditunjukkan pada halaman . Biaya lisensi adalah alasan utama mengapa H.265 belum tersebar luas seperti H.264 dan mengapa konsorsium Aliansi Media Terbuka bekerja dengan codec bebas royalti, AV1.
Ingat, tujuan kami adalah mengecilkan GIF berukuran besar ke ukuran sekecil mungkin untuk mempercepat waktu pemuatan. Ini akan menjadi tahun 2019 yang aneh jika kita tidak memiliki standar baru untuk kompresi video di gudang senjata kita. Tapi itu ada dan disebut AV1. Dengan AV1 Anda bisa . Mengoceh! 🙂
AV1 siap melayani Anda sejak 2019!
Di desktop
Baru-baru ini dukungan untuk decoding video AV1 ditambahkan ke versi desktop и . Saat ini dukungan Firefox bermasalah dan dapat menyebabkan kerusakan, namun segalanya akan membaik dengan penambahan sudah ada di Firefox 67 ( - kira-kira. terjemahkan). Untuk detail tentang versi baru, baca -
Di smartphone
Saat ini tidak ada dukungan perangkat keras untuk ponsel cerdas karena kurangnya dekoder yang sesuai. Anda dapat melakukan decoding perangkat lunak, meskipun hal ini akan menyebabkan peningkatan konsumsi baterai. SOC seluler pertama yang mendukung decoding perangkat keras AV1 akan muncul pada tahun 2020.
Lalu para pembaca artikel tersebut berkata, “jadi jika ponsel belum mendukungnya dengan baik, mengapa menggunakan AV1?”
AV1 adalah codec yang cukup baru, dan kami sedang berada di awal adaptasinya. Bayangkan artikel ini sebagai tahap “saat Anda memasak, orang banyak akan mengikuti”. Dukungan desktop itu sendiri akan mempercepat situs untuk sebagian audiens. Dan codec lama dapat digunakan sebagai skenario cadangan ketika AV1 tidak didukung pada perangkat target. Namun saat pengguna beralih ke perangkat dengan dukungan AV1, semuanya akan siap. Untuk mencapai hal ini, kita perlu membuat tag video seperti yang ditunjukkan di bawah ini, yang memungkinkan browser memilih format pilihannya - AV1 - >> VP9 - >> H.264. Ada baiknya jika pengguna memiliki perangkat atau navigator yang sangat lama yang tidak mendukung video sama sekali (yang sangat tidak mungkin terjadi pada H264), maka dia hanya akan melihat GIF-nya
<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
Membuat video di AV1 itu mudah. dan gunakan perintah di bawah ini. Kami menggunakan 2 pass untuk mencapai bitrate target. Untuk melakukan ini kita akan menjalankan ffmpeg dua kali. Pertama kali kami menulis hasilnya ke file yang tidak ada. Ini akan membuat log yang diperlukan untuk menjalankan ffmpeg kedua.
# 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 rincian parameternya:
-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 membuat GIF saya menggunakan perintah di bawah ini. Untuk memperkecil ukurannya, saya menskalakan GIF menjadi lebar 720 piksel dan 12 fps, bukan video asli 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.gifHasil tes
Lebih baik melihat sekali daripada membaca seratus kali, bukan? Mari kita pastikan AV1 adalah pilihan yang tepat untuk tujuan kita. Saya mengambil video Tears Of Steel gratis yang tersedia di sini , dan mengonversinya menggunakan bitrate yang kira-kira sama untuk codec AV1, VP9, H.264. Hasilnya ada di bawah sehingga Anda bisa membandingkannya sendiri.
Catatan 1: Jika file di bawah tidak dapat dimuat untuk Anda, mungkin ini saatnya memperbarui browser Anda. Saya akan merekomendasikan browser berbasis Chromium seperti Chrome, Vivaldi, Brave atau Opera. Berikut informasi terbaru tentang dukungan AV1
Catatan 2: Untuk Firefox 66 di Linux Anda perlu menyetel benderanya media.av1.enabled ke dalam makna true в about:config
Catatan 3: Saya memutuskan untuk tidak menyertakan GIF biasa di bawah karena ukurannya yang besar dan jumlah data yang diperlukan untuk memuat halaman ini! (Sungguh ironis, karena halaman ini membahas tentang mengurangi jumlah data pada satu halaman :)). Tapi Anda dapat melihat GIF terakhir di sini
Catatan penerjemah: Habr tidak mengizinkan Anda mengaktifkan putar otomatis dan memutar file, jadi Anda hanya dapat mengevaluasi kualitasnya. Anda dapat melihat seperti apa “gambar animasi” tersebut secara langsung .
Adegan 1 @ 200 Kbps
Ada banyak pergerakan di sini, yang sangat sensitif pada bitrate rendah. Anda dapat langsung melihat betapa buruknya H.264 pada bitrate ini; kotak langsung terlihat. VP9 sedikit memperbaiki situasi, tetapi kotaknya masih terlihat. AV1 jelas menang, menghasilkan gambar yang jelas lebih baik.
H.264
VP9
AV1
Adegan 2 @ 200 Kbps
Ada banyak konten CGI tembus pandang di sini. Hasilnya tidak jauh berbeda dengan sebelumnya, namun secara keseluruhan AV1 terlihat lebih baik.
H.264
VP9
AV1
Adegan 3 @ 100 Kbps
Dalam adegan ini, kami menurunkan bitrate menjadi 100 Kbps dan hasilnya konsisten. AV1 mempertahankan kepemimpinannya bahkan pada bitrate rendah!
H.264
VP9
AV1
Ceri di atas kue
Untuk menyelesaikan artikel ini dengan merasakan jumlah bandwidth yang dihemat dibandingkan dengan GIF - ukuran total semua video lebih tinggi... 1.62MB!! Benar. Sekitar 1,708,032 byte! Sebagai perbandingan, berikut ukuran 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! Bukankah begitu?
Catatan: Ukuran file VP9 dan H264 tidak diberikan, karena praktis tidak berbeda dengan AV1 karena penggunaan bitrate yang sama. Menambahkan dua kolom lagi dengan ukuran yang sama akan menjadi mubazir, hanya untuk menyoroti bahwa codec ini menghasilkan kualitas yang jauh lebih baik daripada GIF pada ukuran file yang jauh lebih kecil.
Sumber: www.habr.com