Cara Mengubah Gambar ke WebP (dan Kenapa Perlu Dilakukan)

Kalau Anda pernah menguji situs di Google PageSpeed Insights dan mendapat peringatan "Sajikan gambar dalam format generasi berikutnya", itulah persis yang diminta Google: mengubah gambar JPG dan PNG Anda menjadi WebP. Ini salah satu langkah dengan dampak terbesar pada performa situs — sekaligus salah satu yang paling gampang dikerjakan.

Kenapa perlu beralih ke WebP?

WebP adalah format buatan Google yang dirilis pada 2010 dan dirancang khusus untuk web. Ia memakai algoritma kompresi yang lebih modern daripada JPG dan PNG, dan pada kualitas visual yang sama memberikan:

• Bobot 25–35% lebih ringan daripada JPG dalam mode lossy (kompresi dengan kehilangan data)
• Bobot 20–30% lebih ringan daripada PNG dalam mode lossless (kompresi tanpa kehilangan data)
• Dukungan transparansi (kanal alfa) — berbeda dari JPG, yang tidak punya
• Dukungan animasi — berbeda dari PNG, yang tidak memilikinya secara bawaan

Dampaknya nyata dalam praktik. Galeri produk e-commerce berisi 20 foto JPG berukuran 300 KB masing-masing (total 6 MB) bisa turun jadi 4 MB dalam WebP dengan kualitas visual yang sama — bobot halamannya berkurang 33%. Bagi Google, itu berarti LCP yang lebih cepat, nilai PageSpeed yang lebih baik, dan peluang peringkat yang lebih tinggi.

Kapan WebP sebaiknya tidak dipakai

Meski jadi format terbaik untuk web modern, ada situasi ketika WebP belum menjadi pilihan yang tepat:

• Email marketing: aplikasi email seperti Outlook dan Apple Mail mendukung WebP secara tidak konsisten. Untuk email HTML, JPG dan PNG masih lebih aman.
• Cetak offset: percetakan dan perangkat lunak cetak konvensional tidak menangani WebP. Untuk file yang akan dicetak, pakai JPG berkualitas tinggi atau PNG.
• Platform dengan batasan format: YouTube tidak menerima WebP untuk unggahan thumbnail (hanya JPG dan PNG). Sebagian formulir sistem lawas mewajibkan JPG. Periksa format yang diterima sebelum mengonversi.
• File yang harus bisa dibuka siapa saja di komputer: pengguna yang mengeklik tautan unduhan lalu membukanya dengan penampil bawaan Windows bisa kesulitan membaca WebP di versi sistem yang lama.

Metode 1 — Konversi online (paling cepat, tanpa instalasi)

Untuk mengubah gambar satuan — atau ketika Anda butuh hasil cepat tanpa menyiapkan apa pun — konverter online adalah jalan paling langsung. Alat Konversi dari ImageTools mengubah JPG, PNG, dan format lain menjadi WebP langsung di browser, tanpa mengirim file Anda ke server luar.

1. Buka Konversi.
2. Pilih atau seret gambarnya ke area unggah.
3. Pilih WebP sebagai format keluaran.
4. Unduh hasilnya satu per satu, atau dalam ZIP kalau filenya banyak.

Metode 2 — WordPress (otomatis untuk seluruh situs)

Untuk situs WordPress, pendekatan paling efisien adalah memakai plugin yang mengubah dan menyajikan WebP secara otomatis — tanpa perlu memproses ulang tiap gambar satu per satu.

WordPress 6.1+ (konversi bawaan)

Sejak versi 6.1, WordPress mengubah gambar menjadi WebP secara otomatis saat diunggah, asalkan servernya mendukung pustaka libwebp (kebanyakan server modern dengan PHP 8+ sudah mendukungnya). Anda tidak perlu melakukan apa pun — WordPress membuat versi WebP tiap gambar dan menyajikan format yang tepat untuk masing-masing browser.

Untuk memastikannya aktif: buka Pengaturan → Media dan cari opsi konversi WebP. Kalau opsinya tidak ada, berarti servernya belum mendukung — pertimbangkan memakai plugin.

Dengan plugin (versi lama atau kontrol lebih besar)

Plugin yang paling banyak dipakai untuk konversi WebP di WordPress:

• ShortPixel Image Optimizer — mengubah gambar baru saat diunggah dan bisa memproses ulang seluruh pustaka yang sudah ada. Gratis sampai 100 gambar/bulan.
• Imagify — antarmukanya sederhana, konversinya otomatis, dan ada opsi optimasi massal. Tersedia paket gratis.
• WebP Express — plugin yang khusus menangani WebP, mengubah file sekaligus menyetel aturan servernya otomatis.

