Tutorial Mengoptimalkan Performa Website dengan Image Optimization

Mengapa Optimasi Gambar Penting?

Gambar merupakan elemen terbesar yang memengaruhi kecepatan loading website. Menurut HTTP Archive, gambar menyumbang sekitar 50% dari total ukuran halaman web. Mengoptimalkan gambar adalah langkah paling efektif untuk meningkatkan performa website.

1. Pilih Format yang Tepat

WebP: Format modern yang menyediakan kompresi superior dibandingkan JPEG dan PNG. Ukuran file 25-35% lebih kecil dengan kualitas yang setara.

AVIF: Format terbaru dengan kompresi lebih baik dari WebP, namun dukungan browser masih terbatas.

JPEG/PNG: Gunakan hanya jika kompatibilitas dengan browser lama diperlukan.

2. Kompresi Gambar

Gunakan tools kompresi seperti:

• Squoosh.app — tool online dari Google

• ImageOptim — aplikasi desktop untuk Mac

• sharp — library Node.js untuk otomatisasi

3. Lazy Loading

Terapkan lazy loading agar gambar hanya dimuat ketika akan terlihat oleh pengguna. Next.js secara default sudah menerapkan lazy loading pada komponen Image, namun pastikan Anda tidak menggunakannya untuk gambar di atas lipatan (above the fold).

4. Responsive Images

Gunakan atribut srcset untuk memberikan gambar dengan ukuran yang sesuai untuk setiap resolusi layar. Next.js Image component secara otomatis menangani ini dengan properti sizes.

Kesimpulan

Optimasi gambar adalah low-hanging fruit dalam optimasi performa website. Dengan menerapkan format WebP, kompresi, lazy loading, dan responsive images, Anda dapat meningkatkan skor Core Web Vitals secara signifikan.