Cara Melayani Gambar WebP alih-alih JPG atau PNG dengan WordPress

Google duduk di puncak rantai makanan internet. Perusahaan mempengaruhi (atau mendikte) banyak hal yang terjadi secara online. Dan format gambar baru mereka, WebP, melanjutkan tren itu. Dengan kecepatan pemuatan halaman yang semakin penting (terutama karena Google Page Rank), pengembang dan desainer melihat kompresi gambar sebagai cara termudah untuk mengurangi waktu pemuatan. Gambar WebP Google berukuran ~30% lebih kecil dari gambar JPG atau PNG biasa dan mempertahankan kualitas yang setara. Dan yang terbaik, Anda tidak perlu khawatir mengonversi gambar Anda ke WebP secara manual.

Pada artikel ini kami akan menunjukkan cara menggunakan format gambar baru ini dengan WordPress, meskipun belum didukung secara default.

Mari kita lakukan.

Berlangganan Saluran Youtube Kami

Menggunakan Optimole untuk Melayani WebP di WordPress

WebP, sebagai format gambar, tidak didukung secara default di WordPress. Anda dapat mengunggah gambar .webp, tetapi seperti halnya file SVG, Anda akan mendapatkan pesan kesalahan. Dan lagi, seperti menggunakan file SVG dengan WordPress, ada solusi mudah melalui plugin untuk memperbesar situs WP Anda.

Dari layanan WebP yang kami coba, favorit kami adalah Optimole. Kami memiliki keberuntungan terbaik dengan membuatnya bekerja dengan sedikit penyesuaian, jadi kami ingin memandu Anda melalui cara mengaturnya dan membuat instalasi WordPress Anda kompatibel dengan WebP semudah mungkin.

Pertama, tentu saja, Anda ingin mengunduh dan menginstal plugin itu sendiri. Itu ada di repo WP.org, dan benar-benar gratis. Seperti layanan berbasis API yang mendukungnya (sampai titik tertentu). Meskipun dimungkinkan untuk mengonversi gambar tradisional ke WebP dengan cepat menggunakan PHP, tidak setiap hosting memberikan izin itu kepada server Anda. Jika Anda memiliki izin itu, Anda juga dapat melihat ke plugin WebP Express . Anda mendapatkan banyak kontrol dengannya, tetapi ini adalah salah satu yang membutuhkan lebih banyak penyesuaian agar dapat bekerja dengan lancar.

Setelah Anda menginstal dan mengaktifkan Optimole di situs WordPress Anda, Anda akan menemukan opsi menu baru di Media – Optimole .

Kunci API Optimole Anda

Sebelum Anda dapat mengakses pengaturan atau konfigurasi apa pun, Anda harus memiliki akun Optimole. Jika Anda sudah menyiapkannya, Anda dapat mengklik tombol Saya Sudah Memiliki Kunci API . Jika tidak, Daftar & Email API Key . Akun dasar untuk kunci API gratis, dan Anda mendapatkan sekitar 5.000 kunjungan di tingkat itu. Jika Anda membutuhkan lebih dari itu, ada tingkatan harga yang tersedia.

Optimole mendefinisikan kunjungan sebagai “ siapa saja yang mengunjungi situs Anda sekali [. . .] Setiap pengguna hanya dihitung sekali. Tidak masalah apa yang mereka lakukan di situs Anda, berapa banyak gambar yang mereka unduh, atau berapa banyak halaman yang mereka kunjungi; itu hanya satu pengguna. Jika mereka meninggalkan situs Anda dan kembali pada hari yang sama, mereka tetap hanya satu pengguna. ”

Setelah Anda kehabisan kunjungan terukur, hanya gambar WebP yang berhenti ditayangkan. Gambar Anda sendiri tidak. Anda akan menemukan kunci API di dasbor Optimole Anda di bagian paling atas.

Cukup tempelkan kembali di dasbor WordPress Anda, dan Anda akan siap untuk mulai menyajikan gambar WebP dengan WordPress.

