Cara Membuat File Video Web Lebih Kecil dengan Codec AV1 (2025)

• Dengan menggunakan format video AV1 terbaru, ukuran file video di web bisa diperkecil hingga 20~40 kali lebih kecil
• YouTube dan Netflix telah mengadopsi AV1 sebagai codec video generasi berikutnya, dan format ini didukung oleh browser utama seperti Chrome, Safari, dan Firefox
• Panduan ini menjelaskan strategi encoding codec AV1 dan cara optimalisasinya

Ikhtisar codec dan container

• Format gambar statis: WebP, JPEG, dan PNG didukung oleh sebagian besar browser. Di browser modern, AVIF juga bisa digunakan
• Struktur file video:
  • Codec video: Menentukan strategi kompresi video seperti H.264, HEVC, VP9, dan AV1
  • Codec audio: Menentukan strategi kompresi audio seperti MP3, Opus, dan AAC
  • Container: Ada MP4, MOV, WebM, dan lainnya; digunakan untuk menyimpan stream video dan audio, subtitle, serta metadata

Pengenalan codec AV1

• Codec AV1 pertama kali dirilis pada Maret 2018
• Dapat menghasilkan ukuran file hingga 30~50% lebih kecil dibanding HEVC/VP9 maupun H.264/VP8
• Kelebihan:
  • Dapat mempertahankan kualitas gambar tinggi pada bitrate rendah
  • Hampir tidak ada kehilangan kualitas akibat kompresi
• Kekurangan:
  • Kecepatan encoding lambat
  • Hanya didukung pada perangkat yang lebih baru (iPhone 15+, MacBook M3, dll.)
  • Demi kompatibilitas, perlu menyiapkan versi AV1 dan H.264 sekaligus

Cara menggunakan AV1 saat ini

• Memilih container dan codec
  • Container: MP4 adalah yang paling populer dan direkomendasikan
  • Codec audio: Disarankan menggunakan Opus (efisien dan gratis)
• Menyiapkan file untuk kompatibilitas maksimum
  • Untuk browser desktop dan mobile modern (Chrome, Safari, Firefox, Edge, dll.)
    • Container MP4 + codec video AV1 + codec audio Opus
    • Cakupan pengguna: sekitar 74% (per September 2023)
  • Untuk Safari dan macOS versi lama
    • Container MP4 + codec video H.264 + codec audio AAC
    • Cakupan pengguna: sekitar 19%
  • Untuk memperkuat dukungan iPhone dan Mac lama (opsional)
    • Container MP4 + codec video HEVC + codec audio AAC

Cara membuat file video AV1

1. Instal FFmpeg

• Mac: brew install ffmpeg
• Linux: instal FFmpeg dari distribusi Anda
• Windows: lihat panduan instalasi

2. Membuat file H.264 (untuk dukungan perangkat lama)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. Membuat file AV1 (untuk dukungan perangkat modern)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
• Anda bisa menyesuaikan nilai crf atau qp untuk menyeimbangkan kualitas gambar dan ukuran file

4. Membuat file HEVC (jika diperlukan)

• Encoding HEVC untuk mendukung iPhone dan Mac yang lebih lama
• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

Penjelasan opsi utama FFmpeg

• -i SOURCE.mov: mengatur input file sumber
• -map_metadata -1: menghapus metadata yang tidak diperlukan
• -c:a libopus: memilih codec audio (Opus)
• -c:v libsvtav1: memilih codec video (AV1)
• -crf 34, -qp 30: menyesuaikan kualitas gambar dan ukuran file (semakin kecil nilainya, semakin baik kualitasnya dan semakin besar ukurannya)
• -preset veryslow: mengatur kecepatan encoding untuk menghasilkan file berkualitas tinggi
• -pix_fmt yuv420p: mengurangi data warna untuk memperkecil ukuran file
• -movflags +faststart: mempercepat waktu mulai streaming
• -tile-columns 2 -tile-rows 2: meningkatkan kecepatan encoding

Pengaturan kompatibilitas browser

• Gunakan AV1 di browser modern, dan gunakan H.264 sebagai pengganti di browser lama

  <video controls width="600" height="400">  
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
    <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
  </video>  
  

• Jika perlu mendukung iPhone dan Mac lama, file HEVC juga bisa ditambahkan

  <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">  
  

Mengonversi GIF ke AV1 atau H.264

• GIF berukuran 20~40 kali lebih besar dibanding H.264 dan AV1, serta memakai lebih banyak CPU dan daya → disarankan untuk dikonversi
• Konversi GIF → H.264
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
• Konversi GIF → AV1
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4
• Contoh penggantian GIF di HTML

  <video autoplay loop muted playsinline width="600" height="400">  
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
    <source src="animation.h264.mp4" type="video/mp4">  
  </video>  
  

[laeyoung]

Karena landing page sering menggunakan video, sepertinya tidak ada salahnya untuk mencobanya sekali. Tinggal lihat apakah hasilnya berjalan baik, atau justru muncul kasus pengecualian sehingga tidak bisa dipakai.