Optimasi Gambar untuk PageSpeed: WebP, Ukuran, dan Lazy Loading

Di jaringan mobile Indonesia, gambar yang tidak dioptimasi masih penyebab paling umum situs “terlihat bagus” gagal PageSpeed. Tema, section Elementor, dan upload dari kamera HP rutin mengirim foto 2–5 MB ke jalur LCP.

Ini playbook gambar yang saya terapkan sebelum mengejar setting plugin.

Apa yang benar-benar menggerakkan skor

Lab mobile Google peduli pada:

1. LCP — sering gambar hero atau foto besar di atas fold;
2. ukuran transfer — byte lebih sedikit di 4G;
3. biaya decode/paint — dimensi oversized tetap memberatkan meski sudah dikompres.

Memperbaiki gambar sering mengangkat Performance lebih dari mengganti plugin cache.

Langkah 1: Export dengan dimensi yang tepat

Jangan upload foto 4000px untuk slot mobile 720px.

Aturan praktis:

• hero desktop: lebar ~1600–1920px;
• card/thumbnail: lebar 600–800px;
• logo/icon: sekecil kebutuhan layout (sering di bawah 200px).

Sajikan 2x hanya jika desain benar-benar butuh detail retina—dan utamakan format modern daripada JPEG mentah yang membengkak.

Langkah 2: Utamakan WebP (dan AVIF bila didukung)

WebP adalah default praktis untuk kebanyakan situs klien di 2026. AVIF bisa lebih kecil, tapi dukungan dan pipeline encoding berbeda per host/CDN.

Opsi konversi:

• build step (sharp, Squoosh CLI, ImageMagick);
• transform CDN (Cloudflare Images / Polish—uji dengan hati-hati);
• WordPress: ShortPixel, Imagify, atau optimizer tingkat host.

Simpan fallback JPEG/PNG hanya jika segmen browser lama masih penting bagi klien tersebut.

Langkah 3: Kompresi tanpa terlihat “rusak”

Target:

• fotografi: quality ~75–85 (WebP);
• screenshot UI: quality lebih tinggi atau PNG/WebP lossless untuk teks tajam;
• hindari double-compress aset yang sudah diproses.

Jika desainer mengeluh gradasi kotor, naikkan quality sedikit—jangan kembali ke original 3MB.

Langkah 4: srcset dan sizes responsif

Satu src raksasa memaksa HP mengunduh aset desktop.

<img
  src="/images/hero-800.webp"
  srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="1600"
  height="900"
  alt="Showroom kusen aluminium"
/>

Selalu sertakan width dan height (atau CSS aspect-ratio) untuk melindungi CLS.

Langkah 5: Lazy load semua kecuali gambar LCP

• gambar di bawah fold: loading="lazy";
• LCP/hero: fetchpriority="high" dan load eager;
• jangan lazy-load hero layar pertama—itu menunda LCP.

Lazy-loading inti WordPress membantu, tapi page builder kadang menyuntikkan gambar eager di mana-mana. Audit HTML homepage.

Langkah 6: Jebakan khusus WordPress

• gambar background Elementor sering melewatkan srcset;
• slider memuat banyak slide full-size di first paint;
• original di media library tetap tertaut dari post lama—regenerate thumbnail setelah mengubah image size;
• matikan plugin “retina” yang menggandakan bobot aset tanpa mengukur manfaat.

Checklist audit cepat

1. Buka DevTools → Network → Img; urutkan by size.
2. Catat file di atas fold yang > ~200–300 KB.
3. Pastikan format WebP/AVIF bila memungkinkan.
4. Uji ulang PageSpeed mobile dan lihat nama elemen LCP.

Intent kata kunci

Pencarian seperti optimasi gambar pagespeed, compress image webp wordpress, dan cara kecilkan ukuran gambar website mengarah ke alur kerja ini. Perlakukan gambar sebagai syarat delivery—bukan polesan setelah launch.