Cara kompres gambar WebP

Untuk kompres WebP, enkode ulang dalam mode lossy dengan kualitas sekitar 75, default di encoder cwebp milik Google, lalu resize ke lebar tampilan sebenarnya. Gunakan mode lossless atau near lossless untuk grafis datar dan screenshot. Untuk batas ukuran yang ketat, kompresor WebP yang menerima target dalam KB akan mencarikan kualitas yang pas.

WebP memang cenderung lebih kecil daripada JPEG dan PNG, tetapi WebP yang disimpan dengan buruk tetap bisa berat. Mode, angka kualitas, dan dimensi piksel semuanya berpengaruh, dan biasanya dimensilah yang paling berpengaruh.

Cara kompres gambar WebP online

Saat formulir atau anggaran halaman memberi angka tetap, alat berbasis ukuran target lebih cepat daripada coba-coba. Alat Kompres WebP berjalan di browser Anda, jadi file tidak diunggah ke server.

1. Buka alatnya dan tambahkan satu atau beberapa file WebP.
2. Masukkan ukuran yang dibutuhkan dalam KB, atau atur kualitas secara manual.
3. Mulai kompresi. Alat ini menurunkan kualitas lebih dulu dan baru mengurangi dimensi jika kualitas saja tidak cukup untuk masuk di bawah target.
4. Unduh hasilnya dan periksa pada zoom 100% di bagian paling ramai, seperti rambut, dedaunan, atau teks kecil.

Jika Anda mulai dari JPEG atau PNG, konversi dulu dengan PNG atau JPG ke WebP. Sebisa mungkin konversi dari file aslinya. WebP setia mempertahankan artefak kotak-kotak dari JPEG yang sudah dikompres, dan Anda membayar byte untuk menyimpannya.

Baru mengenal format ini? Panduan tentang apa itu file WebP membahas asal-usulnya, fitur yang didukung, dan aplikasi yang bisa membukanya.

Lossy, lossless, atau near lossless: mode WebP mana yang sebaiknya dipakai?

WebP punya lebih dari satu cara menyimpan gambar, dan modenya lebih penting daripada angka kualitas mana pun.

WebP lossy

Cara kerjanya seperti JPEG: membuang detail yang kemungkinan tidak Anda sadari. Gunakan untuk foto, foto produk, gambar hero, dan apa pun yang punya gradasi lembut. Mode ini juga mendukung transparansi, yang tidak bisa dilakukan JPEG, jadi foto produk yang dipotong dengan latar transparan bisa tetap lossy dan kecil.

WebP lossless

Setiap piksel dipertahankan persis, seperti PNG. Gunakan untuk logo, ikon, diagram, dan screenshot dengan teks tajam. Hasilnya biasanya lebih kecil daripada gambar yang sama dalam PNG.

WebP near lossless

Opsi tengah di encoder Google. Mode ini sedikit menyesuaikan nilai piksel agar encoder lossless bisa mengemasnya lebih baik, dengan efek yang hampir tidak terlihat. Cocok untuk screenshot dan ilustrasi yang tepinya akan luntur di mode lossy tetapi masih terlalu besar di mode lossless.

Tidak yakin mode mana yang cocok? Ekspor gambar dengan kedua cara lalu bandingkan. Simpan file yang lebih kecil dan masih terlihat benar di ukuran penuh. Screenshot yang berisi tempelan foto adalah kasus sulit yang klasik, dan near lossless sering menang di sana.

Google mendokumentasikan ketiga mode itu, beserta opsi kualitas dan ukuran target, di halaman referensi cwebp.

Pengaturan kualitas berapa yang sebaiknya dipakai untuk kompres WebP?

Kualitas WebP berkisar dari 0 sampai 100, dan cwebp memakai 75 jika Anda tidak mengaturnya. Default itu titik awal yang bagus untuk foto. Dari situ:

• Naikkan sampai sekitar 80 sampai 85 untuk gambar hero besar yang akan dilihat dengan saksama, atau gambar dengan warna kulit dan tekstur halus.
• Turunkan ke sekitar 60 sampai 70 untuk thumbnail, gambar kartu, dan foto latar yang tertutup teks.
• Hindari nilai yang sangat rendah pada gambar yang berisi teks. Huruf cepat menjadi kabur di mode lossy.

