Cara Mengoptimalkan Gambar Website dan Menaikkan Skor PageSpeed

Kecepatan memuat sudah menjadi faktor peringkat yang diakui Google sejak 2018 untuk desktop dan 2021 untuk ponsel. Lebih dari itu, kecepatan berpengaruh langsung pada konversi: setiap detik tambahan menaikkan angka pengunjung yang kabur sampai 32%, menurut data Google sendiri. Di e-commerce, riset Portent menunjukkan halaman yang terbuka dalam 1 detik menghasilkan konversi hingga 3 kali lipat dibanding halaman yang butuh 5 detik.

Gambar biasanya menyumbang 50–80% dari total bobot sebuah halaman web. Karena itu, mengoptimalkannya adalah langkah dengan dampak terbesar bagi performa situs mana pun.

Apa yang dinilai PageSpeed Insights pada gambar

Google PageSpeed Insights (PSI) memindai halaman Anda dan menandai masalah gambar dalam beberapa kategori. Yang paling sering muncul:

• "Serve images in next-gen formats": muncul saat situs memakai JPG atau PNG padahal WebP (atau AVIF) bisa memangkas ukurannya jauh lebih banyak.
• "Properly size images": muncul saat gambar yang diunggah jauh lebih besar daripada ruang tampilnya. Contoh: mengunggah foto 2000px untuk ditampilkan pada 400px.
• "Defer offscreen images": muncul saat gambar di bawah layar ikut dimuat bersama seluruh halaman, bukan menunggu pengunjung menggulir sampai ke sana (lazy loading).
• "Efficiently encode images": muncul saat kompresi yang dipakai masih bisa diperketat tanpa penurunan kualitas yang terlihat.
• "LCP image": menunjukkan gambar mana yang menjadi Largest Contentful Paint halaman — elemen utama yang menentukan salah satu metrik Core Web Vitals.

Enam prinsip optimasi gambar untuk web

1. Pakai format yang tepat untuk tiap jenis gambar

Memilih format adalah keputusan paling berdampak, bahkan sebelum menyentuh kompresi:

WebP menghasilkan file 25–35% lebih ringan daripada JPG dan 20–30% lebih ringan daripada PNG pada kualitas tampilan yang setara. Pada 2026, dukungannya melampaui 97% browser yang dipakai — tidak ada lagi alasan teknis untuk menghindarinya di situs baru.

2. Kompres tanpa mengorbankan kualitas yang terlihat

Kompresi adalah menekan ukuran file tanpa mengubah dimensi gambar. Pada foto JPG, menurunkan kualitas dari 100% ke 80% menghasilkan file 5–10 kali lebih ringan dengan beda yang tak terlihat di layar. Itulah rentang ideal untuk web.

Patokan bobot menurut jenis gambar:

• Hero atau banner utama: di bawah 200 KB
• Foto produk (e-commerce): 50–150 KB
• Gambar artikel blog: 50–120 KB
• Thumbnail atau gambar mini: 10–30 KB
• Logo (PNG/WebP): di bawah 30 KB
• Ikon SVG: di bawah 5 KB

3. Unggah gambar pada dimensi tampilnya yang sebenarnya

Ini kesalahan paling umum sekaligus paling mahal: mengunggah gambar jauh lebih besar daripada ruang tampilnya. Browser tetap mengunduh gambar utuh, lalu membuang piksel berlebihnya saat menampilkan.

Contoh kerugiannya:

• Foto produk 3000×3000px yang ditampilkan pada kotak 600×600px: browser mengunduh 9 juta piksel dan hanya memakai 360 ribu — 96% terbuang percuma.
• Banner selebar 4000px di situs yang lebarnya maksimal 1440px: 63% piksel yang diunduh langsung dibuang.

Aturannya sederhana: gambar yang diunggah paling besar dua kali dimensi tampilnya (dua kali agar aman di layar Retina/HiDPI). Untuk ruang selebar 600px, unggah maksimal 1200px.

Pakai Ubah Ukuran dari ImageTools untuk menyetel dimensinya sebelum diunggah, dengan mengisi nilai persis dalam piksel atau persentase.

4. Terapkan lazy loading

Lazy loading adalah teknik memuat gambar hanya ketika gambar itu hampir masuk ke area yang terlihat, bukan mengunduh semuanya sekaligus di awal. Dampaknya besar: pada halaman dengan banyak gambar (daftar produk atau artikel panjang), lazy loading bisa memangkas bobot awal halaman sampai 60–80%.

Cara paling sederhana sudah tersedia di HTML modern — cukup tambahkan atribut loading="lazy" pada tag gambar:

<!-- Image that must load immediately (above the fold) -->
<img src="main-banner.webp" alt="Banner" loading="eager">

<!-- Images that can wait (below the fold) -->
<img src="product-1.webp" alt="Produk 1" loading="lazy">
<img src="product-2.webp" alt="Produk 2" loading="lazy">

