Kalau kamu punya website berbasis WordPress, apalagi jenis web sekolah atau portal berita, pasti pernah ketemu masalah klasik, foto yang di-upload ukurannya kegedean. Niatnya cuma mau pasang dokumentasi kegiatan atau gambar berita, tapi efeknya malah bikin website jadi lemot.
Saya memang menerapkan konsep ini di website saya, momenpedia.com, sebuah platform undangan digital berbasis SAAS. Di sana user bisa buat undangan sendiri sehingga bebas upload foto sendiri untuk kebutuhan undangan.
Dari pengalaman itulah saya sadar, masalah ukuran gambar itu nggak cuma terjadi di platform saya, tapi juga sangat umum di website bahkan web berbasis WordPress seperti beberapa web sekolah yang saya handle.
Masalah yang Sering Terjadi di Web Saya
Kebanyakan user upload foto langsung dari HP/Kamera/PC tanpa di kompres dulu. Hasilnya:
- Ukuran foto 2–5 MB per gambar
- Dalam satu halaman bisa ada banyak foto
- Server jadi berat
- Loading website terasa lambat
Di web sekolah yang saya handle kondisinya mirip. Foto kegiatan, liputan acara, atau galeri biasanya di-upload apa adanya oleh admin. Lama-lama:
- Storage cepat penuh
- Skor PageSpeed turun
- Pengunjung kurang nyaman karena loading lama
Solusi Paling Masuk Akal adalah WebP
Dari pengalaman saya, format WebP itu solusi paling realistis. Ukurannya jauh lebih kecil dibanding JPG atau PNG tapi kualitas visualnya tetap terjaga.
Gambaran sederhananya:
- JPG 1 MB → jadi WebP sekitar 200–300 KB
- PNG 800 KB → jadi WebP sekitar 150 KB
Artinya tanpa minta user ribet kompres manual, performa website bisa terjaga.
Cara Kerjanya
Alurnya simpel:
- User upload foto seperti biasa
- Code otomatis mengubah ke WebP
- Yang ditampilkan di website versi ringan
- Semua berjalan di belakang layar
Jadi cocok banget untuk:
- Website sekolah
- Portal berita
- Blog komunitas
- Website instansi dengan banyak admin
Kode Auto Convert ke WebP
Buat pengguna website berbasis WordPress, kamu bisa pakai cara ini. Kodenya bisa dipasang di:
- file functions.php tema, atau
- plugin Code Snippets (lebih aman)
/**
* This snippet automatically converts Images to WebP
* Source https://key2blogging.com
*/
add_filter('wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp');
function wpturbo_handle_upload_convert_to_webp($upload) {
if (in_array($upload['type'], ['image/jpeg', 'image/png', 'image/gif'])) {
$file_path = $upload['file'];
if (extension_loaded('imagick') || extension_loaded('gd')) {
$image_editor = wp_get_image_editor($file_path);
if (!is_wp_error($image_editor)) {
// Set WebP quality (adjust as needed)
$quality = 80; // Adjust between 0 (low) to 100 (high)
$image_editor->set_quality($quality); // Set quality for WebP conversion
$file_info = pathinfo($file_path);
$dirname = $file_info['dirname'];
$filename = $file_info['filename'];
$def_filename = wp_unique_filename($dirname, $filename . '.webp');
$new_file_path = $dirname . '/' . $def_filename;
$saved_image = $image_editor->save($new_file_path, 'image/webp');
if (!is_wp_error($saved_image) && file_exists($saved_image['path'])) {
// Update the upload data to use the WebP image
$upload['file'] = $saved_image['path'];
$upload['url'] = str_replace(basename($upload['url']), basename($saved_image['path']), $upload['url']);
$upload['type'] = 'image/webp';
// Optionally delete the original file
@unlink($file_path);
}
}
}
}
return $upload;
}Begitu kode ini aktif, setiap foto JPG atau PNG yang di-upload di akan otomatis berubah jadi WebP. User tetap upload seperti biasa tanpa perlu mikirin ukuran.
Kenapa Wajib Dipakai?
Berdasarkan pengalaman saya mengelola Momenpedia dan lihat banyak website WordPress, cara ini membantu banget:
- Storage lebih hemat
- Website lebih cepat
- Server lebih ringan
- User nggak perlu kompres manual
Intinya, ini solusi praktis tanpa perlu mengubah kebiasaan pengguna.
Semoga sharing ini bermanfaat buat kamu yang mengelola website berbasis WordPress, terutama untuk web sekolah atau berita yang tiap hari ketemu urusan upload foto 👍