Metode 3 — Baris perintah dengan cwebp (untuk developer)

Google membagikan gratis alat cwebp — encoder resmi WebP — untuk konversi lewat terminal. Ini cara tercepat mengubah gambar dalam jumlah besar di server atau di pipeline build.

Pemasangan

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows - download the binary at: https://developers.google.com/speed/webp/download

Konversi dasar

# Convert a JPG file to WebP at quality 80
cwebp -q 80 photo.jpg -o photo.webp

# Convert PNG to WebP in lossless mode
cwebp -lossless logo.png -o logo.webp

# Convert every JPG in a folder (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Parameter -q mengatur kualitas (0–100). Untuk web, angka antara 75 dan 85 memberi keseimbangan terbaik antara kualitas visual dan ukuran file. Pakai -lossless untuk gambar yang butuh kompresi tanpa kehilangan data (logo, tangkapan layar berisi teks).

Metode 4 — Node.js dengan sharp (untuk pipeline build)

Untuk proyek berbasis Node.js — situs Next.js, Gatsby, Nuxt, atau build otomatis apa pun — pustaka sharp adalah pilihan paling efisien untuk konversi WebP di dalam pipeline:

// npm install sharp

const sharp = require('sharp');

// Convert JPG to WebP at quality 80
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// Convert PNG to WebP in lossless mode
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Convert every file in a folder
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp memakai pustaka asli libvips dan jauh lebih cepat daripada solusi JavaScript murni — ideal untuk menghasilkan versi WebP saat membangun situs statis.

Cara memasang WebP dengan fallback untuk browser lama

Meski kecocokan WebP pada 2026 sudah di atas 97%, masih ada konteks yang membutuhkan fallback — sistem korporat dengan IE11, perangkat yang sangat tua, atau sekadar demi jaminan kecocokan maksimal.

Solusi yang tepat adalah tag HTML <picture>, yang memungkinkan Anda mendaftarkan sumber gambar alternatif sesuai urutan prioritas:

<!-- The browser uses WebP when supported, otherwise it falls back to JPG -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo description" width="800" height="600">
</picture>

<!-- With multiple sizes for Retina screens -->
<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    type="image/jpeg">
  <img src="photo-800.jpg" alt="Photo description"
    width="800" height="600" loading="lazy">
</picture>

Browser menilai sumbernya sesuai urutan yang dideklarasikan: kalau mendukung WebP, ia memakai <source> dengan type="image/webp". Kalau tidak, ia jatuh ke JPG di dalam <img>. Tag <img> di bagian akhir bersifat wajib — dialah yang menentukan alt, dimensi, dan perilaku bawaannya.

Menyetel server agar menyajikan WebP otomatis (Apache)

Alternatif dari <picture> adalah menyetel server agar mendeteksi apakah browser menerima WebP lalu menyajikan versi yang tepat secara otomatis. Di Apache, tambahkan ini ke .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve the .webp file when it exists and the browser accepts it
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Dengan pengaturan itu, Anda cukup menaruh file .webp berdampingan dengan file aslinya di folder yang sama. Apache membaca header Accept untuk mengetahui apakah browser menerima WebP, lalu menyajikan versi yang tepat tanpa mengubah HTML sama sekali.

Memeriksa hasilnya di PageSpeed

Setelah WebP terpasang, jalankan Google PageSpeed Insights (pagespeed.web.dev) pada URL situs Anda. Peringatan "Sajikan gambar dalam format generasi berikutnya" semestinya hilang atau berkurang jauh. Di panel peluang, Anda akan melihat perkiraan penghematan KB untuk tiap gambar yang belum dikonversi.

Cara lain memeriksanya: buka Chrome DevTools (F12), masuk ke tab Network, saring dengan "Img", lalu lihat kolom "Type" pada gambar yang dimuat. Kalau tertulis webp, konversinya sudah berjalan.

Level kualitas berapa yang dipakai saat konversi?

Kualitas WebP mengikuti logika yang sama dengan JPG: angka yang lebih tinggi menjaga lebih banyak detail tetapi menghasilkan file yang lebih besar. Bedanya, untuk kualitas visual yang sama, WebP biasanya cukup memakai angka kualitas 10–15 poin di bawah JPG setaranya.

Pertanyaan yang sering diajukan