Sekarang adalah tahun 2019, dan inilah saatnya bagi kita untuk membuat keputusan tentang GIF ( tidak, ini bukan tentang keputusan itu! Di sini kita tidak akan pernah setuju! - di sini kita berbicara tentang pengucapan dalam bahasa Inggris, bagi kita itu tidak relevan - kira-kira Terjemahkan. ). GIF memakan banyak ruang (biasanya beberapa megabita!) Bahwa jika Anda seorang pengembang web, itu benar-benar bertentangan dengan keinginan Anda! Sebagai pengembang web, Anda ingin meminimalkan hal-hal yang perlu diunduh pengguna sehingga situs memuat dengan cepat. Untuk alasan yang sama, Anda meminimalkan JavaScript, mengoptimalkan PNG, JPEG, dan terkadang mengonversi JPEG ke WebP . Tapi apa yang harus dilakukan dengan GIF lama?
Ke mana pun kita pergi, kita tidak membutuhkan GIF!
Jika tujuan Anda adalah untuk meningkatkan kecepatan pemuatan situs, maka Anda harus menyingkirkan GIF! Tapi bagaimana kemudian membuat gambar animasi? Jawabannya adalah video. Dan dalam kebanyakan kasus, Anda akan mendapatkan penghematan ruang dan kualitas terbaik 50-90%! Dalam hidup, kebanyakan hal memiliki pro dan kontra. Saat Anda mengganti GIF dengan video, kelemahan paling umum tidak dapat ditemukan.
Turun dengan semua gifs!
Untungnya, mengganti GIF dengan video sudah lumrah dalam beberapa tahun terakhir, jadi semua alat yang diperlukan sudah digunakan. Dalam posting ini, saya tidak akan menemukan kembali roda, tetapi hanya sedikit meningkatkan solusi yang ada. Jadi inilah intinya:
- Ambil GIF dan ubah menjadi video
- Encode video menggunakan H.264 atau VP9, mis. peras dan bungkus dalam wadah MP4 atau WebM
- Ganti
<img> dengan GIF animasi dengan <video> dengan film - Nyalakan putar otomatis dan putar otomatis untuk mencapai efek GIF
Google memiliki beberapa dokumentasi bagus yang menggambarkan proses tersebut.
Sekarang tahun 2019
Sekarang adalah tahun 2019. Kemajuan bergerak maju, dan kita harus mengikutinya. Sejauh ini, kami memiliki dua versi codec yang didukung secara luas di semua peramban dan alat penyandian video:
- H.264 - diperkenalkan pada tahun 2003 dan paling banyak digunakan saat ini
- VP9 - muncul pada 2013 dan mencapai peningkatan kompresi hampir 50% dibandingkan dengan H.264, meskipun seperti yang mereka katakan di sini, tidak semuanya dan tidak selalu begitu cerah
Catatan: meskipun standar H.265 adalah versi H.264 berikutnya dan mampu bersaing dengan VP9, saya tidak menganggapnya karena dukungan browser yang buruk, yang ditampilkan di halaman https://caniuse.com/#feat=hevc . Biaya lisensi adalah alasan utama mengapa H.265 tidak menjadi seluas H.264 dan mengapa konsorsium Alliance of Open Media bekerja dengan codec bebas-royalti - dengan AV1.
Ingatlah bahwa tujuan kami adalah mengurangi GIF besar ke ukuran sekecil mungkin untuk mempercepat pemuatan. Ini akan menjadi tahun 2019 yang aneh jika kita tidak memiliki standar baru untuk kompresi video di gudang senjata kita. Tapi dia dan disebut AV1. Dengan AV1, Anda dapat mencapai sekitar 30% peningkatan dalam kompresi dibandingkan dengan VP9 . Lepota! :)
AV1 siap melayani Anda sejak 2019!
Di desktop
Baru-baru ini, dukungan untuk decoding video AV1 telah ditambahkan pada versi desktop Google Chrome 70 dan Mozilla Firefox 65 . Saat ini, dukungan di Firefox buggy dan dapat menyebabkan crash, tetapi hal-hal akan berubah dengan penambahan decoder dav1d di Firefox 67 ( sudah keluar, tetapi dukungan telah muncul - kira-kira Terjemahkan.) . Untuk detail tentang versi baru baca - rilis dav1d 0.3.0: lebih cepat!
Di telepon pintar
Untuk smartphone, dukungan perangkat keras saat ini kurang karena kurangnya decoder yang sesuai. Anda dapat melakukan decoding perangkat lunak, meskipun ini akan menyebabkan peningkatan konsumsi baterai. SOC seluler pertama dengan dukungan untuk decoding perangkat keras AV1 akan muncul pada tahun 2020.
Dan di sini pembaca artikel adalah "jadi jika ponsel belum mendukung secara normal, lalu mengapa menggunakan AV1?"
AV1 adalah codec yang cukup baru, dan kami berada di awal adaptasinya. Pikirkan artikel ini sebagai tahap "saat Anda memasak, orang-orang menarik diri". Dukungan desktop sendiri akan mempercepat situs untuk bagian dari audiens. Dan codec lama dapat digunakan sebagai skrip fallback, ketika AV1 tidak didukung pada perangkat target. Tetapi ketika pengguna beralih ke perangkat dengan dukungan untuk AV1, semuanya akan siap. Untuk mencapai ini, kita perlu membuat tag video, seperti yang ditunjukkan di bawah ini, yang memungkinkan browser untuk memilih format yang disukai - AV1 - >> VP9 - >> H.264 . Nah, jika pengguna memiliki perangkat yang sepenuhnya tua atau navigator yang video tidak mendukung sama sekali (yang tidak mungkin dicuri dengan H264) , maka ia hanya 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>
Membuat AV1
Membuat video di AV1 itu mudah. Unduh ffmpeg build terbaru untuk sistem Anda dari sini 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 akan 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.mp4
Berikut adalah deskripsi 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 - , . .
Penciptaan GIF
Untuk membuat GIF, saya menggunakan perintah di bawah ini. Untuk mengurangi ukuran, saya memperbesar GIF menjadi 720px lebar dan 12 fps, bukannya video 24 fps asli.
./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
Hasil tes
Lebih baik melihat sekali daripada membaca seratus kali, kan? Mari kita pastikan bahwa AV1 adalah pilihan yang tepat untuk tujuan kita. Saya mengambil video Tears Of Steel gratis, tersedia di sini https://mango.blender.org/ , dan mengkonversinya menggunakan bitrate yang kira-kira sama untuk codec AV1, VP9, H.264. Hasilnya di bawah ini, sehingga Anda dapat membandingkannya sendiri.
Catatan 1: Jika file di bawah ini tidak diunduh dari Anda, Anda mungkin perlu memperbarui browser Anda. Saya akan merekomendasikan browser berbasis Chromium seperti Chrome, Vivaldi, Brave atau Opera. Berikut adalah informasi dukungan terbaru untuk AV1 https://caniuse.com/#feat=av1
Catatan 2: Untuk Firefox 66 di Linux, Anda perlu mengatur flag media.av1.enabled menjadi true di about:config
Catatan 3: Saya memutuskan untuk tidak memasukkan GIF biasa di bawah ini karena ukurannya yang besar dan jumlah data yang mungkin diperlukan untuk memuat halaman ini! (Yang akan ironis, karena halaman ini adalah tentang mengurangi jumlah data pada halaman :)). Tetapi Anda dapat melihat GIF terakhir di sini https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs
Catatan Penerjemah : Habr tidak memungkinkan Anda mengaktifkan putar otomatis dan memutar file, jadi hanya kualitas yang akan dievaluasi. Anda dapat melihat bagaimana "gambar animasi" terlihat langsung di artikel aslinya .
Adegan 1 @ 200 Kbps
Ada banyak gerakan, yang sangat sensitif pada bitrate rendah. Anda dapat segera melihat seberapa buruk H.264 pada bitrate ini, kotak langsung terlihat. VP9 sedikit memperbaiki situasi, tetapi kotak masih terlihat. AV1 jelas menang, jelas memberikan gambaran terbaik.
H.264
VP9
AV1
Adegan 2 @ 200 Kbps
Ada banyak konten CGI yang tembus cahaya. Hasilnya tidak lagi berbeda sebanyak waktu terakhir, tetapi secara keseluruhan AV1 terlihat lebih baik.
H.264
VP9
AV1
Adegan 3 @ 100 Kbps
Dalam adegan ini, kami memutar bitrate ke 100 Kbps dan hasilnya konsisten. AV1 mempertahankan kepemimpinan dengan bit rate yang rendah!
H.264
VP9
AV1
Cherry pada kue
Untuk menyelesaikan artikel, rasakan jumlah lalu lintas yang disimpan dibandingkan dengan GIF - ukuran total semua video lebih tinggi ... 1,62 MB !! Benar Beberapa sialan 1.708.032 byte! Sebagai perbandingan, berikut adalah ukuran video GIF dan AV1 untuk setiap adegan
Menakjubkan! Benar?
Catatan: Ukuran file VP9 dan H264 tidak ditampilkan, karena mereka praktis tidak berbeda dari AV1 karena penggunaan bitrate yang sama. Akan berlebihan untuk menambahkan dua kolom lagi dengan dimensi yang sama, hanya untuk menekankan bahwa codec ini menghasilkan kualitas yang jauh lebih baik daripada GIF dengan ukuran file yang jauh lebih kecil.