Optimasi Gambar Website dengan WebP, AVIF, dan Lazy Load

Foto produk yang diambil langsung dari kamera HP bisa berukuran beberapa megabyte, padahal di halaman toko hanya tampil selebar beberapa ratus piksel. Sisanya adalah data yang tetap harus diunduh pengunjung: halaman jadi lambat di koneksi seluler, metrik LCP memburuk, dan kuota mereka terbuang.

Perbaikannya terdiri dari empat kebiasaan: sajikan gambar sesuai ukuran tampilnya, pakai format modern seperti WebP atau AVIF, kompres secukupnya, dan muat gambar di bawah layar hanya saat dibutuhkan. Berbeda dengan perbaikan di sisi server, semua ini bisa dikerjakan tanpa mengganti hosting.

Format apa yang sebaiknya dipakai?

Tidak ada satu format untuk semua jenis gambar. Pilih berdasarkan isinya:

Untuk kebanyakan website bisnis, WebP sudah jadi pilihan aman dan praktis. AVIF layak dipakai bila alat atau plugin yang kamu gunakan sudah mendukungnya. Bila ingin menyajikan keduanya dengan cadangan, gunakan elemen <picture>: browser akan memilih format pertama yang didukungnya.

WordPress sendiri sudah mendukung unggahan WebP sejak versi 5.8 dan AVIF sejak 6.5. Rilis 7.1 menambah pemrosesan gambar di browser dan dukungan HEIC, seperti dirangkum di WordPress 7.0.

Langkah optimasi dari unggah sampai tampil

1. Ubah ukuran sebelum mengunggah. Tentukan lebar maksimal gambar sesuai desain. Gambar hero selebar layar penuh jarang butuh lebih dari 2.000 piksel, dan foto di kolom artikel biasanya cukup setengahnya. Mengunggah foto 4.000 piksel lalu menampilkannya kecil hanya membebani.

2. Kompres secukupnya. Kompresi lossy dengan kualitas sedang biasanya tidak terlihat bedanya oleh mata, tetapi menghemat banyak ukuran. Bandingkan hasilnya secara visual, terutama untuk foto produk yang detailnya penting.

3. Sediakan beberapa ukuran dengan srcset. Atribut srcset dan sizes memberi browser daftar versi gambar dengan lebar berbeda, lalu browser memilih yang paling pas untuk layar pengunjung. HP mendapat versi kecil, monitor lebar mendapat versi besar. WordPress membuat beberapa ukuran gambar dan menambahkan srcset secara otomatis untuk gambar di konten.

4. Cantumkan width dan height. Tanpa ukuran, browser tidak tahu berapa ruang yang harus disediakan, sehingga teks melompat saat gambar selesai dimuat. Inilah penyebab umum CLS buruk. Cukup tulis atribut width dan height sesuai rasio asli, lalu atur tampilan responsif dengan CSS height: auto.

5. Lazy load gambar di bawah layar. Atribut loading="lazy" membuat browser menunda pengunduhan gambar sampai mendekati area yang terlihat. WordPress menambahkannya secara otomatis untuk banyak gambar.

6. Prioritaskan gambar utama. Gambar yang tampil paling atas, biasanya elemen LCP, justru jangan di-lazy load. Beri fetchpriority="high" agar browser mengunduhnya lebih dulu.

Apakah perlu CDN untuk gambar?

Tidak wajib, tetapi membantu bila pengunjung tersebar jauh dari server, atau website punya banyak gambar. CDN menyimpan salinan gambar di banyak lokasi sehingga diunduh dari titik terdekat. Beberapa layanan CDN juga bisa mengonversi format dan ukuran gambar secara otomatis. Penjelasan dasarnya ada di apa itu CDN.

Selain itu, pastikan server mengirim header cache yang panjang untuk file gambar. Gambar jarang berubah, jadi browser pengunjung tidak perlu mengunduhnya ulang setiap kunjungan.

Alat dan plugin gratis yang bisa dipakai

Untuk mengolah gambar sebelum diunggah:

• Squoosh: aplikasi web dari tim Chrome untuk membandingkan format dan tingkat kompresi secara visual, satu gambar per kali.
• ImageMagick: alat baris perintah untuk mengubah ukuran dan format banyak gambar sekaligus.
• cwebp dan avifenc: alat baris perintah dari pustaka libwebp dan libavif untuk membuat file WebP dan AVIF, cocok untuk skrip otomatis.

Untuk WordPress, plugin seperti Smush, ShortPixel, EWWW Image Optimizer, dan Imagify bisa mengompres dan mengonversi gambar saat diunggah. Sebagian memproses di server sendiri, sebagian di layanan cloud dengan kuota gratis terbatas. Pilih satu saja, dan cek apakah fitur yang kamu butuhkan ada di versi gratisnya. Cara memilih plugin yang layak dibahas di plugin WordPress wajib.

Bagaimana mengecek hasilnya?

Jalankan PageSpeed Insights sebelum dan sesudah optimasi. Perhatikan elemen LCP, saran tentang ukuran gambar, dan pergeseran tata letak. Di Chrome DevTools, tab Network menunjukkan ukuran tiap gambar dan format yang benar-benar dikirim. Bila hasilnya membingungkan, panduan membaca hasil PageSpeed Insights bisa membantu.

Uji juga dari HP dengan koneksi seluler biasa. Angka di laporan penting, tetapi membuka halaman sendiri di kondisi nyata sering memperlihatkan masalah yang tidak tampak di laporan.

Selagi merapikan gambar, isi juga teks alt-nya. Alt tidak membuat file lebih ringan, tetapi membantu pengguna pembaca layar dan mesin pencari memahami isi gambar, misalnya "kemeja batik lengan panjang warna biru" alih-alih nama file bawaan kamera. Contoh untuk berbagai jenis gambar ada di cara menulis alt text.