Cara Optimasi Gambar WebP di WordPress Tanpa Plugin Berbayar

Cara Optimasi Gambar WebP di WordPress Tanpa Plugin Berbayar

Gambar sering menjadi salah satu penyebab halaman WordPress terasa berat. Apalagi jika foto langsung diunggah dari kamera atau digunakan dengan ukuran jauh lebih besar daripada kebutuhan sebenarnya. Akibatnya, browser harus mengunduh file berukuran besar sebelum halaman dapat ditampilkan secara optimal.

Salah satu cara yang bisa dilakukan adalah menggunakan format WebP. WordPress sendiri telah mendukung WebP sejak WordPress 5.8, dan dokumentasi WordPress menjelaskan bahwa format ini menawarkan kompresi lossy maupun lossless yang lebih efisien. Dalam banyak kasus, file WebP dapat lebih kecil dibanding JPEG atau PNG yang setara. Menurut dokumentasi WordPress, WebP rata-rata dapat sekitar 30% lebih kecil dibandingkan JPEG atau PNG, sehingga berpotensi mengurangi bandwidth dan mempercepat pemuatan website.

Masalahnya, banyak tutorial optimasi gambar langsung menyarankan plugin premium. Padahal, Anda tetap bisa melakukan optimasi gambar WebP di WordPress tanpa plugin berbayar. Caranya bisa dilakukan secara manual sebelum upload atau otomatis menggunakan fitur server dan solusi gratis yang tersedia.

Di artikel ini kita akan membandingkan kedua metode tersebut, mulai dari proses kerja, kontrol kualitas, kemudahan penggunaan, hingga dampaknya terhadap Core Web Vitals.

Mengapa Gambar WebP Penting untuk Website WordPress?

Setiap gambar yang ditampilkan di website menambah jumlah data yang harus diunduh oleh pengunjung. Jika satu halaman berisi beberapa gambar berukuran besar, total ukuran halaman dapat meningkat cukup signifikan.

Menurut dokumentasi WordPress, dukungan WebP memungkinkan penggunaan format gambar yang memiliki kompresi lebih efisien untuk kebutuhan web. WordPress juga dapat menghasilkan beberapa ukuran gambar sesuai konfigurasi website, sehingga gambar tidak selalu perlu dikirim dalam ukuran asli.

Namun, perlu dipahami bahwa mengubah JPG atau PNG menjadi WebP saja belum tentu membuat website otomatis cepat. Ukuran gambar, dimensi, kualitas kompresi, lazy loading, ukuran gambar yang dikirim ke perangkat, cache, dan performa server tetap berpengaruh.

Apa Hubungan WebP dengan Core Web Vitals?

Core Web Vitals saat ini mencakup tiga metrik utama, yaitu Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS).

Menurut web.dev, LCP mengukur kecepatan pemuatan yang dirasakan pengguna, INP mengukur responsivitas interaksi, sedangkan CLS mengukur stabilitas visual halaman. Target kategori baik adalah LCP maksimal 2,5 detik, INP maksimal 200 milidetik, dan CLS maksimal 0,1 pada persentil ke-75.

Metrik	Yang Diukur	Hubungan dengan WebP
LCP	Kecepatan munculnya konten utama	Dapat terbantu jika gambar utama menjadi lebih kecil dan lebih cepat diunduh
INP	Responsivitas halaman saat pengguna berinteraksi	Dampaknya biasanya tidak langsung
CLS	Stabilitas tata letak halaman	Format WebP saja tidak cukup; dimensi gambar juga perlu ditentukan dengan benar

Jadi, manfaat WebP paling mudah dirasakan pada pengurangan bobot gambar dan potensi perbaikan LCP, terutama jika gambar tersebut merupakan elemen besar yang muncul di bagian awal halaman.

Cara Optimasi Gambar WebP Secara Manual

Metode manual berarti gambar dioptimasi terlebih dahulu sebelum diunggah ke WordPress.

Alurnya sederhana:

Siapkan gambar asli.
Sesuaikan dimensinya dengan kebutuhan website.
Kompres gambar dengan kualitas yang sesuai.
Konversi gambar menjadi WebP.
Periksa kembali kualitas hasil konversi.
Upload file WebP ke Media Library WordPress.

Langkah 1: Jangan Upload Gambar dengan Ukuran Berlebihan

Kesalahan yang cukup sering terjadi adalah mengunggah gambar beresolusi sangat besar, padahal gambar tersebut hanya ditampilkan dengan lebar beberapa ratus atau seribu piksel.

Misalnya, jika gambar hanya ditampilkan dengan lebar sekitar 1200 piksel di halaman artikel, mengunggah gambar berukuran 5000 piksel bisa menjadi pemborosan jika tidak ada kebutuhan khusus terhadap resolusi sebesar itu.

Menurut dokumentasi WordPress terbaru, gambar yang melebihi ambang ukuran tertentu dapat diskalakan, dengan ambang bawaan 2560 piksel. Pengembang juga dapat mengubah batas tersebut melalui filter big_image_size_threshold.

Menurut AndriBerbudi, optimasi gambar yang baik sebaiknya dimulai sebelum proses konversi. Jangan berharap format WebP bisa memperbaiki gambar yang sejak awal dimensinya terlalu besar untuk kebutuhan halaman.

Langkah 2: Konversi JPG atau PNG ke WebP

Setelah dimensi gambar sesuai, lakukan konversi ke format WebP menggunakan aplikasi atau layanan konverter yang Anda percayai.

Saat melakukan konversi, jangan hanya mengejar ukuran file sekecil mungkin. Perhatikan juga kualitas visual gambar.

Kompresi yang terlalu agresif dapat membuat gambar terlihat pecah, muncul artefak, atau kehilangan detail. Karena itu, hasil WebP sebaiknya selalu diperiksa sebelum dipublikasikan.

Langkah 3: Upload WebP ke WordPress

Setelah gambar dikonversi, upload file WebP melalui:

Dashboard WordPress → Media → Add New Media File

Anda juga dapat langsung menambahkan gambar saat membuat atau mengedit artikel.

WordPress telah mendukung format WebP sejak versi 5.8. Dokumentasi WordPress juga menjelaskan bahwa GD dan ImageMagick mendukung pemrosesan WebP, meskipun kemampuan server tetap perlu diperhatikan.

Keunggulan Konversi Manual

Kontrol kualitas gambar lebih besar.
Anda dapat memeriksa hasil sebelum upload.
Tidak menambah plugin di WordPress.
Dimensi gambar dapat disesuaikan sejak awal.
Cocok untuk website dengan jumlah gambar baru yang tidak terlalu banyak.

Kekurangan Konversi Manual

Membutuhkan waktu lebih lama.
Setiap gambar harus diproses satu per satu.
Berisiko lupa melakukan optimasi sebelum upload.
Kurang praktis untuk website dengan banyak kontributor.

Cara Optimasi Gambar WebP Secara Otomatis dengan Plugin Gratis

Jika Anda sering mengunggah gambar, proses otomatis bisa lebih praktis. Beberapa plugin gratis di direktori WordPress menyediakan konversi WebP tanpa memerlukan layanan optimasi berbayar.

Salah satu contohnya adalah plugin gratis WebP Conversion yang menyediakan fitur konversi otomatis saat upload, konversi gambar individual, dan konversi beberapa gambar melalui Media Library. Deskripsinya juga menyebutkan pengaturan kualitas berdasarkan ukuran file.

Alternatif lainnya adalah plugin yang memproses konversi secara lokal di server menggunakan kemampuan seperti PHP GD atau Imagick. Misalnya, beberapa plugin di direktori WordPress menawarkan konversi otomatis JPG dan PNG ke WebP tanpa API eksternal. Ketersediaan fitur dan kompatibilitas tetap perlu diperiksa sebelum digunakan.

