Optimasi Gambar

Gambar sering menjadi resource terbesar di sebuah halaman. Mengubah format dan ukuran file bisa memperbaiki loading lebih cepat daripada mengganti tema atau menambah plugin. Efeknya terasa di Core Web Vitals, terutama LCP.

Pilih format

JPEG masih aman untuk foto karena kompatibel luas. PNG cocok untuk grafik dan transparansi, tapi terlalu besar untuk foto. WebP sudah didukung hampir semua browser modern dan biasanya lebih kecil dari JPEG. AVIF memberi kompresi lebih baik, tetapi encoding lebih lambat dan dukungannya belum merata.

SVG cocok untuk logo dan ikon karena tetap tajam di berbagai ukuran. Jangan memakai SVG untuk foto. Sediakan fallback WebP atau JPEG lewat elemen picture kalau Anda memakai AVIF.

Ukuran lebih penting daripada format

Mengunggah gambar 4000 piksel lalu menampilkannya selebar 400 piksel tetap membuang bandwidth. Browser mengunduh file besar meskipun tampilannya kecil. Gunakan srcset dan sizes supaya browser memilih ukuran yang sesuai.

<img
  src="/img/hero-800.jpg"
  srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Dasbor hosting"
  fetchpriority="high"
/>

Atribut width dan height mencegah layout shift. Untuk gambar hero, jangan pasang lazy loading. Gambar LCP sebaiknya dimuat segera dengan prioritas tinggi.

Kompresi

cwebp -q 80 input.jpg -o output.webp cukup untuk konversi cepat. Untuk AVIF, avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 bisa jadi titik awal. Bandingkan hasilnya secara visual, bukan hanya dari ukuran file.

WordPress punya plugin optimasi yang bisa menghasilkan WebP atau AVIF. Uji apakah plugin menghapus metadata atau merusak gambar. CDN juga bisa mengonversi otomatis, tapi pastikan cache dan header Vary: Accept dikonfigurasi dengan benar.

Simpan file asli di luar document root atau di object storage. Kalau gambar diganti, ubah nama file atau tambahkan hash supaya CDN tidak menyajikan versi lama.

Yang perlu dihindari

Mengompresi ulang file yang sudah rusak hanya memperburuk kualitas. Memperbesar gambar kecil membuat file besar dan tetap buram. GIF animasi besar sebaiknya diganti video MP4 atau WebM.

Optimasi gambar bekerja paling baik bersama CDN, browser cache, dan lazy loading.

FAQ