Pengoptimuman Imej untuk Kelajuan Laman Web: Panduan Lengkap

Imej = kira-kira 50% daripada berat halaman. Mengoptimumkannya adalah peningkatan prestasi terbesar yang boleh anda lakukan.

---

Mengapa Optimumkan Imej?

• 53% pengguna mobile meninggalkan tapak jika pemuatan melebihi 3 saat
• Kelewatan 1 saat = 7% penurunan penukaran
• Core Web Vitals (LCP, CLS) secara langsung mempengaruhi kedudukan Google

---

Langkah 1: Pilih Format yang Betul

• WebP — terbaik untuk semua imej web (25–35% lebih kecil daripada JPEG)
• PNG — ketelusan, logo, tangkapan skrin
• JPEG — foto apabila WebP tidak tersedia
• SVG — ikon dan logo
• AVIF — generasi seterusnya, gunakan dengan fallback WebP

---

Langkah 2: Mampatkan

Gunakan TinyImg — percuma, peribadi, segera.

---

Langkah 3: Imej 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 imej di bahagian atas halaman. Sentiasa tetapkan width/height.

---

Langkah 5: Dimensi Imej

<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 (peringkat percuma), Cloudinary, imgix, Vercel.

---

Langkah 7: Ukur Prestasi

• Sasaran LCP: di bawah 2.5 saat
• Sasaran CLS: di bawah 0.1
• Jumlah imej: di bawah 500KB

Alat: PageSpeed Insights, Lighthouse, WebPageTest.

---

Senarai Semak Pengoptimuman

• Format WebP
• Mampatkan dengan TinyImg
• srcset + sizes
• Lazy load hanya untuk imej di bawah lipatan
• width + height pada semua imej
• CDN diaktifkan
• Audit PageSpeed Insights

TinyImg — mulakan di sini, percuma sepenuhnya.