Cara Menggunakan Gambar WebP di WordPress (Mengecilkan Ukuran File Gambar hingga 35%)

Jika Anda ingin mempercepat situs WordPress Anda, mengurangi ukuran file gambar Anda menawarkan pengembalian investasi yang signifikan. Rata-rata, gambar mencapai sekitar setengah dari ukuran file halaman web, sehingga perbaikan kecil pun dapat menghasilkan hasil yang sangat besar. WebP dapat sangat membantu Anda dalam hal itu!

WebP adalah format gambar modern yang dapat membantu Anda mengurangi ukuran gambar tanpa mengubah tampilannya. Rata-rata, mempelajari cara mengonversi gambar ke WebP dapat mengecilkan ukuran file hingga ~25-35% tanpa kehilangan kualitas yang nyata.

Sebagian besar browser modern dan WordPress 5.8+ mendukung WebP di luar kotak. Dalam artikel ini, kami akan mempelajari lebih dalam format gambar baru yang menarik ini dan menunjukkan kepada Anda bagaimana Anda dapat memanfaatkan kehebatannya.

Siap? Mari kita mulai!

Apa itu WebP?

Jadi, apa itu file WebP? Singkatnya, WebP adalah format gambar yang dikembangkan oleh Google untuk mengoptimalkan gambar lebih baik daripada format gambar populer (pada waktu itu). Misalnya, Anda memiliki format gambar seperti JPEG atau JPG dan PNG.

Catatan: Lihat bagaimana berbagai jenis file gambar dapat memengaruhi kecepatan situs web Anda.

WebP berfokus pada pengiriman file gambar yang sama, hanya dengan ukuran file yang lebih kecil. Dengan memperkecil ukuran file gambar, Anda tetap dapat memberikan pengalaman yang sama kepada pengunjung situs web Anda, tetapi situs Anda akan dimuat lebih cepat.

Misalnya, dalam studi kompresi WebP Google, Google menemukan bahwa file gambar WebP rata-rata:

• 25-34% lebih kecil dari gambar JPEG yang sebanding.
• 26% lebih kecil dari gambar PNG yang sebanding.

Itulah alasan mengapa jika Anda menjalankan situs Anda melalui PageSpeed ​​Insights, salah satu dari banyak rekomendasi adalah Sajikan gambar dalam format generasi berikutnya seperti WebP :

Jadi, bagaimana format WebP Google mencapai pengurangan ukuran file ini?

Pertama, ini mendukung kompresi lossy dan lossless, jadi pengurangan yang tepat akan tergantung pada apakah Anda menggunakan kompresi lossy atau lossless.

Dengan kompresi lossy, WebP menggunakan sesuatu yang disebut "pengkodean prediktif" untuk menurunkan ukuran file. Pengkodean prediktif menggunakan nilai piksel tetangga dalam gambar untuk memprediksi nilai dan kemudian hanya mengkodekan perbedaannya. Ini didasarkan pada pengkodean bingkai kunci VP8.

WebP lossless menggunakan serangkaian metode yang jauh lebih rumit yang dikembangkan oleh tim WebP.

Jika Anda ingin mempelajari tentang teknik kompresi WebP secara mendetail, artikel ini adalah titik awal yang baik.

Peramban Web Mana yang Mendukung WebP?

Agar gambar WebP berfungsi, browser web pengunjung perlu mendukungnya. Sayangnya, meskipun dukungan browser telah berkembang pesat, kompatibilitas WebP masih belum universal .

Gambar WebP didukung oleh browser populer seperti:

• Chrome ( desktop dan seluler )
• Firefox ( desktop dan seluler )
• Microsoft Edge
• iOS dan macOS Safari ( khusus macOS 11 Big Sur dan yang lebih baru )
• Opera ( desktop dan seluler )

Pada saat kami menulis posting ini, Safari hanya mendukung gambar WebP sebagian.

Internet Explorer juga tidak memiliki dukungan WebP (tetapi Edge mendukung WebP karena berbasis Chromium). Namun, penggunaan IE telah menyusut menjadi kurang dari 1% dari total pengguna internet. Itu keuntungan bagi semua orang di web!

