Tips Optimasi Gambar Website agar Lolos Core Web Vitals 2026

Buka Google Search Console sekarang, dan kemungkinan besar kamu akan menemukan satu masalah yang sama di hampir semua website Indonesia: LCP buruk.

Largest Contentful Paint — metrik yang mengukur seberapa cepat elemen terbesar di halaman muncul — sering jeblok karena satu penyebab utama: gambar yang tidak dioptimasi.

Bukan karena hosting lambat. Bukan karena JavaScript berat. Gambar-lah pelakunya.

Artikel ini membahas panduan teknis optimasi gambar secara holistik, dari pemilihan format, lazy loading yang benar, responsive images, sampai CDN lokal yang cocok untuk budget Indonesia.

Kenapa Gambar Adalah Penyebab Utama LCP Buruk di Website Indonesia

Google menetapkan ambang LCP yang "baik" adalah di bawah 2,5 detik.

Di Indonesia, dengan mayoritas pengguna mengakses internet via jaringan 4G yang tidak stabil atau bahkan 3G di luar kota besar, angka itu sangat susah dicapai jika gambar tidak dioptimasi.

Rata-rata website bisnis Indonesia masih menggunakan gambar JPEG berukuran 1–3 MB per halaman.

Bayangkan halaman dengan 5 gambar masing-masing 600 KB — itu berarti browser harus mendownload sekitar 3 MB hanya untuk gambar sebelum halaman terlihat lengkap.

Pada koneksi 4G dengan throughput rata-rata 10–15 Mbps di Indonesia, itu butuh waktu 2–2,4 detik hanya untuk transfer data gambar. Belum termasuk DNS lookup, server response, dan render.

Tiga pola kesalahan yang paling umum:

• Upload gambar langsung dari kamera DSLR atau smartphone tanpa resize (ukuran asli 4–8 MB)
• Tidak menggunakan format modern seperti WebP atau AVIF
• Lazy loading dipasang setengah-setengah, bahkan pada gambar hero yang seharusnya dimuat duluan

Format WebP dan AVIF: Cara Konversi dan Kapan Pakai yang Mana

WebP: Standar Minimum untuk Website Indonesia

WebP adalah format yang dikembangkan Google, menghasilkan ukuran file 25–35% lebih kecil dari JPEG dengan kualitas visual yang setara.

Dukungan browser WebP sudah mencapai 97%+ di 2026 — termasuk semua versi modern Chrome, Firefox, Safari, dan Edge.

Untuk website Indonesia, WebP adalah pilihan aman dan wajib.

Cara konversi ke WebP:

Dengan cwebp (command line):

# Konversi satu file
cwebp -q 80 foto-produk.jpg -o foto-produk.webp

# Batch konversi semua JPEG di folder
for file in *.jpg; do
  cwebp -q 80 "$file" -o "${file%.jpg}.webp"
done

Dengan ImageMagick:

convert foto-produk.jpg -quality 80 foto-produk.webp

Dengan PHP (menggunakan GD Library):

$image = imagecreatefromjpeg('foto-produk.jpg');
imagewebp($image, 'foto-produk.webp', 80);
imagedestroy($image);

AVIF: Pilihan Premium untuk Gambar Hero

AVIF adalah format generasi berikutnya yang menghasilkan ukuran file 40–50% lebih kecil dari JPEG.

Kualitasnya jauh lebih baik dari WebP, terutama untuk gambar dengan gradasi warna yang kompleks.

Kelemahan AVIF ada dua: proses encoding lebih lambat dan dukungan browser sekitar 90% (belum semua perangkat lama mendukung).

Kapan pakai AVIF:

• Gambar hero atau banner utama yang ukurannya besar dan jadi kandidat LCP
• Gambar produk yang membutuhkan detail tinggi
• Halaman yang audience-nya pengguna perangkat modern (segmen urban)

Konversi ke AVIF dengan avifenc:

avifenc --min 20 --max 35 foto-hero.jpg foto-hero.avif

Strategi Format yang Tepat

Gunakan tag <picture> untuk memberikan fallback otomatis:

<picture>
  <source srcset="foto-hero.avif" type="image/avif">
  <source srcset="foto-hero.webp" type="image/webp">
  <img src="foto-hero.jpg" alt="Deskripsi gambar" width="1200" height="600">
</picture>

Browser akan memilih format terbaik yang ia dukung. AVIF diprioritaskan, WebP sebagai fallback, JPEG untuk perangkat sangat lama.

Implementasi Lazy Loading yang Benar: Bukan Hanya Tambah loading=lazy

Banyak developer menambahkan loading="lazy" ke semua gambar dan mengira masalah selesai.

Itu justru bisa merusak LCP.

Gambar Hero TIDAK Boleh Lazy Load

Elemen LCP — biasanya gambar hero, banner utama, atau featured image — harus dimuat secepat mungkin.

Menambahkan loading="lazy" pada gambar hero akan memaksa browser menunda pengunduhan gambar tersebut, sehingga LCP malah memburuk.

Aturan sederhana:

• Gambar yang visible di viewport awal (above the fold): JANGAN lazy load, tambahkan fetchpriority="high"
• Gambar di bawah fold: gunakan loading="lazy"

<!-- Gambar hero: prioritas tinggi, jangan lazy -->
<img
  src="banner-utama.webp"
  alt="Banner utama toko"
  width="1200"
  height="500"
  fetchpriority="high"
>

<!-- Gambar produk di bawah fold: lazy load -->
<img
  src="produk-1.webp"
  alt="Nama produk 1"
  width="400"
  height="300"
  loading="lazy"
>

Preload untuk Gambar LCP

Tambahkan <link rel="preload"> di <head> untuk gambar hero agar browser mengetahuinya lebih awal:

<head>
  <link
    rel="preload"
    as="image"
    href="banner-utama.webp"
    type="image/webp"
  >
</head>

Jika menggunakan <picture> dengan AVIF, gunakan imagesrcset dan imagesizes:

<link
  rel="preload"
  as="image"
  imagesrcset="banner-utama.avif"
  imagesizes="100vw"
  type="image/avif"
>

Intersection Observer untuk Kontrol Lebih Detail

Untuk kasus khusus seperti infinite scroll atau galeri besar, Intersection Observer memberikan kontrol yang lebih presisi:

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
}, {
  rootMargin: '200px 0px' // mulai load 200px sebelum masuk viewport
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

Responsive Images dengan srcset agar Mobile Tidak Download Gambar Desktop

Ini adalah salah satu optimasi yang paling sering diabaikan.

Ketika pengguna mobile dengan layar 390px membuka website kamu, apakah mereka mendownload gambar 1200px? Jika tidak menggunakan srcset, jawabannya: ya.

Itu pemborosan bandwidth yang besar — dan langsung berdampak pada LCP di mobile.

Implementasi srcset Dasar

<img
  src="gambar-produk-400.webp"
  srcset="
    gambar-produk-400.webp  400w,
    gambar-produk-800.webp  800w,
    gambar-produk-1200.webp 1200w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 900px) 50vw,
    400px
  "
  alt="Nama produk"
  width="400"
  height="300"
  loading="lazy"
>

Cara baca sizes:

• Jika lebar viewport ≤ 480px, gambar ditampilkan selebar 100% viewport
• Jika lebar viewport ≤ 900px, gambar ditampilkan selebar 50% viewport
• Selain itu, gambar ditampilkan selebar 400px

Browser kemudian memilih gambar dari srcset yang paling mendekati ukuran tersebut.

Otomasi Generate Responsive Images di Laravel

use Intervention\Image\Facades\Image;

function generateResponsiveImages(string $sourcePath, string $filename): array {
    $sizes = [400, 800, 1200];
    $urls = [];

    foreach ($sizes as $width) {
        $outputPath = "images/responsive/{$filename}-{$width}.webp";

        Image::make($sourcePath)
            ->resize($width, null, function ($constraint) {
                $constraint->aspectRatio();
                $constraint->upsize();
            })
            ->encode('webp', 80)
            ->save(public_path($outputPath));

        $urls[$width] = asset($outputPath);
    }

    return $urls;
}

Width dan Height Wajib Dicantumkan

Selalu cantumkan atribut width dan height pada tag <img>.

Ini mencegah Cumulative Layout Shift (CLS) — gambar yang bergeser saat dimuat akan merusak skor CLS dan membuat pengalaman pengguna buruk.

Browser menggunakan nilai width dan height untuk mereservasi ruang sebelum gambar selesai diunduh.

CDN dan Kompresi Otomatis: Pilihan Layanan Terbaik untuk Budget Indonesia

CDN (Content Delivery Network) mendistribusikan gambar dari server yang dekat dengan pengguna.

Untuk Indonesia, server CDN yang berlokasi di Singapura atau Jakarta akan jauh lebih cepat dibanding server di Amerika atau Eropa.

