Optimasi Gambar

Gambar biasanya menyumbang 50-70% dari total page weight. Mengoptimasi gambar adalah cara tercepat untuk memperbaiki performance.

Strategi Utama

• Compress — Kurangi ukuran file tanpa mengurangi kualitas visual secara signifikan
• Resize — Jangan serve gambar 4000x3000 untuk thumbnail 200x150
• Format modern — Gunakan WebP atau AVIF yang lebih efisien dari JPEG/PNG
• Lazy load — Hanya load gambar yang terlihat di viewport

Ukuran yang Tepat

<!-- BURUK: gambar asli 2000px lebar, ditampilkan 400px -->
<img src="hero-2000.jpg" width="400">

<!-- BAIK: serve ukuran yang sesuai -->
<img src="hero-400.jpg" width="400">

Dimensi Eksplisit

Selalu set width dan height pada tag <img> untuk mencegah Cumulative Layout Shift (CLS):

<img src="photo.jpg" width="800" height="600" alt="Foto">

Browser akan mereservasi ruang sebelum gambar selesai loading.