Tips Optimasi Gambar untuk Web Performance yang Maksimal

Tahukah Anda bahwa gambar menyumbang lebih dari 60% dari total ukuran rata-rata halaman web saat ini? Gambar yang tidak dioptimasi adalah pembunuh senyap bagi skor Core Web Vitals dan peringkat SEO Anda.

Jika website Anda terasa lambat dimuat, sebelum Anda menyalahkan server atau ukuran bundle JavaScript, periksalah gambar Anda terlebih dahulu. Studi Google menunjukkan bahwa setiap keterlambatan 1 detik loading halaman dapat menurunkan konversi hingga 7%. Berikut adalah panduan komprehensif untuk mengoptimasi gambar di era modern.

1. Tinggalkan JPEG/PNG, Gunakan WebP atau AVIF

Jika foto Anda tidak membutuhkan transparansi, Anda mungkin terbiasa menyimpannya sebagai JPEG. Jika butuh transparansi, Anda menggunakan PNG. Ini adalah aturan lama yang sudah saatnya diganti.

Sekarang, WebP adalah standar emas. Format yang dikembangkan oleh Google ini rata-rata 30% lebih kecil daripada JPEG dengan kualitas visual yang sama persis, dan ia mendukung transparansi (seperti PNG) maupun animasi (seperti GIF).

Bahkan yang lebih baru adalah AVIF (AV1 Image File Format). AVIF menawarkan kompresi yang lebih ekstrem — hingga 50% lebih kecil dari WebP untuk kualitas yang setara. Hampir semua browser modern di 2026 sudah mendukung AVIF sepenuhnya, termasuk Chrome, Firefox, Safari, dan Edge.

2. Lazy Loading: Muat Gambar Hanya Saat Dibutuhkan

Mengapa browser harus mengunduh 20 gambar yang berada jauh di bawah halaman saat pengguna baru saja membuka bagian paling atas? Ini buang-buang bandwidth yang nyata, terutama bagi pengguna mobile dengan kuota data terbatas.

Tambahkan atribut loading="lazy" pada setiap tag <img> Anda. Browser akan menunda pengunduhan gambar tersebut sampai pengguna men-scroll ke dekat gambar tersebut. Ini adalah salah satu teknik paling mudah dengan dampak yang langsung terasa.

<!-- Gambar di bawah fold: gunakan lazy -->
<img src="hero-banner.webp" alt="Banner" loading="lazy" />

<!-- Gambar above fold (langsung terlihat): gunakan eager -->
<img src="logo.webp" alt="Logo" loading="eager" />

Penting: jangan gunakan lazy loading pada gambar above the fold (gambar yang langsung terlihat tanpa scroll). Ini justru akan memperburuk skor Largest Contentful Paint (LCP) — metrik utama Core Web Vitals Google.

3. Set Explicit Width dan Height (Mencegah CLS)

Pernahkah Anda sedang asyik membaca artikel, lalu tiba-tiba teksnya bergeser ke bawah karena ada gambar yang baru selesai di-load di atasnya? Efek menyebalkan ini disebut Cumulative Layout Shift (CLS) — salah satu metrik Core Web Vitals yang sangat diperhatikan Google untuk ranking.

Untuk mencegahnya, selalu beritahu browser ukuran aspek rasio gambar sebelum gambar tersebut diunduh:

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

Browser akan langsung memesan ruang kosong (placeholder) berukuran 800x600, sehingga layout tidak akan melompat saat gambar akhirnya muncul. Di Next.js, ini ditangani otomatis oleh komponen Image yang built-in.

4. Responsive Images dengan Atribut srcset

Jangan menyajikan gambar selebar 2000 pixel kepada pengguna smartphone dengan layar selebar 400 pixel. Gunakan atribut srcset agar browser bisa memilih ukuran gambar yang tepat sesuai resolusi layar pengguna. Ini bisa menghemat hingga 80% data pada perangkat mobile.

<img 
  srcset="img-400w.webp 400w, 
          img-800w.webp 800w, 
          img-1200w.webp 1200w" 
  sizes="(max-width: 600px) 400px, 800px" 
  src="img-800w.webp" 
  alt="Contoh Responsive Image" 
/>

5. Gunakan CDN untuk Distribusi Global yang Cepat

Content Delivery Network (CDN) adalah jaringan server yang tersebar di berbagai lokasi geografis di seluruh dunia. Ketika pengguna di Surabaya mengakses gambar dari website Anda yang servernya berada di Amerika, request tersebut harus menempuh jarak ribuan kilometer — dan ini membutuhkan waktu yang terasa nyata oleh pengguna.

Dengan CDN, salinan gambar-gambar Anda disimpan di server CDN terdekat dengan pengguna. Pengguna di Surabaya akan mendapatkan gambar dari server CDN di Jakarta atau Singapura, bukan dari Amerika. Ini bisa mengurangi waktu loading gambar hingga 50-80%.

Beberapa CDN populer untuk gambar: Cloudflare CDN (gratis untuk tier dasar), Cloudinary (optimasi + konversi otomatis), dan Vercel Edge Network untuk pengguna Next.js.

6. Kompres Gambar Sebelum Upload

Sebelum gambar sampai ke browser pengguna, ada satu lapisan optimasi yang sering dilewatkan: kompresi di sumber. Jangan pernah upload gambar berukuran 10MB tanpa dikompres terlebih dahulu.

• Squoosh.app — Tools web gratis dari Google, mengkonversi ke WebP/AVIF langsung di browser
• TinyPNG / TinyJPG — Kompresi online dengan kualitas yang sangat baik
• Sharp (Node.js) — Library untuk pipeline otomatis di server/CI-CD
• Imagemin — Plugin webpack/Vite untuk kompresi otomatis saat build

Kesimpulan

Mengoptimasi gambar bukan hanya soal memuaskan algoritma Google. Ini tentang empati kepada pengguna — terutama mereka yang menggunakan koneksi data seluler yang lambat atau mahal. Dengan menerapkan strategi yang telah kita bahas:

• Gunakan WebP atau AVIF untuk semua gambar baru
• Tambahkan loading="lazy" pada gambar di bawah fold
• Selalu set width dan height untuk mencegah layout shift
• Implementasikan srcset untuk responsive images
• Pertimbangkan CDN untuk distribusi yang lebih cepat
• Kompres gambar sebelum upload dengan tools yang tepat

Mulailah dengan langkah kecil: konversi gambar di satu halaman ke WebP dulu, lalu tambahkan lazy loading. Anda akan melihat perbedaan yang signifikan pada skor PageSpeed Insights dalam hitungan menit.