Penting: jangan pernah memasang loading="lazy" pada gambar utama di atas layar (hero, banner, foto produk pertama). Itu memperlambat LCP — metrik terpenting dalam Core Web Vitals — dan langsung menjatuhkan nilai PageSpeed.

5. Tentukan width dan height pada tag gambar

Saat mulai memuat halaman, browser menyusun tata letaknya sebelum tahu ukuran gambarnya. Kalau width e height tidak ditentukan, browser tidak menyediakan ruang yang benar — dan begitu gambarnya muncul, tata letak "melompat" sehingga teks dan tombol bergeser. Inilah yang diukur PageSpeed sebagai Cumulative Layout Shift (CLS), salah satu Core Web Vital lainnya.

<!-- No dimensions: causes layout shift -->
<img src="product.webp" alt="Produk">

<!-- With dimensions: the right space is reserved from the start -->
<img src="product.webp" alt="Produk" width="600" height="600">

Nilai width e height di HTML tidak harus sama dengan ukuran tampilnya — keduanya hanya menetapkan rasio. Ukuran tampil diurus oleh CSS.

6. Pakai gambar responsif dengan srcset

Atribut srcset memungkinkan Anda menyiapkan beberapa versi dari satu gambar untuk perangkat berbeda — versi kecil untuk ponsel, versi besar untuk desktop. Browser otomatis memilih yang paling pas dengan layar pengunjung.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Produk"
  width="800"
  height="800"
  loading="lazy"
>

Untuk toko online dengan banyak foto produk, srcset bisa memangkas data yang dikirim ke pengguna ponsel sebanyak 40–60%.

Daftar periksa lengkap optimasi gambar

Pakai daftar ini sebelum menerbitkan halaman baru atau memperbarui gambar lama:

• ☐ Gambar dalam WebP (atau SVG untuk vektor)
• ☐ Kompresi sudah diterapkan — usahakan foto di bawah 150 KB
• ☐ Dimensi sudah tepat — tidak lebih dari dua kali ruang tampilnya
• ☐ loading="lazy" pada semua gambar di bawah layar
• ☐ loading="eager" (atau tanpa atribut) pada gambar utama di atas layar
• ☐ width e height sudah diisi pada semua tag <img>
• ☐ Atribut alt yang deskriptif pada semua gambar (aksesibilitas + SEO)
• ☐ srcset untuk gambar yang ukurannya jauh berbeda antara ponsel dan desktop
• ☐ Gambar LCP tanpa loading="lazy" dan memakai fetchpriority="high" kalau memungkinkan

Optimasi menurut platform

WordPress

WordPress otomatis mengonversi ke WebP sejak versi 6.1 bila servernya mendukung. Untuk memastikannya, pasang plugin optimasi seperti Imagify, ShortPixel atau Smush — semuanya mengompres, mengonversi ke WebP, dan memasang lazy loading secara otomatis pada gambar yang sudah ada di pustaka media.

Shopify

Shopify otomatis mengonversi gambar ke WebP dan mengirim versi yang sesuai per perangkat sejak 2021. Yang masih harus diatur sendiri oleh penjual adalah ukuran gambar yang diunggah — anjurannya 2048×2048px untuk foto produk, yang lalu diperkecil Shopify sesuai konteks tampilnya.

Wix, Squarespace, dan pembuat situs lainnya

Hampir semua pembuat situs modern sudah menerapkan kompresi dan lazy loading otomatis. Yang tetap jadi tanggung jawab penggunanya adalah mengunggah gambar dengan dimensi yang wajar — mengunggah foto kamera 8 MB membebani server dan bisa menghasilkan varian yang lebih besar daripada yang dibutuhkan.

Situs HTML/CSS murni atau framework (Next.js, Nuxt, dan sejenisnya)

Dalam kasus ini, seluruh optimasi ada di tangan pengembang. Komponen <Image> milik Next.js, misalnya, mengurus lazy loading, srcset, dan konversi WebP secara otomatis. Untuk framework tanpa fasilitas itu, optimasi manual mengikuti daftar periksa di atas tetap perlu.

Cara mengukur hasil optimasi

Setelah semuanya diterapkan, ukur hasilnya dengan alat berikut:

• Google PageSpeed Insights (pagespeed.web.dev) — analisis lengkap dengan diagnosis per elemen, terpisah untuk ponsel dan desktop.
• Google Search Console → Laporan Pengalaman Halaman — menampilkan kondisi Core Web Vitals berdasarkan data nyata dari pengunjung situs Anda.
• WebPageTest.org — analisis teknis mendetail dengan diagram waterfall, berguna untuk menemukan gambar mana yang membuat LCP melambat.
• Chrome DevTools → Network — saring dengan "Img" untuk melihat semua gambar yang dimuat beserta ukuran dan waktu unduhnya.

Pertanyaan yang sering diajukan