Cara Kerja Konversi Otomatis

Secara umum, prosesnya seperti ini:

Anda mengunggah JPG atau PNG.
Plugin memeriksa dukungan WebP pada server.
Gambar dikonversi menggunakan mesin pemrosesan yang tersedia.
Versi WebP dibuat atau digunakan sesuai konfigurasi plugin.
Website menyajikan gambar hasil optimasi.

Menurut dokumentasi WordPress, output format gambar juga dapat dikendalikan menggunakan filter image_editor_output_format. Filter tersebut dapat digunakan untuk mengarahkan format output ukuran gambar tertentu, misalnya menghasilkan WebP dari gambar JPEG jika lingkungan server mendukungnya.

Keunggulan Konversi Otomatis

Lebih praktis untuk banyak gambar.
Mengurangi risiko lupa melakukan konversi.
Mempercepat workflow penulis dan editor.
Dapat membantu menjaga proses upload tetap konsisten.
Cocok untuk website yang rutin menerbitkan konten.

Kekurangan Konversi Otomatis

Membutuhkan konfigurasi awal.
Kompatibilitas bergantung pada server dan plugin.
Proses konversi dapat menambah pekerjaan server saat upload.
Hasil kompresi perlu tetap diperiksa.
Beberapa solusi gratis memiliki batas fitur tertentu.

Perbandingan Konversi Manual dan Otomatis

Faktor	Manual	Otomatis
Biaya	Bisa dilakukan tanpa plugin berbayar	Tersedia beberapa pilihan plugin gratis
Kontrol kualitas	Sangat tinggi karena diperiksa sebelum upload	Bergantung pengaturan kualitas plugin
Kecepatan workflow	Lebih lambat	Lebih praktis untuk upload rutin
Banyak gambar	Kurang efisien	Lebih sesuai
Beban server saat konversi	Tidak ada proses konversi di WordPress	Dapat menggunakan resource server
Risiko lupa optimasi	Lebih tinggi	Lebih rendah jika otomatisasi berjalan baik

Tidak ada satu metode yang selalu paling tepat untuk semua website.

Jika Anda mengelola blog pribadi dan hanya mengunggah beberapa gambar setiap minggu, metode manual bisa memberikan kontrol yang lebih baik. Sebaliknya, jika website menerbitkan banyak artikel atau memiliki banyak kontributor, otomatisasi dapat membantu menjaga workflow tetap konsisten.

Menurut AndriBerbudi, pilihan terbaik bukan sekadar manual versus otomatis, tetapi apakah proses optimasi tersebut bisa dilakukan secara konsisten tanpa mengorbankan kualitas gambar dan performa server.

Dampak WebP terhadap Largest Contentful Paint atau LCP

LCP adalah metrik yang paling erat kaitannya dengan optimasi gambar.

Jika elemen terbesar di area awal halaman berupa gambar, ukuran file gambar tersebut dapat memengaruhi seberapa cepat elemen utama selesai dimuat.

Menurut web.dev, LCP mengukur titik ketika konten utama halaman kemungkinan telah selesai dimuat dari sudut pandang pengalaman pengguna. Nilai LCP yang baik adalah maksimal 2,5 detik pada persentil ke-75 kunjungan halaman.

Karena WebP berpotensi memiliki ukuran file lebih kecil, jumlah data yang perlu ditransfer dapat berkurang. Dalam kondisi yang sama, hal ini dapat membantu gambar utama selesai diunduh lebih cepat.

Namun, hasil akhirnya tetap dipengaruhi oleh faktor lain seperti:

Kecepatan server.
Waktu respons server.
Cache.
CDN jika digunakan.
Ukuran gambar sebenarnya.
Dimensi gambar.
Prioritas pemuatan gambar.
Lazy loading.
Jumlah JavaScript dan CSS yang memblokir rendering.

Artinya, WebP dapat membantu LCP, tetapi bukan tombol ajaib untuk memperbaiki skor Core Web Vitals.

