Apa Itu WebP Dan Cara Menggunakan WebP Di WordPress

Format gambar yang populer seperti JPEG atau PNG mungkin kamu sering dengar.

Kira-kira dengan format gambar yang bernama WebP sudah pernah pakai belum?

Kalau kamu sadar, sebagian besar gambar yang ada di Situstarget ini sudah menggunakan format WebP loh!

Dengan menggunakan format gambar ini kamu bisa mendapatkan resolusi gambar yang tinggi, dengan ukuran file yang kecil.

Kok bisa? Penasaran? Baca artikel ini sampai tuntas.

Apa Itu WebP?

WebP adalah format gambar yang dikembangkan oleh Google pada tahun 2010.

Format gambar ini dirancang untuk menghasilkan gambar dengan ukuran yang lebih kecil, tanpa mengurangi kualitas gambar.

WebP menggunakan teknologi kompresi yang lebih baik dibandingkan dengan format gambar JPEG atau PNG.

Sehingga pengguna bisa memuat halaman web lebih cepat dan mempertahankan kualitas gambar yang baik.

Kelebihan Menggunakan WebP

Setidaknya ada tiga kelebihan dari WebP dibandingkan format gambar JPEG maupun PNG, yaitu:

1. Ukuran yang Lebih Kecil

Seperti yang telah disebutkan sebelumnya, salah satu kelebihan utama menggunakan WebP adalah ukuran file yang lebih kecil.

Gambar dengan format WebP dapat menghasilkan ukuran file yang lebih kecil dibandingkan dengan format gambar lainnya seperti JPEG atau PNG.

Dengan cara ini, pengunjung web dapat mengakses halaman WordPress kamu lebih cepat dan menghemat ruang penyimpanan di server.

2. Kualitas Gambar yang Lebih Baik

Meskipun ukuran file lebih kecil, format gambar WebP mampu mempertahankan kualitas gambar dengan baik.

Teknologi kompresi yang digunakan dalam WebP memungkinkan gambar dengan ukuran file yang lebih kecil tetapi dengan kualitas gambar yang sama seperti format gambar lainnya.

Gambar di atas adalah perbandingan antara PNG vs WebP.

Panah kanan adalah after kompresi dan yang gambar kiri adalah before atau gambar aslinya.

Kamu bisa hemat ruang penyimpanan server namun tanpa mengorbankan kualitas gambar dengan menggunakan WebP.

3. Dukungan Penuh oleh Browser

Sebagian besar browser modern sudah mendukung format gambar WebP, termasuk Google Chrome, Mozilla Firefox, dan Microsoft Edge.

Pengguna dapat menikmati proses loading situs web yang lebih cepat dengan kualitas gambar yang lebih baik tanpa memerlukan tambahan ekstensi atau plugin.

Kekurangan Menggunakan WebP

Tentu saja ada kelebihan, ada juga kekurangan dari WebP yang perlu kamu ketahui, seperti:

1. Tidak Dapat Dibuka oleh Semua Browser

Meskipun sebagian besar browser modern mendukung format gambar WebP, beberapa browser yang sudah out-of-date mungkin tidak mendukung WebP.

Hal ini dapat menyebabkan masalah dengan tampilan gambar di halaman web, terutama bagi pengguna yang masih menggunakan browser yang tua (tidak pernah diperbarui).

Di bawah ini adalah daftar versi browser yang mendukung format WebP.

2. Kompatibilitas yang Terbatas dengan Aplikasi

Selain browser, beberapa aplikasi mungkin tidak mendukung format gambar WebP.

Jika kamu menggunakan aplikasi yang tidak mendukung format gambar WebP, kamu mungkin perlu mengonversi gambar tersebut ke format lain seperti JPEG atau PNG.

Saya cek juga beberapa sosial media, ada yang tidak mendukung gambar WebP jika dijadikan featured image.

URL yang dibagikan biasanya ada preview-nya dengan menampilkan featured image, nah ini ada yang tidak muncul.

Cara Menggunakan Gambar WebP di WordPress

Pada versi WordPress 5.8 ke atas, kamu sudah bisa mengunggah file WebP ke media putaka secara langsung.

Saya ingat saat WordPress belum mendukung WebP dulu harus tweaking file functions.php.

Tujuannya agar ekstensi .WebP bisa untuk diunggah ke dalam media pustaka WordPress.

Karena tidak semua ekstensi bisa diunggah ke media pustaka WordPress karena alasan keamanan.

Untuk mengizinkannya kamu perlu menambahkan kode berikut ini ke dalam file functions.php, cara ini khusus WordPress jadul ya.

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

Setelah mengizinkan untuk mengupload file dengan ekstensi .WebP ke media pustaka WordPress.

Kamu juga bisa menambahkan kode berikut untuk mengaktifkan fitur preview/thumbnail di Media Pustaka WordPress.

//** * Enable preview / thumbnail for webp image files.*/
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);

Cara yang saya rekomendasikan yaitu dengan cara manual tanpa plugin.

Kamu bisa optimasi gambar di komputer lokal dahulu baru unggah gambar WebP ke server.

Tutorialnya bisa kamu lihat di artikel di bawah ini.

Kesimpulan

WebP adalah format gambar yang dirancang untuk menghasilkan gambar dengan ukuran file yang lebih kecil, tanpa mengurangi kualitas gambar.

Penggunaan gambar WebP dapat membantu mempercepat waktu pemuatan halaman web dan memberikan pengalaman yang lebih baik untuk pengguna.

Kamu juga perlu memperhatikan kekurangan dari format gambar ini, seperti tidak semua browser dan aplikasi mendukung format gambar WebP.

Frequently Ask Questions (FAQ)