Cara Menggunakan Gambar WebP Super Ringan di WordPress – Jika Anda ingin mempercepat situs WordPress Anda, dan mencari cara untuk mengurangi beban loading dari setiap halaman, salah satu cara terbaik dari sekian banyak optimasi adalah mengurangi ukuran gambar Anda.

Karena, rata-rata gambar mengambil hampir seluruh ukuran beban file dari halaman web, jadi perbaikan kecil dari mengurangi ukuran gambar dapat memberikan dampak yang besar pada kecepatan muatan halaman.

WebP adalah format gambar modern yang dapat membantu Anda mengurangi ukuran gambar tanpa mengubah tampilannya. Rata-rata, hasil dari konversi gambar ke WebP dapat mengecilkan ukurannya hingga ~ 25-35% tanpa kehilangan kualitas gambar yang terlihat.

Maka dari itu, di artikel ini saya akan membahas secara mendalam tentang format WebP dan memberikan alasan kenapa Anda harus mulai menggunakan format ini untuk situs web Anda.

Baca : Cara Optimasi SEO pada Gambar untuk Tingkatkan Peringkat Situs

Apa itu WebP?

Jadi, apa itu file WebP? Singkatnya, WebP adalah format gambar yang dikembangkan oleh Google. Misalnya, Anda memiliki format gambar seperti JPEG atau JPG dan PNG, bukan? Nah, WebP adalah format file alternatif untuk gambar web yang super ringan.

WebP difokuskan pada pengiriman file gambar yang sama, hanya dengan ukuran file yang lebih kecil. Dengan mengurangi ukuran file gambar, Namun, gambar Anda tetap akan ditampilkan kepada pengunjung situs Anda dengan kualitas yang sama persis, dan situs web akan memuat 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.

Inilah sebabnya, jika Anda menjalankan situs Anda melalui PageSpeed ​​Insights, salah satu dari banyak rekomendasi adalah Menayangkan gambar dalam format generasi berikutnya seperti WebP:

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

WebP mendukung kompresi lossy dan lossless, jadi pengurangan yang tepat akan bergantung pada apakah Anda menggunakan kompresi lossy atau lossless.

Dengan kompresi WebP lossy, WebP menggunakan sesuatu yang disebut “pengkodean prediktif” untuk menurunkan ukuran file. Pengodean prediktif menggunakan nilai piksel tetangga dalam gambar untuk memprediksi nilai dan kemudian hanya mengenkode perbedaannya. Ini didasarkan pada VP8 key frame encoding.

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

Jika Anda ingin mempelajari teknik kompresi WebP secara mendetail, silahkan baca artikel ini sampai selesai.

Browser Web Mana yang Mendukung WebP?

Agar gambar WebP berfungsi, browser web pengunjung harus 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).
• Edge.
• Opera (desktop dan seluler).

Namun, hal terpenting adalah Safari. Pada saat saya menulis postingan ini, baik versi desktop maupun seluler web browser Safari tidak mendukung gambar WebP. Apple sempat bereksperimen dengan dukungan WebP untuk Safari pada tahun 2016, tetapi tidak ada dorongan lebih lanjut sejak saat itu.

Internet Explorer juga tidak memiliki dukungan WebP (tetapi Edge mendukung WebP karena didasarkan pada Chromium).