Butuh jasa pembuatan website profesional? KerjaKode menyediakan layanan pembuatan website berkualitas tinggi dengan harga terjangkau. Kunjungi jasa pembuatan website KerjaKode untuk konsultasi gratis dan wujudkan website impian Anda.

Pilihan CDN dengan Edge di Asia Tenggara

1. Cloudflare (Free dan Pro)

Cloudflare memiliki edge node di Jakarta dan Singapura.

Fitur Polish (tersedia di plan Pro, $20/bulan) mengompresi gambar secara otomatis dan mengkonversi ke WebP.

Untuk website dengan budget terbatas, plan Free Cloudflare sudah sangat membantu — setidaknya latency dari Jakarta ke CDN jauh lebih rendah dibanding tanpa CDN.

2. BunnyCDN

Pilihan paling terjangkau dengan edge di Singapura dan Jakarta.

Harga mulai dari $0.01/GB untuk transfer data, tanpa biaya minimum bulanan.

BunnyCDN mendukung fitur Image Processing yang bisa resize, konversi format, dan kompresi gambar secara on-the-fly melalui URL parameter:

https://cdn.namadomain.b-cdn.net/gambar.jpg?width=800&quality=80&format=webp

3. ImageKit.io

Spesialis image CDN dengan edge di Singapura.

Free plan tersedia hingga 20 GB bandwidth per bulan — cukup untuk website UMKM atau portofolio.

URL transformation yang sangat powerful:

https://ik.imagekit.io/namaakun/foto-produk.jpg
  ?tr=w-800,h-600,q-80,f-webp,c-at_max

Parameter c-at_max memastikan gambar tidak di-upscale jika ukuran asli lebih kecil.

4. Statically.io (Gratis untuk Open Source)

Gratis untuk website open source, menggunakan edge Cloudflare.

Mendukung transformasi gambar via URL, cocok untuk website portofolio atau blog developer.

Konfigurasi Cloudflare untuk Optimasi Gambar Otomatis

Jika menggunakan Cloudflare, aktifkan pengaturan ini di dashboard:

• Speed > Optimization > Polish: Lossless atau Lossy (konversi WebP otomatis)
• Speed > Optimization > Mirage: Lazy loading adaptif untuk perangkat mobile lambat
• Caching > Browser Cache TTL: Minimal 1 bulan untuk aset gambar statis

Tambahkan juga Cache-Control header di server untuk gambar:

# nginx.conf
location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Checklist Optimasi Gambar Sebelum Deploy

Sebelum publish halaman baru, pastikan semua poin ini terpenuhi:

• Format: Semua gambar sudah dalam format WebP minimal, AVIF untuk gambar hero
• Ukuran file: Tidak ada gambar di atas 200 KB (untuk gambar biasa) atau 400 KB (untuk hero)
• Responsive: Sudah menggunakan srcset dan sizes dengan minimal 3 breakpoint
• Lazy loading: Hanya gambar di bawah fold yang menggunakan loading="lazy"
• Hero gambar: Menggunakan fetchpriority="high" dan <link rel="preload">
• Width & height: Semua tag <img> mencantumkan atribut width dan height
• CDN: Gambar diservikan dari CDN dengan edge di Asia Tenggara
• Alt text: Semua gambar memiliki alt yang deskriptif

Mengukur Hasil Optimasi

Setelah implementasi, ukur hasilnya dengan tools berikut:

Google PageSpeed Insights — Cek skor LCP, CLS, dan rekomendasi spesifik per halaman. Gunakan URL mobile karena Google menggunakan mobile-first indexing.

WebPageTest.org — Pilih server test di Singapura (paling dekat dengan Indonesia) dan aktifkan filmstrip view untuk melihat kapan gambar LCP muncul.

Chrome DevTools Network Tab — Filter by "Img" untuk melihat ukuran gambar yang didownload, format, dan waktu load per gambar.

Target yang realistis untuk website Indonesia setelah optimasi gambar: LCP di bawah 2,5 detik pada koneksi 4G, dan skor PageSpeed mobile di atas 75.

Optimasi gambar bukan pekerjaan sekali jalan.

Buat SOP untuk setiap konten baru — baik itu blog post, halaman produk, atau landing page — agar gambar sudah teroptimasi sejak awal sebelum upload.

Kombinasi format modern (WebP/AVIF), lazy loading yang tepat sasaran, responsive images dengan srcset, dan CDN dengan edge lokal adalah resep yang terbukti mendongkrak Core Web Vitals website Indonesia secara signifikan.