Dampak WebP terhadap Interaction to Next Paint atau INP

INP mengukur seberapa responsif halaman ketika pengguna melakukan interaksi.

Menurut web.dev, nilai INP yang baik adalah maksimal 200 milidetik pada persentil ke-75.

Konversi gambar ke WebP tidak secara langsung menyelesaikan masalah INP seperti JavaScript berat, tugas utama browser yang terlalu lama, atau kode yang menghambat respons interaksi.

Meski begitu, halaman yang lebih ringan dapat membantu mengurangi pekerjaan jaringan dan pemrosesan secara keseluruhan. Dampaknya terhadap INP tetap harus diuji pada kondisi website masing-masing.

Dampak WebP terhadap Cumulative Layout Shift atau CLS

WebP juga tidak otomatis memperbaiki CLS.

CLS berhubungan dengan pergeseran tata letak yang tidak diharapkan ketika halaman sedang dimuat.

Menurut web.dev, nilai CLS yang baik adalah maksimal 0,1 pada persentil ke-75.

Misalnya, sebuah gambar dimuat tanpa ruang yang sudah disiapkan sebelumnya. Ketika gambar selesai dimuat, konten di bawahnya dapat terdorong sehingga tata letak halaman bergeser.

Untuk mengurangi risiko tersebut, pastikan gambar memiliki dimensi yang benar atau browser dapat mengetahui rasio ruang yang harus disediakan sebelum gambar selesai dimuat.

Jadi, selain mengubah gambar menjadi WebP, perhatikan juga atribut ukuran dan cara gambar dimasukkan ke dalam tema WordPress.

Optimasi WebP yang Lebih Efektif untuk Core Web Vitals

Jika tujuan Anda adalah memperbaiki performa website, jangan berhenti pada proses konversi format.

Gunakan pendekatan berikut:

1. Sesuaikan Dimensi Gambar

Jangan menggunakan gambar 4000 piksel jika area tampilnya hanya membutuhkan sekitar 1200 piksel.

2. Gunakan WebP dengan Kualitas yang Seimbang

Ukuran file kecil memang penting, tetapi kualitas visual tetap harus dijaga.

3. Prioritaskan Gambar Utama

Jika gambar berada di area awal halaman dan menjadi elemen penting, optimasi gambar tersebut perlu mendapat perhatian lebih besar karena berpotensi memengaruhi LCP.

4. Gunakan Lazy Loading dengan Tepat

Gambar yang berada jauh di bawah halaman dapat dimuat ketika diperlukan. Namun, jangan sampai gambar utama yang penting justru tertunda karena strategi lazy loading yang salah.

5. Pastikan Ukuran Ruang Gambar Jelas

Langkah ini membantu mengurangi risiko pergeseran tata letak saat gambar selesai dimuat.

6. Uji Hasil Setelah Optimasi

Jangan hanya melihat perubahan format file. Bandingkan kondisi sebelum dan sesudah optimasi menggunakan alat pengujian performa.

Kesalahan yang Sering Dilakukan Saat Mengoptimasi Gambar WebP

Hanya Mengubah Format Tanpa Mengubah Dimensi

Gambar WebP berukuran 5000 piksel tetap bisa menjadi file yang tidak efisien jika halaman hanya membutuhkan gambar berukuran kecil.

Menggunakan Kompresi Terlalu Agresif

Ukuran file memang bisa turun drastis, tetapi gambar dapat kehilangan detail.

Mengoptimasi Semua Gambar dengan Pengaturan yang Sama

Foto, ilustrasi, screenshot, dan gambar dengan banyak teks visual dapat membutuhkan tingkat kualitas yang berbeda.

Mengabaikan Gambar Lama

Website yang sudah berjalan lama mungkin memiliki banyak gambar lama berformat JPG atau PNG. Audit Media Library dapat membantu menentukan gambar mana yang paling layak dioptimasi terlebih dahulu.

Tidak Menguji Hasilnya