Secara total, sekitar 77% pengguna Internet menggunakan browser yang mendukung WebP. Jadi, meskipun memiliki dukungan mayoritas, 23% itu terlalu besar untuk diabaikan (dalam tutorial WebP WordPress di bawah, saya akan menunjukkan kepada Anda bagaimana menanganinya sehingga semua pengunjung Anda dapat melihat gambar WebP dan 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 yang sebanding.

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

• JPEG
• PNG

Kedua tes tersebut didasarkan pada lebih dari 11.000 gambar termasuk:

• Lenna Image
• 24 gambar dari Kodak true color image suite
• 100 gambar dari Tecnick.com
• Sampel acak dari 11.000+ gambar dari Google Image Search

Cara Menggunakan Gambar WebP di WordPress

Karena tidak semua browser mendukung gambar WebP, Anda tidak dapat hanya mengunggah file gambar WebP di Media Library Anda dan langsung menggunakannya di WordPress seperti yang Anda bisa lakukan dengan JPEG dan PNG.

Sekali lagi, 23% orang (termasuk semua pengguna Safari) 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 kemungkinan besar pengunjung akan kecewa dan tidak akan kembali ke situs Anda lagi.

Jangan khawatir, ada solusinya!

Alih-alih mengunggah gambar WebP ke WordPress secara langsung, 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 gunakan versi WebP untuk pengunjung yang menjelajah dengan Chrome, Firefox, dll.
• Tampilkan file JPEG asli kepada pengunjung yang menjelajah dengan Safari dan browser lain yang tidak mendukung WebP.

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

Di bawah, saya akan membahas beberapa plugin WordPress WebP terbaik, yang semuanya bekerja dengan baik

• ShortPixel
• Imagify
• Optimole

ShortPixel

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 secara otomatis mengonversi gambar ke WebP dan menyajikan gambar tersebut ke browser yang mendukung WebP.

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

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

Anda dapat menyebarkan kredit ShortPixel Anda ke situs web tak terbatas – 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 perlu menginstal plugin dari WordPress.org dan menambahkan API key Anda (yang bisa Anda dapatkan dengan mendaftar untuk akun ShortPixel gratis).

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

Untuk mengaktifkan gambar WebP, buka tab Advanced dan:

• Centang kotak untuk WebP Images
• Centang kotak untuk Deliver the WebP versions .. (ini muncul setelah Anda mencentang kotak pertama)
• Pilih tombol radio untuk tag PICTURE (ini muncul setelah mencentang kotak sebelumnya)Biarkan default
• Biarkan default untuk Only via WordPress hooks selection

Kemudian, klik Save Changes Anda.

Imagify

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

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

Dari segi fitur, ShortPixel dan Imagify memiliki banyak kesamaan. Perbedaan terbesar muncul saat Anda melihat harga. Sedangkan ShortPixel menagih Anda berdasarkan gambar tanpa batas ukuran per gambar, Bayangkan menagih Anda berdasarkan ukuran file keseluruhan, tanpa batas gambar.

Jadi jika Anda perlu mengoptimalkan banyak gambar besar, menggunakan ShortPixel mungkin lebih murah. Namun jika Anda perlu mengoptimalkan banyak gambar kecil, menggunakan Imagify mungkin lebih murah.

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 menggunakan ke banyak situs web tanpa batas.

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

Setelah Anda mengaktifkan plugin, Anda dapat menggunakan kotak General Settings untuk memilih tingkat kompresi Anda.

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

• Centang kotak untuk Create webp versions of images
• Centang kotak untuk Display images in webp format
• Pilih tombol radio untuk menggunakan tag picture

Optimole

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

• Itu dapat menyajikan gambar Anda melalui CDN nya sendiri (didukung oleh Amazon CloudFront).
• 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 dengan resolusi lebih rendah daripada seseorang yang menjelajah di layar Retina.

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

Sebagai bagian dari pengoptimalan gambar real time ini, Optimole juga dapat mengirimkan gambar WebP kepada pengunjung dengan browser yang mendukungnya.

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

Untuk memulai, Anda perlu menginstal plugin dari WordPress.org dan mengaktifkannya dengan API key (yang bisa Anda dapatkan dengan mendaftar untuk mendapatkan akun Optimole gratis).

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

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

Karena Optimole menangani pengiriman gambar Anda melalui CDN-nya sendiri, tidak perlu menyiapkan aturan Nginx apa pun di hosting terbaik Anda.

Baca : Optimasi Gambar dan PDF Agar Lebih Ringan dengan ImageRecycle

Kesimpulan

Gambar situs WordPress Anda merupakan bagian besar dari ukuran file halaman rata-rata. Jika Anda dapat menemukan cara untuk mengurangi ukuran gambar Anda, Anda dapat mempercepat situs Anda tanpa mengubah pengalaman pengunjung Anda.

WebP adalah format gambar modern yang dapat menawarkan pengurangan ukuran file ~ 25% vs file JPEG atau PNG komparatif.

Sebagian besar browser modern mendukung WebP dan sekitar 77% pengguna Internet memiliki browser yang mendukung WebP. Namun, beberapa browser, terutama Safari, masih tidak menawarkan dukungan WebP, jadi Anda tidak dapat menampilkan gambar WebP ke semua pengunjung.

Untuk mengatasi masalah ini, Anda dapat menggunakan plugin WordPress yang mengonversi gambar menjadi WebP dan menyajikan versi WebP kepada pengunjung yang browsernya mendukung format ini, sambil menggunakan gambar asli untuk pengunjung yang browsernya tidak mendukungnya.

Tiga plugin yang dapat membantu Anda melakukan ini adalah:

• ShortPixel.
• Imagify.
• Optimole.

Untuk taktik lainnya dalam mengoptimalkan gambar, lihat panduan lengkap saya untuk mengoptimalkan gambar untuk kinerja web.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis