11 Feb, 2023
3 menit

Daftar isi

Cara Upload WEBP di WordPress — Apabila kalian ingin meningkatkan loading website kalian yang kebanyakan isinya menggunakan gambar, maka kalian mungkin perlu untuk memulai menggunakan gambar dengan formati WEBP dibandingkan menggunakan format PNG, JPG, JPEG, atau GIF.

Kenapa perlu menggunakan format WEBP?

Ketika menggunakan gambar dengan format WEBP, kalian bisa menggunakan gambar dengan kualitas yang sama dengan format PNG, JPG, dan JPEG, namun dengan ukuran yang lebih kecil. Dengan format WEBP kalian bisa mengurangi ukuran file hingga 1.42x lebih rendah dibandingkan JPEG, 1.70x lebih rendah dibandingkan PNG, dan 1.75x lebih rendah dibandingkan AVIF. Berikut adalah contoh gambar dengan format PNG dan setelah di kompress menjadi WEBP. Pada gambar ini, saya menggunakan sebuah gambar JPG dengan ukuran 1.34MB dengan dimensi 3840×2400, resolusi 96 DPI.

Gambar dengan format JPG
Gambar dengan format WEBP

Seperti yang terlihat, kedua gambar diatas tidak memiliki perbedaan. Namun dari segi ukuran, kedua gambar diatas memiliki perbedaan yang sangat signifikan, dimana gambar JPG memiliki ukuran 1.34 MB. sedangkan gambar WEBP memiliki ukuran 777KB.

Cara Upload WEBP di WordPress

Secara default, wordpress akan mencegah website kalian untuk upload gambar dengan format webp, sehingga untuk upload gambar WEBP, kalian perlu menggunakan plugin, atau menambahkan baris kode tambahan supaya kalian bisa mengupload gambar dengan format WEBP.

Prasyarat Upload Gambar WEBP

Gambar yang sudah di ubah formatnya menjadi WEBP
Website dengan CMS WordPress
Akses website sebagai admin
Tidak menggunakan theme Twenty-Twenty Two, Twenty-Twenty Three, dan seterusnya (Karena lebih sulit untuk mengubah file theme, dan belum dicoba)
Menggunakan Child Theme (Opsional)

Tambahkan Kode Filter

Cara pertama yang perlu kalian lakukan adalah menambahkan kode supaya WordPress dapat menerima file WEBP dan menampilkan preview dari gambar tersebut.

Login ke dashboard WordPress kalian, defaultnya namadomain.com/wp-login.php atau namadomain.com/wp-admin/
Buka menu Appareance > Theme File Editor
Cari dan edit file function.php

Tambahkan baris kode berikut di baris terakhir file function.php

/* Mengizinkan Upload File WEBP */
function webp_upload_mimes( $existing_mimes ) {
    // Menambahkan webp ke daftar mime
    $existing_mimes['webp'] = 'image/webp';
	// Mengirimnkan array kembali ke fungsi yang sudah ditambahkan mime webp
    return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

//** * Menambahkan preview untuk gambar dengan format WEBP.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );
        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Simpan perubahan theme dengan klik tombol Update File
Sekarang kalian sudah bisa mengupload file webp.

Bagaimana Cara Mengubah Gambar Menjadi WEBP?

Untuk mengubah gambar menjadi WEBP, kalian bisa menggunakan beragam tools yang saat ini sudah tersedia secara online. Berikut adalah daftar layanan yang dapat membantu kalian mengubah gambar menjadi WEBP sebelum gambar tersebut di upload ke WordPress kalian.

Was this helpful?

0 / 0