Optimasi website dari segi gambar yang dimuat memang memberikan tantangan tersendiri. Beberapa menyarankan untuk menggunakan format .WEBP agar gambar menjadi ringan dan mendapatkan skor tinggi dalam pengecekan Webpage Speed Checker. Sayangnya, ini memberikan problema baru. Format .WEBP tidak bisa terbaca di Safari 14.0.3 maupun sebelumnya.

Berikut ini adalah contoh website yang menggunakan .WEBP yang saya buka dengan Safari.

Kamu bisa mencoba membuka website tersebut di https://irvantaufik.me/riset-keyword/ dengan Safari (jika kamu pengguna Safari)

Memang sih ada plugin yang otomatis mengubah .JPEG menjadi .WEBP di WordPress. Namun, sepertinya plugin tersebut belum memberikan preventif jika gambar diakses menggunakan Safari.

Solusi .WEBP Tidak Terbaca di Safari

Lalu, bagaimana kah solusi untuk masalah ini?

Saya iseng mengunjungi salah satu marketplace yang juga menggunakan .WEBP sebagai format gambar default-nya, yaitu Bukalapak. Ternyata, ketika dibuka menggunakan Safari, gambar tetap terbaca. Kok bisa?

Ternyata mereka sudah mengecek kompatibilitas .WEBP ini di banyak browser (ya kali ga dicek, hehe). Cara yang Bukalapak lakukan adalah dengan menggunakan <picture> lalu di dalamnya diberikan beberapa format gambar.

Nah, masalahnya adalah apakah di WordPress sudah ada plugin yang memberikan preventif seperti ini? Kalau Bukalapak sih mudah, karena mereka memakai Vue.js. Ada library tambahan yang bisa digunakan namanya lazysizes yang bisa meng-generate <picture> dengan isian .WEBP dan .JPEG.

Jika Sahabat tahu nama plugin WordPress-nya, kasih tahu di kolom komentar yah 😉