Optimasi Gambar untuk Kecepatan Website: Panduan Lengkap

Gambar = sekitar 50% dari berat halaman. Mengoptimalkannya adalah peningkatan performa terbesar yang bisa kamu lakukan.

---

Kenapa Harus Optimasi Gambar?

• 53% pengguna mobile meninggalkan situs jika loading lebih dari 3 detik
• Keterlambatan 1 detik = 7% penurunan konversi
• Core Web Vitals (LCP, CLS) langsung mempengaruhi peringkat Google

---

Langkah 1: Pilih Format yang Tepat

• WebP — terbaik untuk semua gambar web (25–35% lebih kecil dari JPEG)
• PNG — transparansi, logo, screenshot
• JPEG — foto ketika WebP tidak tersedia
• SVG — ikon dan logo
• AVIF — generasi berikutnya, gunakan dengan fallback WebP

---

Langkah 2: Kompres

Gunakan TinyImg — gratis, privat, instan.

---

Langkah 3: Gambar Responsif

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

Langkah 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

Jangan lazy-load gambar yang tampil di atas layar (above-fold). Selalu set width/height.

---

Langkah 5: Dimensi Gambar

<img src="photo.webp" alt="Photo" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Langkah 6: Gunakan CDN

Cloudflare (tier gratis), Cloudinary, imgix, Vercel.

---

Langkah 7: Ukur Performa

• Target LCP: di bawah 2,5 detik
• Target CLS: di bawah 0,1
• Total gambar: di bawah 500KB

Tool: PageSpeed Insights, Lighthouse, WebPageTest.

---

Checklist Optimasi

• Format WebP
• Kompres dengan TinyImg
• srcset + sizes
• Lazy load hanya untuk gambar di bawah fold
• width + height di semua gambar
• CDN aktif
• Audit PageSpeed Insights

TinyImg — mulai dari sini, gratis.