Secara total, sekitar 95% pengguna Internet menggunakan browser yang mendukung WebP. Jadi meskipun memiliki dukungan mayoritas, 5% itu adalah rintangan kecil, terutama ketika itu adalah pengguna Safari di versi macOS yang lebih lama. Dalam tutorial WebP WordPress kami di bawah ini, kami akan menunjukkan kepada Anda bagaimana menangani ini sehingga semua pengunjung Anda memiliki pengalaman yang luar biasa.

Perbandingan Ukuran WebP vs JPG vs PNG

Menurut pengujian Google, gambar WebP adalah:

• 25-34% lebih kecil dari gambar JPEG yang sebanding.
• 26% lebih kecil dari gambar PNG serupa.

Jika Anda ingin mempelajari lebih lanjut tentang metodologi Google, Anda dapat menemukan tautan langsung ke hasil lengkap di bawah ini:

• JPEG
• PNG

Kedua tes didasarkan pada lebih dari 11.000 gambar, termasuk:

• Gambar Lenna yang terkenal
• 24 gambar dari rangkaian gambar warna asli Kodak
• 100 gambar dari Tecnick.com
• Sampel acak dari 11.000+ gambar dari Google Penelusuran Gambar

Cara Menggunakan Gambar WebP di WordPress

Dimulai dengan WordPress 5.8, Anda dapat menggunakan format gambar WebP dengan cara yang sama seperti format JPEG, PNG, dan GIF. Cukup unggah gambar Anda ke Perpustakaan Media dan sertakan dalam konten Anda. Karena WordPress 5.8+ mendukung format WebP secara default, Anda tidak perlu menginstal plugin pihak ketiga untuk mengunggah gambar WebP. Itu sudah cukup untuk sebagian besar kasus penggunaan umum.

Untuk segera memulai, Anda dapat merujuk ke panduan singkat kami tentang penggunaan gambar WebP di WordPress 5.8+. Kami sarankan Anda membaca peringatan tentang dukungan WebP di WordPress.

Namun, sekitar 5% orang (terutama pengguna Safari di macOS lama) menggunakan browser web yang tidak mendukung WebP. Jika Anda mengonversi gambar WebP dan menggunakannya langsung di konten Anda, pengunjung tersebut tidak akan dapat melihat gambar Anda, yang akan merusak pengalaman menjelajah mereka.

Selain itu, menghasilkan gambar WebP tidak semudah mendapatkan gambar JPG/JPEG, yang merupakan format file gambar default di sebagian besar kamera, ponsel cerdas, dan perpustakaan gambar online. WordPress tidak mendukung konversi gambar otomatis ke format WebP (belum!).

Jangan khawatir! Ada solusi.

Anda dapat menggunakan plugin WordPress yang mengonversi gambar asli Anda ke format WebP dan juga menyediakan gambar asli sebagai cadangan jika browser pengunjung tidak mendukung WebP.

Misalnya, jika Anda mengunggah file JPEG ke situs Anda, plugin akan:

• Konversikan file JPEG ke WebP dan sajikan versi WebP untuk Chrome, Firefox, Edge, dll.
• Tampilkan file JPEG asli kepada pengunjung yang menjelajah dengan Safari (pada versi macOS yang lebih lama) dan browser lain yang tidak mendukung WebP.

Dengan begitu, semua orang dapat melihat gambar Anda, dan semua orang mendapatkan pengalaman tercepat.

Di bawah ini, kita akan membahas beberapa plugin WordPress WebP terbaik , yang semuanya bekerja dengan Kinsta dan Kinsta CDN.

Piksel Pendek

ShortPixel adalah plugin pengoptimalan gambar WordPress populer yang dapat membantu Anda secara otomatis mengubah ukuran dan mengompres gambar yang Anda unggah ke situs WordPress Anda.

Sebagai bagian dari daftar fiturnya, ShortPixel juga dapat membantu Anda mengonversi gambar ke WebP secara otomatis dan menyajikan gambar tersebut ke browser yang mendukungnya.

