Cara menggunakan
- Tempel string Base64 atau URI data:image/avif;base64.
- Periksa pratinjau, format yang terdeteksi, dan dimensinya.
- Untuk menyimpan AVIF tanpa perubahan, pilih File asli. Untuk mengonversi format lain, biarkan AVIF terpilih; jika browser Anda tidak dapat mengenkode AVIF, opsi tersebut tidak tersedia.
- Unduh file .avif.
Seperti apa data AVIF
AVIF menyimpan gambar yang dikompresi dengan codec video AV1 di dalam kontainer HEIF, struktur ISO base media file yang sama dengan yang digunakan MP4. Tidak ada signature tetap yang pendek seperti pada PNG. Sebagai gantinya, file dibuka dengan box ftyp yang menyebutkan brand avif, atau avis untuk sekuens animasi. Dalam Base64, ini biasanya berarti string diawali dengan AAAA dan mengandung eXBhdmlm beberapa karakter kemudian. Alat ini membaca box tersebut secara langsung, sehingga dapat membedakan AVIF dari HEIC, yang menggunakan kontainer yang sama dengan brand yang berbeda. Tipe MIME-nya image/avif.
Konversi ke AVIF bergantung pada browser Anda
Versi terbaru Chrome, Edge, Firefox, dan Safari semuanya dapat menampilkan AVIF, sehingga pratinjau dan penyimpanan file asli berfungsi hampir di mana saja. Membuat file AVIF baru lain ceritanya. Konversi menggunakan encoder bawaan browser Anda, dan tidak semua browser dapat menghasilkan AVIF dari kanvas. Alat ini memeriksa apakah browser Anda mampu melakukannya. Jika browser tidak dapat mengenkode AVIF, opsi tersebut tidak tersedia, dan WebP adalah alternatif terdekat. Anda juga dapat mengunduh PNG lalu mengenkodenya dengan alat khusus seperti avifenc dari libavif.
Kapan AVIF layak digunakan
AVIF sering mengungguli JPEG dan WebP dalam ukuran file pada kualitas visual yang sama, terutama untuk foto, dan mendukung transparansi, kedalaman bit tinggi, serta HDR. Proses enkodenya lebih lambat, dan sebagian editor gambar serta sistem operasi lama masih belum dapat membukanya. Untuk gambar yang sangat kecil seperti ikon, overhead kontainer dapat menghapus keuntungannya, sehingga PNG atau WebP bisa jadi lebih kecil. Di situs web, sajikan AVIF dengan fallback agar setiap pengunjung tetap melihat gambar:
<picture>
<source srcset="photo.avif" type="image/avif">
<img src="photo.jpg" alt="Description">
</picture>Pertanyaan yang sering diajukan
Mengapa opsi unduhan AVIF tidak tersedia?
Browser Anda dapat menampilkan AVIF tetapi tidak dapat mengenkodenya dari kanvas. Coba browser lain yang mutakhir, pilih WebP sebagai gantinya, atau unduh PNG lalu konversi dengan encoder desktop.
Mengapa AVIF saya tidak menampilkan pratinjau?
Browser atau sistem operasi versi lama mungkin tidak dapat mendekode AVIF. Data tersebut mungkin juga HEIC, yang terlihat mirip tetapi menggunakan brand yang berbeda; format yang terdeteksi memberi tahu Anda yang mana. Mengunduh sebagai File asli berfungsi dalam kedua kasus.
Apakah AVIF selalu lebih kecil daripada WebP?
Sering, tetapi tidak selalu. Hasilnya bergantung pada gambar dan pengaturan encoder, jadi bandingkan ukuran file yang diunduh.