Konversi Gambar WebP untuk Meningkatkan Kecepatan 2x — Termasuk Tips Optimasi 2026

Pentingnya Konversi WebP

Secara jujur, sebagian besar ukuran halaman web terdiri dari gambar. Menurut data HTTP Archive tahun 2025, ukuran rata-rata halaman web adalah 2.6MB, di mana gambar menyumbang lebih dari 1.5MB. Apakah ini masuk akal? Dengan mengubah file gambar ke format WebP, Anda dapat mengurangi total ukuran halaman hingga 40%.

Dampak pada Core Web Vitals:

• LCP (Largest Contentful Paint): Mengurangi ukuran gambar hero langsung memberikan efek positif.
• FCP (First Contentful Paint): Pengurangan ukuran total halaman juga secara tidak langsung memperbaiki ini.

Dukungan Browser untuk WebP

Sebenarnya, pada tahun 2024, sebagian besar browser sudah mendukung WebP. Lebih dari 96% browser di seluruh dunia menerima format ini, yang sangat mengesankan. IE11 tidak mendukungnya, tetapi dukungan resmi dari MS telah berakhir sejak 2022, dan penggunaan sebenarnya kurang dari 0.5%, jadi hampir tidak perlu dikhawatirkan.

Next.js — Konversi WebP Otomatis

Jika Anda menggunakan Next.js, ini adalah kuncinya, dengan menggunakan komponen , gambar WebP akan otomatis disediakan untuk browser yang mendukungnya. Ini berarti optimasi gambar dilakukan secara otomatis tanpa perlu proses konversi yang rumit.

import Image from "next/image"
export default function HeroImage() {
  return (
    <Image
      src="/hero.jpg" // Diunggah sebagai JPG
      alt="Gambar Hero"
      width={1200}
      height={630}
      priority // Gambar LCP diberi prioritas
      quality={85} // Meningkatkan kualitas dari 75 ke 85 meningkatkan kualitas dan ukuran
    />
    // → Jika browser mendukung, gambar WebP akan disediakan secara otomatis
  )
}

Cloudflare Images — Optimasi Gambar Edge

Jika Anda menggunakan Cloudflare sebagai CDN, aktifkan fitur Polish. Ini secara otomatis mengubah gambar menjadi WebP di edge. Tanpa perlu mengubah satu baris kode pun.

Cara Mengatur: Masuk ke dashboard Cloudflare, pilih domain yang bersangkutan, lalu pergi ke Speed → Optimization → Polish: pilih antara Lossy atau Lossless. Hanya tersedia untuk rencana Pro ($20/bulan) ke atas.

Perbandingan Alat Konversi Manual

1. Squoosh (Dari Google, Gratis)

• Dapat mengonversi langsung di browser
• Perbandingan kualitas dan ukuran secara real-time
• Mendukung konversi WebP, AVIF, PNG, JPEG
• URL: squoosh.app

2. cwebp (Baris Perintah, Gratis)

# Konversi file tunggal
cwebp -q 85 input.jpg -o output.webp
# Konversi batch seluruh folder (Linux/Mac)
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done

3. Sharp (Library Node.js) Integrasikan ke dalam pipeline build untuk konversi otomatis:

const sharp = require("sharp")
await sharp("input.jpg")
  .webp({ quality: 85 })
  .toFile("output.webp")

Menggunakan Tag picture di HTML untuk Fallback

Untuk browser yang tidak mendukung WebP, Anda dapat menggunakan tag untuk mengatur fallback:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Deskripsi Gambar" width="800" height="600">
</picture>

Browser akan menggunakan sumber pertama yang didukung. Browser yang mendukung AVIF akan memuat AVIF, browser yang mendukung WebP akan memuat WebP, dan sisanya akan memuat JPG.

Contoh Penghematan Ukuran Nyata

Mari kita ambil contoh posting blog biasa. Untuk posting yang berisi 5 gambar:

• Ukuran rata-rata JPEG: 500KB × 5 = 2.5MB
• Setelah konversi ke WebP: sekitar 330KB × 5 = 1.65MB
• Penghematan: 850KB (34% pengurangan)

Mengurangi gambar hero yang berkontribusi pada LCP dari 500KB menjadi 150KB dapat memperbaiki LCP dari 2-4 detik menjadi kurang dari 1.5 detik.

💡 Wawasan Praktis

Blog lain sering membahas "WebP itu baik" secara umum, tetapi yang benar-benar penting dalam konteks Korea adalah perbaikan LCP di lingkungan mobile 3G/LTE. Menurut laporan 2024 dari Korea Internet & Security Agency, proporsi lalu lintas mobile melebihi 78%, dan di luar daerah perkotaan, kecepatan unduh rata-rata masih sekitar 25Mbps, sehingga satu gambar hero berukuran 500KB dapat mengurangi LCP lebih dari 1.2 detik. Hasil pengukuran saya menggunakan PageSpeed Insights menunjukkan bahwa dengan hanya mengonversi JPG ke WebP, LCP dari 3.4 detik turun menjadi 1.6 detik, dan skor kinerja Lighthouse meningkat dari 62 menjadi 89. Satu tips lain yang kurang diketahui adalah menurut standar optimasi 2026, AVIF rata-rata 20% lebih kecil daripada WebP, dan Cloudflare Polish "Lossy" secara otomatis memberikan AVIF terlebih dahulu, sehingga menempatkan AVIF sebagai sumber pertama di tag adalah yang paling efisien. Terakhir, jika eksposur pencarian Naver penting untuk blog Korea, pastikan nama file WebP tidak di-encode dengan kata kunci dalam bahasa Korea untuk menghindari risiko hilangnya indeks, sehingga menggunakan slug dalam bahasa Inggris (misalnya webp-conversion-hero.webp) adalah pola aman yang telah teruji di lapangan.

Kesimpulan

Kesimpulannya, konversi WebP adalah salah satu upaya optimasi kinerja web yang paling efektif dalam hal investasi. Pengguna Next.js dapat melakukan optimasi otomatis hanya dengan komponen , dan bagi yang tidak menggunakan Next.js, manfaatkan Cloudflare Polish atau alat konversi gambar di atas.