ShortPixel memiliki paket gratis terbatas yang memungkinkan Anda mengoptimalkan ~100 gambar per bulan secara gratis. Paket berbayar mulai dari $4,99 per bulan hingga 5.000 gambar/kredit atau $9,99 satu kali untuk paket 10.000 kredit.

ShortPixel menghitung setiap ukuran gambar WordPress yang Anda optimalkan sebagai kredit. Jadi jika Anda ingin mengoptimalkan beberapa ukuran thumbnail gambar, satu gambar mungkin bisa menggunakan banyak kredit. Tidak ada batasan ukuran file untuk gambar.

Anda dapat menyebarkan kredit ShortPixel Anda ke situs web tanpa batas – tidak ada batasan per situs ( dan semua situs web Anda dapat menggunakan akun ShortPixel yang sama ).

Untuk menggunakan ShortPixel untuk menyajikan gambar WebP di WordPress, Anda harus menginstal plugin dari WordPress.org dan menambahkan kunci API Anda ( yang bisa Anda dapatkan dengan mendaftar untuk akun ShortPixel gratis ).

Di tab Umum , Anda dapat mengatur pengaturan dasar tentang cara kerja pengoptimalan gambar. Misalnya, tingkat kompresi apa yang digunakan dan apakah akan mengubah ukuran gambar atau tidak:

Untuk mengaktifkan gambar WebP, buka tab Lanjutan dan:

1. Centang kotak untuk Gambar WebP
2. Centang kotak untuk Memberikan versi WebP… (ini muncul setelah Anda mencentang kotak pertama)
3. Pilih tombol radio untuk Menggunakan sintaks tag <PICTURE> (ini muncul setelah mencentang kotak sebelumnya)
4. Biarkan default Hanya melalui pemilihan kait WordPress

Kemudian, simpan perubahan Anda.

Jika Anda menghosting di Kinsta, ShortPixel akan memberi Anda pesan peringatan tentang mengonfigurasi file konfigurasi server di Nginx. Untuk mengonfigurasi pengaturan ini, Anda dapat menghubungi dukungan Kinsta, dan kami akan dengan senang hati menyiapkan konfigurasi server untuk Anda.

Bayangkan

Imagify adalah plugin pengoptimalan gambar populer dari pengembang yang sama dengan WP Rocket (salah satu dari sedikit plugin caching yang bekerja dengan Kinsta).

Itu dapat secara otomatis mengompresi dan mengubah ukuran gambar yang Anda unggah ke situs WordPress Anda. Kemudian, ini juga dapat membantu Anda mengonversinya ke WebP dan menyajikan versi tersebut kepada pengunjung dengan browser yang mendukungnya.

Dalam hal fitur, ShortPixel dan Imagify memiliki banyak kesamaan. Perbedaan paling signifikan datang ketika Anda melihat harga. Sementara ShortPixel menagih Anda berdasarkan gambar tanpa batas ukuran per gambar, Imagify membebankan Anda berdasarkan ukuran file keseluruhan, tanpa batas gambar.

Jadi jika Anda perlu mengoptimalkan banyak gambar besar, pendekatan ShortPixel mungkin lebih murah. Tetapi jika Anda perlu mengoptimalkan banyak gambar kecil, pendekatan Imagify mungkin lebih terjangkau.

Imagify memiliki tingkat gratis terbatas yang memungkinkan pengoptimalan 25 MB per bulan. Setelah itu, paket berbayar mulai dari $4,99 per bulan hingga 1 GB atau $9,99 untuk kredit satu kali sebesar 1 GB.

Seperti ShortPixel, Anda dapat menyebarkan batas akun Anda ke situs web tanpa batas.

Untuk menggunakan Imagify untuk mengirimkan gambar WordPress WebP, Anda harus menginstal plugin dari WordPress.org dan menambahkan kunci API Anda untuk memulai.

Setelah Anda mengaktifkan plugin, Anda dapat menggunakan kotak Pengaturan Umum untuk memilih tingkat kompresi Anda.

