WebP dan AVIF adalah format gambar yang dibuat untuk web. Pada kualitas visual yang sama, file WebP biasanya 25–35% lebih kecil daripada JPEG, dan AVIF sering kali lebih kecil lagi. Di halaman dengan sepuluh foto, perbedaannya langsung terasa saat pemuatan dan pada LCP (lihat Memahami Core Web Vitals: LCP, INP, dan CLS).
Yang akan Anda capai
- memilih format yang tepat untuk setiap gambar;
- membuat gambar dengan ukuran dan kualitas yang tepat;
- memasangnya di halaman agar tampil di browser mana pun.
Format mana yang dipilih
| Gambar | Format |
|---|---|
| foto | WebP atau AVIF; JPEG hanya sebagai cadangan |
| logo, ikon, gambar sederhana | SVG, jika ada; jika tidak, PNG atau WebP lossless |
| tangkapan layar berisi teks | PNG atau WebP lossless; dengan JPEG, teks tampak bernoda |
| gambar dengan latar transparan | WebP atau AVIF (keduanya mendukung transparansi); PNG sebagai cadangan |
| animasi | video pendek (MP4 atau WebM) sebagai pengganti GIF |
Dukungan browser: WebP berfungsi di semua browser yang dipakai saat ini. AVIF berfungsi di versi terbaru Chrome, Edge, Firefox, dan Safari; iPhone atau Mac lama yang belum di-update mungkin tidak bisa menampilkannya. Karena itu, untuk AVIF Anda juga menyiapkan cadangan (langkah 6).
Langkah-langkah
A. Menyiapkan gambar
- Perkecil sesuai lebar yang dibutuhkan. Foto yang ditampilkan selebar 800 piksel cukup berukuran paling besar 1600 (untuk layar berkepadatan tinggi), bukan 6000 seperti hasil kamera ponsel.
- Ekspor ke WebP atau AVIF. Program edit foto saat ini punya opsi WebP di Export atau Simpan sebagai. Secara online, tanpa menginstal apa pun, Anda bisa memakai https://squoosh.app: gratis, dari Google, dan gambar diproses di browser Anda, tidak diunggah ke server.
- Pilih kualitas. Untuk foto, kualitas sekitar 75–80 untuk WebP dan 50–65 untuk AVIF biasanya terlihat sama dengan aslinya. Bandingkan kedua versi pada ukuran sebenarnya, bukan saat diperbesar.
- Periksa ukuran file. Sebagai patokan: foto selebar halaman, sekitar 150–300 KB; foto di dalam teks, di bawah 150 KB; thumbnail, di bawah 50 KB.
B. Memasangnya di halaman
Satu format saja, WebP — berfungsi di mana saja, jadi sudah cukup:
<img src="/img/sala.webp" width="1600" height="900" alt="Sala de tratament a cabinetului">widthdanheightmemberi tahu browser proporsinya, agar tempatnya disediakan dan halaman tidak melompat (CLS).- AVIF dengan cadangan — browser memilih format pertama yang dipahaminya:
<picture> <source srcset="/img/sala.avif" type="image/avif"> <source srcset="/img/sala.webp" type="image/webp"> <img src="/img/sala.jpg" width="1600" height="900" alt="Sala de tratament a cabinetului"> </picture> - Gambar di bagian bawah halaman diberi
loading="lazy", agar baru diunduh saat pengunjung sampai di sana. Gambar besar pertama, di bagian atas halaman, tidak: gambar itu harus langsung dimuat. Anda bisa menambahkanfetchpriority="high".
C. Mengunggah ke server
- Unggah file ke folder website, dari Enhance (tab “Files”, lihat Mengunggah website dengan File Manager) atau lewat FTP (lihat FTP terenkripsi (FTPS) dengan FileZilla: akun dan data koneksi).
- Jika file
.avifmalah terunduh alih-alih tampil, tambahkan ke.htaccessdipublic_html:AddType image/avif .avif AddType image/webp .webp
Untuk WordPress, format dan pengaturan gambar dijelaskan di Gambar di WordPress: ukuran, format, dan pemuatan.
Jika ada kendala
- Gambar sama sekali tidak muncul di sebuah browser. Browser tersebut tidak mengenali formatnya. Gunakan
<picture>dengan cadangan JPEG atau PNG (langkah 6). - Gambar tampak pecah atau bernoda. Kualitasnya terlalu rendah. Ekspor ulang dengan kualitas 5–10 poin lebih tinggi.
- File WebP lebih besar daripada JPEG-nya. Ini terjadi pada gambar yang sangat kecil atau sudah sangat terkompresi. Pakai versi yang lebih kecil.
- Gambar tampak melar atau gepeng.
widthdanheightdi kode tidak sama proporsinya dengan file. Isi dengan ukuran gambar yang sebenarnya.