Gambar Sudah Dikompres Tapi Web Tetap Lemot? Ini Biang Keroknya

Gambar sudah kamu kompres sampai kelihatan agak burik, tapi PageSpeed masih ngambek? Biasanya masalahnya bukan ukuran file doang. Sering kali browser menerima gambar yang salah format, salah ukuran, telat diminta, atau malah diminta terlalu cepat.

Di sinilah image optimization modern mulai terasa beda. Bukan cuma “kecilkan JPG”, melainkan mengatur format, srcset, preload, dimensi, serta strategi lazy-load supaya gambar muncul cepat tanpa bikin layout loncat.

Kenapa Kompresi Saja Nggak Cukup?

Kompresi memang penting. Namun, kalau gambar 2400px tetap dikirim ke layar 390px, kamu tetap buang bandwidth. Selain itu, jika hero image telat diprioritaskan, LCP bisa membengkak walau ukuran filenya sudah kecil.

Masalah lain muncul saat gambar nggak punya atribut width dan height. Akibatnya, browser menebak ruang gambar, lalu layout bergeser saat file selesai dimuat. Jadi, CLS naik, pembaca kesal, ranking ikut riskan.

Framework Veteran: Pilih Gambar Berdasarkan Peran, Bukan Ukuran

Ini ide yang agak kontra-intuitif: jangan optimasi semua gambar dengan aturan yang sama. Gambar hero, thumbnail, ilustrasi artikel, logo, dan ikon punya tugas berbeda. Karena itu, prioritas loading-nya juga harus beda.

Pakai model HAT: Hero, Article, Tiny

• Hero: jangan lazy-load. Preload jika jadi kandidat LCP.
• Article: pakai lazy-load, srcset, serta ukuran yang masuk akal.
• Tiny: ikon kecil lebih cocok SVG atau sprite, bukan PNG besar.

Dengan cara ini, kamu nggak cuma mengecilkan file. Kamu mengatur urutan antrean browser. Hasilnya, halaman terasa lebih cepat karena aset penting datang lebih dulu.

AVIF dan WebP: Format Modern yang Harus Kamu Pakai

AVIF biasanya memberi kompresi lebih agresif daripada WebP, terutama untuk foto kompleks. Sementara itu, WebP punya dukungan browser yang sangat luas dan performanya stabil. Maka, kombinasi paling aman adalah AVIF sebagai pilihan utama, WebP sebagai fallback, lalu JPEG atau PNG sebagai cadangan terakhir.

Contoh pola HTML yang rapi:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="675" alt="Dashboard optimasi gambar modern">
</picture>

Untuk WordPress, plugin optimasi gambar modern biasanya sudah bisa membuat WebP atau AVIF otomatis. Namun, tetap cek output HTML-nya. Jika file modern ada, tetapi tema tetap memanggil JPG lama, optimasinya jadi setengah matang.

Srcset dan Sizes: Biar Browser Nggak Salah Ambil File

srcset memberi daftar variasi gambar. Lalu, sizes memberi petunjuk berapa lebar gambar akan tampil di layout. Tanpa sizes yang benar, browser bisa mengambil gambar terlalu besar, terutama di layout responsive.

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 720px"
  width="1200"
  height="675"
  alt="Contoh responsive images">

Untuk blogger dan publisher, ini penting banget. Artikel panjang biasanya punya banyak gambar. Jadi, srcset yang benar bisa memangkas transfer data besar-besaran, terutama dari pembaca mobile.

Preload Hero Image, Tapi Jangan Semua Gambar

Preload itu seperti menyuruh browser, “ambil ini dulu.” Namun, kalau kamu preload terlalu banyak aset, antrean jaringan malah penuh. Karena itu, preload hanya gambar yang benar-benar muncul di viewport awal dan berpotensi jadi LCP.

<link rel="preload" as="image" href="/hero.avif" imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w" imagesizes="100vw" fetchpriority="high">

Selain itu, tambahkan fetchpriority="high" pada hero image. Sebaliknya, gambar di bawah fold cukup pakai lazy-load. Strategi ini selaras dengan rekomendasi web.dev tentang image performance.

Dimensi Gambar: Detail Kecil yang Sering Bikin CLS Naik

Selalu isi width dan height. Browser modern memakai rasio ini untuk menyiapkan ruang sebelum gambar selesai dimuat. Jadi, layout lebih stabil dan pembaca nggak merasa halaman “lompat-lompat”.

Kalau kamu memakai CSS responsive, aman saja. Selama atribut dimensi ada, CSS seperti max-width: 100%; height: auto; tetap bekerja. Detail kecil ini sering memberi efek besar ke Cumulative Layout Shift.

Lazy-Load Strategy: Yang Atas Jangan Malas, Yang Bawah Boleh

Lazy-load bagus untuk gambar di bawah viewport. Namun, hero image jangan kamu lazy-load. Jika hero telat diminta, LCP naik, lalu halaman terasa lambat meski server cepat.

• Gambar pertama di atas fold: eager atau default.
• Gambar artikel bagian tengah: lazy.
• Galeri panjang: lazy plus pagination jika perlu.
• Iklan visual: cek dampaknya ke LCP dan CLS.

Kalau kamu memakai WordPress, audit juga plugin lazy-load. Beberapa plugin terlalu agresif dan melazy-load logo, hero, bahkan gambar featured di atas fold. Kalau begitu, performa bisa turun walau niatnya baik.

Checklist Image Optimization yang Praktis

• Konversi foto ke AVIF dan WebP.
• Aktifkan responsive images dengan srcset dan sizes.
• Isi width, height, dan alt text yang deskriptif.
• Preload hanya hero image yang jadi LCP.
• Lazy-load gambar di bawah fold.
• Audit hasilnya di PageSpeed Insights dan DevTools Network.

Kalau situsmu WordPress, baca juga panduan WordPress Performance Optimization untuk Core Web Vitals. Image optimization makin kuat saat caching, font, JS, dan server ikut rapi.

Kesimpulan: Optimasi Gambar Itu Soal Prioritas

Image optimization terbaik bukan sekadar mengejar file paling kecil. Kamu perlu mengirim format yang tepat, ukuran yang tepat, pada waktu yang tepat. Setelah itu, browser bisa bekerja lebih cepat, layout lebih stabil, dan pembaca lebih betah.

Mau checklist SEO dan performa web yang lebih praktis setiap minggu? Subscribe newsletter Google update dan web performance di bawah ini.