Dasbor WordPress Optimole Anda

Di dasbor WordPress Anda, Anda mendapatkan beberapa informasi dasar tentang pengoptimalan WebP Anda. Ini memungkinkan Anda memecahkan masalah dan mengukur seberapa sukses percepatan sebenarnya. Dengan begitu Anda bisa masuk dan mengubah berbagai pengaturan.

Pertama, Anda melihat akun yang dilampirkan ke API, dan di bagian bawah layar, plugin menampilkan gambar yang paling baru dioptimalkan. Anda dapat melihat seberapa kecil gambar WebP yang disajikan dari gambar asli yang Anda unggah ke WordPress.

Lalu ada tab Kemungkinan Masalah di bagian paling atas. Tidak ada yang suka melihat tab disorot, tetapi kita semua juga perlu melihat konflik apa yang mungkin muncul juga.

Masalah utama yang kami hadapi adalah dengan kompresi gambar dan plugin pengiriman lainnya. Seperti yang dapat Anda lihat pada gambar di atas, plugin Jetpack bekerja dengan cara yang mirip dengan Optimole melalui Photon APIT, sehingga mereka dapat menabrak kepala. Bagi kami, ini dimanifestasikan sebagai tidak ada gambar yang dikirimkan kepada pengunjung sama sekali. Kami tidak memiliki masalah dengan layanan kompresi lain seperti TinyPNG atau Smush.

Menggunakan Dasbor

Jika Anda menginginkan informasi yang lebih detail tentang kinerja situs Anda dengan WebP, dasbor Optimole eksternal memiliki info tersebut untuk Anda.

Alih-alih hanya 9,5x lebih kecil, Anda dapat melihat ukuran file sebenarnya yang telah disajikan. Serta yang file sendiri selama periode 30 hari.

Anda juga dapat mengatur Tanda Air di dasbor Optimole (atau WP) sehingga ketika seseorang disajikan WebP dari situs WordPress Anda, mereka akan membuat logo Anda menyala secara otomatis. Ini adalah proses yang sederhana, dan Anda mendapatkan kontrol atas opacity, lokasi, dan sebagainya.

Anda pada dasarnya dapat melakukan hal yang sama dari kedua dasbor. Baik di bawah tab Pengaturan di WordPress, atau dengan mengunjungi tanda hubung eksternal di Optimole. Itu sepenuhnya tergantung pada apa yang paling nyaman bagi Anda, serta tingkat data yang Anda butuhkan pada waktu tertentu.

Selain itu, Anda akan dapat mengontrol tingkat kompresi, pemuatan lambat, dan kapan/jika gambar tertentu disajikan sebagai WebP berdasarkan nama file. Anda akan menemukan semua ini di bawah tab Pengaturan Media – Optimole .

Membungkus

Bagian terbaik tentang menggunakan WebP dengan situs WordPress adalah Anda tidak perlu bekerja dengan file secara manual. Tidak ada unggahan tambahan, tidak ada waktu kompresi tambahan, tidak ada apa-apa. Karena cara kerja API, semua komputasi dan proses dijalankan dengan cepat secara real time. Google benar-benar telah membuat internet berjalan lebih cepat dengan menggunakan WebP daripada JPG atau PNG. Namun, manfaat terbesarnya adalah gambar mempertahankan kualitas yang sama meskipun ukurannya dikurangi secara signifikan. Ini mungkin merupakan tindakan mandiri di pihak Google untuk membuat Anda menggunakan format mereka untuk mempercepat situs Anda sehingga mereka dapat memberi peringkat lebih tinggi kepada Anda, pengalaman pengguna akhir juga lebih baik. Dan itulah yang penting pada akhirnya.

Bagaimana perasaan Anda tentang menyajikan gambar WebP kepada pengunjung situs web Anda?

Gambar unggulan artikel oleh vladwel / shutterstock.com