Mengoptimalkan Gambar Website: WebP, AVIF, Ukuran, dan Lazy Load

Q: Apakah lazy load buruk untuk SEO?

Tidak, selama memakai atribut bawaan loading="lazy" atau cara yang tetap menampilkan gambar di HTML. Googlebot bisa memuat gambar lazy load bawaan browser.

Diperbarui 16 Oktober 2026 · ±6 menit baca

Pada sebagian besar website, gambar adalah komponen terbesar dari total ukuran halaman. Kabar baiknya, gambar juga termasuk yang paling mudah dioptimalkan. Dengan beberapa langkah sederhana, ukuran halaman bisa turun drastis dan LCP membaik tanpa mengubah tampilan.

1. Gunakan ukuran yang sesuai

Kesalahan paling umum adalah mengunggah gambar jauh lebih besar dari ukuran tampilnya. Foto 4000×3000 piksel yang ditampilkan di kolom 800 piksel memaksa pengunjung mengunduh data berkali-kali lipat lebih banyak dari yang diperlukan.

Aturan praktis:

Gambar konten: lebar 1200–1600 piksel biasanya sudah cukup, termasuk untuk layar beresolusi tinggi.
Thumbnail: sesuaikan dengan ukuran tampil, misalnya 300–400 piksel.
Logo dan ikon: gunakan SVG jika memungkinkan.

Lighthouse akan menandai gambar yang terlalu besar dengan saran "Ubah ukuran gambar dengan benar" (properly size images).

2. Sediakan beberapa ukuran dengan srcset

Layar ponsel tidak butuh gambar selebar layar desktop. Atribut srcset dan sizes memungkinkan browser memilih file yang paling sesuai:

<img src="/img/sepatu-800.webp"
     srcset="/img/sepatu-400.webp 400w, /img/sepatu-800.webp 800w, /img/sepatu-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="600" alt="Sepatu lari hitam">

WordPress membuat beberapa ukuran gambar dan menambahkan srcset secara otomatis.

3. Pilih format modern: WebP dan AVIF

JPEG – cocok untuk foto, didukung semua browser.
PNG – cocok untuk grafik dengan transparansi atau teks tajam, tetapi besar untuk foto.
WebP – didukung semua browser modern; umumnya lebih kecil dari JPEG dan PNG pada kualitas yang terlihat setara.
AVIF – kompresi lebih efisien lagi dibanding WebP pada banyak gambar, didukung browser modern utama, tetapi proses encode-nya lebih lambat.

Anda bisa menyajikan AVIF dengan cadangan WebP atau JPEG menggunakan elemen <picture>:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" width="1200" height="630" alt="Tim kami di kantor">
</picture>

Browser akan memakai format pertama yang didukungnya.

4. Kompres dengan kualitas yang wajar

Kompresi lossy membuang detail yang hampir tidak terlihat mata. Untuk JPEG dan WebP, kualitas sekitar 70–85 biasanya sudah tampak bagus. Selalu periksa hasilnya secara visual, terutama pada gambar dengan teks atau gradasi halus.

Alat yang bisa dipakai:

Squoosh (squoosh.app) – alat gratis di browser untuk membandingkan format dan kualitas.
cwebp dan avifenc – alat baris perintah untuk konversi massal.
Plugin WordPress seperti ShortPixel, Imagify, atau EWWW.
Fitur optimasi gambar dari CDN, jika tersedia di paket Anda.

Contoh konversi dengan baris perintah:

cwebp -q 80 foto.jpg -o foto.webp

5. Lazy load untuk gambar di bawah layar

Lazy loading menunda pemuatan gambar sampai pengunjung menggulir mendekatinya. Browser modern mendukungnya secara bawaan:

<img src="/img/galeri-5.webp" loading="lazy" width="600" height="400" alt="...">

Namun ada satu aturan penting: jangan lazy load gambar yang terlihat di layar pertama, terutama gambar terbesar yang menjadi elemen LCP. Lazy load membuat browser menunda gambar itu, sehingga LCP justru melambat. Sebaliknya, beri gambar utama prioritas tinggi:

<img src="/img/hero.webp" fetchpriority="high" width="1200" height="630" alt="...">

Jika gambar utama dipasang sebagai background CSS, browser baru menemukannya setelah CSS diunduh. Lebih baik gunakan elemen <img>, atau tambahkan <link rel="preload" as="image" href="..."> di <head>.

6. Selalu tulis width dan height

Tanpa ukuran, browser tidak tahu berapa ruang yang dibutuhkan gambar sebelum gambar diunduh. Akibatnya, teks di bawahnya bergeser saat gambar muncul, dan nilai CLS naik. Tuliskan width dan height sesuai rasio asli gambar. Dengan CSS max-width:100%; height:auto; gambar tetap responsif dan rasio tetap terjaga.

7. Hati-hati dengan slider dan galeri

Slider di bagian atas halaman sering memuat banyak gambar besar sekaligus dan menunggu JavaScript sebelum menampilkan gambar pertama. Jika memungkinkan, ganti slider dengan satu gambar statis yang kuat. Jika tetap memakai slider, pastikan hanya gambar pertama yang dimuat segera, sedangkan sisanya ditunda.

8. Gunakan CDN dan cache browser