Untuk mengaktifkan gambar WebP, gulir ke bawah ke bagian Pengoptimalan dan temukan bagian Format WebP :

1. Centang kotak untuk Membuat gambar versi webp
2. Centang kotak untuk Menampilkan gambar dalam format webp…
3. Pilih tombol radio untuk menggunakan tag <picture>

Seperti halnya ShortPixel, jika Anda menghosting di Kinsta, Anda harus membuat aturan Nginx untuk ember cache WebP (hubungi dukungan Kinsta).

optimol

Optimole adalah plugin pengoptimalan gambar WordPress yang beroperasi sedikit berbeda dari Imagify dan ShortPixel. Optimole dapat secara otomatis mengompresi dan mengubah ukuran gambar Anda. Namun, ia juga memiliki dua fitur penting lainnya:

1. Itu dapat menyajikan gambar Anda melalui CDN-nya (didukung oleh Amazon CloudFront).
2. Ini menawarkan gambar adaptif real-time dimana Optimole akan memberikan gambar berukuran optimal untuk setiap pengunjung. Misalnya, seseorang yang menjelajah di layar kecil akan mendapatkan gambar beresolusi lebih rendah daripada seseorang yang menjelajah di layar Retina.

Pendekatan ini mirip dengan layanan optimasi/manipulasi real-time lainnya seperti Cloudinary, imgix, KeyCDN Image Processing, dll.

Optimole juga dapat mengirimkan gambar WebP kepada pengunjung dengan browser yang mendukungnya sebagai bagian dari pengoptimalan gambar waktu nyata ini.

Optimole memiliki paket gratis terbatas yang dapat menangani penayangan gambar ke sekitar ~5.000 pengunjung per bulan. Setelah itu, paket berbayar mulai dari $19 per bulan untuk ~25.000 pengunjung.

Untuk memulai, Anda harus menginstal plugin dari WordPress.org dan mengaktifkannya dengan kunci API ( yang bisa Anda dapatkan dengan mendaftar akun Optimole gratis ).

Setelah Anda melakukannya, Optimole akan mulai secara otomatis mengoptimalkan gambar Anda dan mengirimkannya melalui CDN-nya. Dukungan WebP aktif secara default, jadi tidak perlu mengaktifkannya secara manual.

Untuk mengonfigurasi pengaturan lain, seperti tingkat kompresi dan perilaku penskalaan, Anda dapat membuka Media → Optimole → Settings :

Karena Optimole menangani pengiriman gambar Anda melalui CDN-nya, tidak perlu menyiapkan aturan Nginx apa pun jika Anda menghosting di Kinsta.

Ringkasan

Gambar situs WordPress Anda merupakan bagian besar dari ukuran file rata-rata halaman. Jika Anda dapat menemukan cara untuk mengurangi ukuran gambar Anda, Anda dapat mempercepat situs Anda tanpa mengganggu pengalaman pengguna. WebP adalah format gambar modern yang melakukan hal itu dengan menawarkan pengurangan ~ 25% dalam ukuran file vs file JPEG atau PNG komparatif.

Sekitar 95% pengguna Internet sudah menggunakan browser yang mendukung WebP. Versi WordPress 5.8+ juga mendukung WebP di luar kotak sekarang. Jadi tidak ada alasan Anda tidak menggunakannya.

Namun, sebagian kecil browser, terutama Safari pada versi macOS yang lebih lama, masih tidak menawarkan dukungan WebP. Oleh karena itu, Anda belum dapat menyajikan gambar WebP kepada semua pengunjung. Untuk mengatasi masalah ini, Anda dapat menggunakan plugin WordPress yang mengonversi gambar ke WebP dan menyajikan versi WebP kepada pengunjung yang browsernya mendukungnya saat menggunakan gambar asli kepada pengunjung yang browsernya tidak mendukungnya.

Untuk lebih banyak taktik dalam mengoptimalkan gambar, lihat panduan lengkap kami untuk mengoptimalkan gambar untuk kinerja web.

Jika Anda memiliki pertanyaan tentang penggunaan WebP di WordPress, silakan tanyakan kepada kami di komentar di bawah!