Perubahan performa sebaiknya diukur. Website yang berbeda dapat menghasilkan dampak yang berbeda pula tergantung tema, hosting, cache, jumlah gambar, dan konfigurasi lainnya.

Manual atau Otomatis, Mana yang Lebih Cocok?

Gunakan metode manual jika Anda menginginkan kontrol penuh terhadap setiap gambar dan jumlah upload tidak terlalu banyak.

Gunakan metode otomatis jika website rutin menerbitkan banyak konten dan Anda ingin proses optimasi berjalan lebih konsisten.

Yang paling penting, jangan hanya bertanya "apakah gambar saya sudah WebP?". Pertanyaan yang lebih tepat adalah "apakah gambar yang dikirim ke pengunjung sudah memiliki ukuran, dimensi, dan kualitas yang sesuai dengan kebutuhan halaman?"

Kesimpulan

Cara optimasi gambar WebP di WordPress tanpa plugin berbayar dapat dilakukan melalui dua pendekatan utama, yaitu konversi manual sebelum upload dan konversi otomatis menggunakan solusi gratis yang sesuai dengan kemampuan server.

Konversi manual memberikan kontrol kualitas yang lebih besar, sedangkan metode otomatis lebih praktis untuk website dengan banyak gambar dan aktivitas publikasi yang tinggi.

Dari sisi Core Web Vitals, pengurangan ukuran gambar paling berpotensi membantu metrik LCP karena gambar besar sering menjadi bagian penting dari proses pemuatan halaman. Sementara itu, INP dan CLS membutuhkan optimasi lain karena WebP saja tidak secara langsung menyelesaikan masalah responsivitas JavaScript atau pergeseran tata letak.

Jadi, gunakan WebP sebagai bagian dari strategi optimasi yang lebih lengkap. Sesuaikan dimensi gambar, pilih kualitas kompresi yang tepat, pastikan gambar utama dimuat dengan benar, cegah layout bergeser, lalu ukur hasilnya.

Menurut AndriBerbudi, optimasi gambar yang paling efektif bukan sekadar mengejar format terbaru, tetapi mengirimkan gambar dengan kualitas yang tetap baik dan ukuran file yang benar-benar sesuai dengan kebutuhan pengunjung.

FAQ

Apakah WordPress sudah mendukung WebP?

Ya. WordPress mendukung WebP sejak versi 5.8. Dukungan pemrosesan gambar tetap bergantung pada konfigurasi dan kemampuan lingkungan server.

Apakah WebP pasti lebih kecil dari JPG?

Dalam banyak kasus WebP dapat memberikan ukuran file yang lebih kecil dengan kualitas yang sebanding, tetapi hasilnya dapat berbeda tergantung gambar dan pengaturan kompresi.

Apakah WebP otomatis memperbaiki Core Web Vitals?

Tidak otomatis. WebP dapat membantu mengurangi bobot gambar dan berpotensi memperbaiki LCP, tetapi INP dan CLS dipengaruhi banyak faktor lain.

Apakah bisa mengubah gambar lama WordPress menjadi WebP?

Bisa menggunakan proses konversi manual atau solusi plugin yang mendukung konversi gambar yang sudah ada di Media Library. Selalu lakukan backup sebelum melakukan konversi dalam jumlah besar.

Mana yang lebih baik, konversi WebP manual atau otomatis?

Konversi manual cocok untuk kontrol kualitas yang lebih besar, sedangkan otomatis lebih praktis untuk website dengan jumlah upload tinggi.

Apakah semua gambar harus menggunakan WebP?

Tidak harus. Pilih format berdasarkan jenis gambar, kebutuhan visual, kompatibilitas, dan strategi pengiriman aset website.

Apakah ukuran gambar tetap penting meskipun sudah WebP?

Ya. Format WebP tidak menggantikan kebutuhan untuk menggunakan dimensi gambar yang sesuai. Gambar berukuran terlalu besar tetap dapat meningkatkan beban halaman.