Cara Kompres Gambar Produk Jadi WebP Agar Loading Cepat

Gambar produk 3MB yang diupload langsung dari kamera membuat toko online lambat dibuka di HP. Pembeli di Indonesia banyak pakai kuota terbatas, jika loading 8 detik mereka cabut. Kompres jadi WebP bisa pangkas 70-80% ukuran tanpa terlihat pecah di HP.

Kenapa WebP Lebih Ringan dari JPG dan PNG

WebP adalah format gambar modern dari Google yang kompresinya lebih efisien. Foto yang di JPG 1MB bisa jadi WebP 150KB dengan kualitas visual hampir sama di layar HP. Browser modern Chrome, Firefox, Edge sudah support WebP, Safari versi baru juga sudah.

Jika browser lama tidak support WebP, biasanya otomatis fallback ke JPG jika setting server benar. Jadi aman dipakai.

Langkah Kompres Praktis Tanpa Aplikasi Berat

Opsi 1 - TinyPNG (paling cepat)
Buka tinypng.com, drag 20 gambar sekaligus, tunggu kompres, download hasil WebP. Gratis 20 gambar per batch, tidak perlu daftar. Cocok untuk kompres cepat sebelum upload.

Opsi 2 - Squoosh (lebih kontrol)
Buka squoosh.app, upload 1 gambar, pilih format WebP di kanan, atur quality 80, lihat preview perbandingan kiri kanan. Jika sudah pas, download. Squoosh bisa atur resize sekaligus, misal dari 4000px jadi 1200px yang cukup untuk web.

Opsi 3 - Convert massal di laptop
Jika ada 100 gambar, gunakan XnConvert gratis. Masukkan semua gambar, set output WebP quality 80, resize longest side 1200px, convert sekaligus. Hemat waktu dibanding satu per satu.

Setting yang Aman dan Tidak Pecah di HP

• Resize longest side 1200px untuk foto produk, cukup untuk zoom di HP tanpa berat. Jangan upload 4000px dari kamera langsung
• Quality 75-80 untuk WebP, di bawah 70 mulai terlihat kotak-kotak di background putih
• Jangan kompres 2 kali - kompres sekali dari file asli, bukan dari file yang sudah dikompres 2 kali karena kualitas turun drastis

Pasang di Website Agar Otomatis Pakai WebP

Jika pakai WordPress, aktifkan plugin WebP Express atau ShortPixel yang otomatis serve WebP jika browser support. Jika pakai custom, upload 2 versi: foto.jpg dan foto.webp, lalu di HTML pakai tag picture dengan source WebP dulu, fallback JPG.

Contoh tag picture sederhana:

Tambahan: Lazy Load untuk Gambar Bawah

Aktifkan lazy load agar gambar di bawah hanya load saat di-scroll. Di HTML tambahkan loading="lazy" di tag img. Dengan ini, halaman atas load cepat, gambar bawah load belakangan, menghemat kuota pembeli yang hanya lihat 3 produk pertama.

Tugas hari ini: Ambil 5 foto produk terberat di website (cek di GTmetrix), kompres jadi WebP quality 80 resize 1200px via Squoosh, upload ulang, dan bandingkan total ukuran halaman sebelum dan sesudah. Biasanya turun 60-80% dan loading 2-3 detik lebih cepat.

Penutup

Gambar adalah penyebab utama website lambat nomor satu di toko online. Dengan kompres jadi WebP, resize 1200px, quality 80, dan lazy load, loading bisa 2-3 detik lebih cepat tanpa ganti hosting. Mulai dari 5 produk terlaris dulu, rasakan bedanya, baru lanjut ke 100 produk lainnya.