Gambar jarang berubah, sehingga cocok disimpan lama di cache browser dan CDN. Atur header Cache-Control dengan masa simpan panjang, misalnya satu tahun untuk file yang namanya berubah setiap kali isinya diganti. Lihat Caching & CDN.

9. Video dan GIF animasi

GIF animasi sangat besar. Untuk animasi pendek, gunakan video MP4 atau WebM dengan atribut autoplay muted loop playsinline, yang biasanya jauh lebih kecil. Untuk embed YouTube, gunakan gambar thumbnail yang baru diganti dengan pemutar saat diklik.

Daftar periksa singkat

Ukuran gambar tidak lebih besar dari ukuran tampil.
Format WebP atau AVIF dengan kualitas wajar.
srcset untuk berbagai ukuran layar.
loading="lazy" hanya untuk gambar di bawah layar pertama.
fetchpriority="high" untuk gambar LCP.
width dan height pada semua gambar.
Cache browser jangka panjang.
Teks alternatif (alt) yang deskriptif untuk aksesibilitas dan SEO.

Setelah menerapkannya, uji ulang halaman Anda di webmaster.my.id dan perhatikan perubahan LCP, Speed Index, serta total ukuran halaman.

Contoh perhitungan sederhana

Sebuah halaman menampilkan foto banner berukuran 4.000 × 2.250 piksel langsung dari kamera, dengan ukuran file beberapa megabita. Di layar ponsel, banner itu hanya tampil selebar sekitar 400 piksel CSS, atau sekitar 1.000–1.200 piksel fisik pada layar berkerapatan tinggi. Artinya sebagian besar piksel yang diunduh tidak pernah terlihat. Dengan memperkecil gambar ke 1.200 piksel, mengubahnya ke WebP dengan kualitas sekitar 80, dan menyediakan versi 600 piksel lewat srcset, ukuran file biasanya turun menjadi puluhan hingga ratusan kilobita tanpa perbedaan kualitas yang terlihat.

Contoh kode gambar utama yang baik:

<img src="/img/banner-1200.webp"
     srcset="/img/banner-600.webp 600w, /img/banner-1200.webp 1200w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1200" height="675" fetchpriority="high"
     alt="Deskripsi singkat isi gambar">

Checklist lengkap sebelum publikasi

Ukuran asli gambar tidak jauh lebih besar dari ukuran tampilnya.
Format WebP atau AVIF dipakai untuk foto, dengan cadangan jika perlu.
Logo dan ikon sederhana memakai SVG.
Gambar paling atas tidak memakai lazy load dan diberi fetchpriority="high".
Semua gambar di bawah layar memakai loading="lazy".
Setiap gambar punya width dan height atau aspect-ratio.
Teks alt menjelaskan isi gambar, bukan diisi kata kunci berulang.
File gambar disajikan dengan header cache yang panjang.

Kesalahan umum

Mengunggah foto langsung dari kamera atau ponsel. Ukurannya sering ribuan piksel dan beberapa megabita.
Memberi lazy load pada semua gambar. Gambar LCP yang di-lazy-load justru terlambat dimuat dan memperburuk LCP.
Mengecilkan gambar hanya dengan CSS. Browser tetap mengunduh file aslinya.
Kompresi berlebihan. Kualitas terlalu rendah membuat foto produk tampak buram dan bisa menurunkan kepercayaan pembeli. Cek hasilnya dengan mata.
Menyimpan teks penting di dalam gambar. Teks dalam gambar tidak bisa dibaca mesin pencari dan sulit dibaca di layar kecil.

Pertanyaan yang sering diajukan

Lebih baik WebP atau AVIF?

AVIF umumnya menghasilkan file lebih kecil pada kualitas yang mirip, tetapi proses encoding-nya lebih lambat. WebP didukung luas dan lebih mudah diterapkan. Banyak situs memakai keduanya dengan elemen picture, atau cukup WebP saja.

Apakah lazy load buruk untuk SEO?

Tidak, selama memakai atribut bawaan loading="lazy" atau cara yang tetap menampilkan gambar di HTML. Googlebot bisa memuat gambar lazy load bawaan browser.

Berapa ukuran file gambar yang ideal?

Tidak ada angka baku. Patokan praktisnya, gambar utama sebaiknya sekecil mungkin tanpa penurunan kualitas yang terlihat. Untuk thumbnail, puluhan kilobita biasanya sudah cukup.

Apakah perlu plugin untuk mengonversi ke WebP?

Di WordPress, plugin atau fitur hosting memudahkan konversi otomatis. Untuk situs statis, Anda bisa memakai alat seperti Squoosh atau perintah cwebp sebelum mengunggah.

Apakah gambar latar dari CSS juga perlu dioptimalkan?

Ya. Gambar latar yang dipasang lewat CSS tetap diunduh browser dan bisa menjadi elemen LCP. Kecilkan ukurannya, gunakan format modern, dan pertimbangkan memakai elemen img biasa untuk gambar paling atas agar browser menemukannya lebih cepat. Lazy load bawaan juga tidak berlaku untuk gambar latar CSS.

Bagaimana memilih teks alt yang baik?

Jelaskan isi gambar secara singkat seperti Anda menceritakannya kepada orang yang tidak bisa melihatnya. Untuk gambar dekoratif, gunakan alt kosong agar pembaca layar melewatinya.