Angka kualitas WebP tidak sama persis dengan angka kualitas JPEG. Jangan menyalin pengaturan JPEG lalu menganggap artinya sama. Bandingkan hasilnya dengan mata di ukuran tampilnya, idealnya di HP dan juga laptop.

Cara mengecilkan ukuran WebP dengan resize

Dimensi biasanya lebih berpengaruh daripada kualitas. Gambar yang disimpan selebar 3000 piksel untuk slot selebar 800 piksel di layar membawa piksel sekitar 14 kali lebih banyak dari yang dibutuhkan. Tidak ada pengaturan kualitas yang bisa menutup selisih sebesar itu.

1. Cari lebar terbesar tempat gambar muncul di situs Anda. Pengaturan tema atau layout Anda biasanya menunjukkannya.
2. Gandakan jika Anda ingin tampil tajam di layar ponsel dan laptop berkepadatan tinggi.
3. Resize ke lebar itu dengan alat Resize Foto atau editor Anda, dengan rasio aspek terkunci.
4. Kompres salinan yang sudah di-resize.

Untuk situs responsif, ekspor beberapa lebar dan biarkan browser memilih dengan srcset. Panduan MDN tentang gambar responsif menjelaskan cara kerja markup itu. Browser lalu mengunduh file kecil di HP dan file besar di monitor lebar.

File WebP animasi butuh pertimbangan yang sama. Setiap frame menambah ukuran, jadi mengurangi jumlah frame atau ukuran piksel jauh lebih membantu daripada mengutak-atik kualitas. Loop pendek dengan ukuran lebih kecil biasanya solusi yang praktis.

Mengapa file WebP saya lebih besar daripada aslinya?

Ini lebih sering terjadi daripada yang orang kira. Penyebab umum:

• Sumbernya PNG kecil yang sudah teroptimasi dengan sedikit warna, lalu dikonversi dalam mode lossy dengan kualitas tinggi. Coba mode lossless untuk gambar seperti itu.
• Sumbernya sudah JPEG berkualitas rendah. Mengenkode ulang dengan kualitas lebih tinggi membuat WebP menyimpan semua noise JPEG secara detail.
• Kualitas diatur ke 100. Di mode lossy, itu menghasilkan file besar dengan hampir tanpa peningkatan yang terlihat.
• Gambar masih berdimensi penuh dari kamera.

Sebagian alat otomatis mempertahankan file asli jika versi baru ternyata lebih besar. Jika alat Anda tidak begitu, bandingkan sendiri kedua ukurannya sebelum mengganti apa pun di situs Anda.

Metadata jarang jadi penyebab pada WebP. Secara default cwebp tidak menyalin data EXIF, XMP, atau profil warna dari sumbernya, meski aplikasi lain mungkin menyalinnya. Jika warna terlihat pudar setelah konversi, profil warna yang hilang kemungkinan penyebabnya. Ekspor ulang dengan profil tetap disertakan (cwebp punya opsi -metadata icc untuk ini).

Pengaturan kompresor WebP mana yang cocok untuk situs web dan formulir?

Untuk situs web, pikirkan bobot halaman. Gambar hero adalah elemen terberat di kebanyakan halaman, jadi beri perhatian paling besar: lebar yang tepat, mode lossy, kualitas di kisaran 70-an atau awal 80-an. Thumbnail dan ikon bisa jauh lebih rendah atau beralih ke lossless. Panduan WebP vs PNG membahas lebih dalam cara memilih format untuk performa situs.

Semua browser utama saat ini bisa menampilkan WebP, jadi aman untuk situs web. Formulir upload lain cerita. Banyak portal dan aplikasi desktop lama masih menolaknya. Di Mac, Preview bisa membuka file WebP, tetapi menu ekspornya tidak menyediakan WebP sebagai format output, jadi Anda tidak bisa menyimpan ulang WebP di sana.

Jika portal atau aplikasi menolak file Anda, konversi dengan WebP ke gambar. Pilih JPG untuk foto dan PNG jika gambarnya punya transparansi. Lalu kompres JPG atau PNG itu ke batas formulir seperti biasa.

Pertanyaan yang sering diajukan