Namun, mengirimkan gambar melalui WebP tidaklah mudah. Itu tergantung pada server web server Anda, cdn yang dipilih, tema, plugin caching, dll.
Panduan ini akan membantu Anda mengirimkan gambar WebP ke WordPress dalam tiga cara.
Apa itu WebP?
Format Gambar Baru untuk Web
oleh Google
WebP adalah format gambar (seperti png dan jpg) yang dikembangkan oleh Google. Gambar WebP (.webp) cenderung jauh lebih kecil, yang mempercepat situs web dan menggunakan lebih sedikit bandwidth.
Tergantung pada gambar, Anda dapat mengurangi ukurannya dari 25% menjadi 70%.
JPEG, PNG, GIF, dll. memiliki pro dan kontra. Tabel di bawah ini akan memberi Anda gambaran:
| JPG | GIF | PNG | SVG | |
| vektor | ❌ | ❌ | ❌ | ✅ |
| raster | ✅ | ✅ | ✅ | ❌ |
| Transparansi | ❌ | ✅ | ✅ | ✅ |
| Animasi | ❌ | ✅ | ✅ | ✅ |
| Hilang | ✅ | ❌ | ❌ | ❌ |
WebP memiliki hampir semua fitur yang disebutkan di atas! Lalu mengapa kita tidak bisa menggunakan WebP di mana-mana?
Mengapa tidak menggunakan WebP di mana-mana?
Seperti yang Anda lihat, hanya 80% perangkat yang hanya mendukung WebP. Tidak hanya browser lawas, Safari/iOS Safari masih tidak mendukung WebP.
Mengapa begitu sulit untuk melayani WebP?
Seperti yang Anda perhatikan, kami mengirimkan gambar sesuai dengan browser. Jika browser tidak mendukung WebP, kami harus menyediakan gambar aslinya (jpg/png/gif).
Ada dua cara utama untuk melayani WebP:
Menggunakan tag gambar
Kita bisa gunakangambartag untuk memberi tahu browser bahwa kami memiliki format WebP. Jika browser mendukungnya, gambar reguler/fallback akan dimuat.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Dengan jawaban yang berbeda
Dalam jawaban yang berbeda, seperti biasa, Anda memiliki satu file. Tepat:
<img src="img.jpg" />Satu URL gambar mendukung pengiriman file jpg dan webp. Inilah yang dilakukan server.
Meskipun itu adalah ekstensi file .jpg, jika browser mendukung WebP, maka responsnya adalah WebP. Juga disebut "tanggapan beragam".
Tag Gambar vs Respons Beragam
Masing-masing memiliki pro dan kontra. Berikut tabel perbandingannya:
| label gambar | Respon yang beragam | |
|---|---|---|
| Bekerja dengan gambar latar belakang | ❌ | ✅ |
| CDN ramah | ✅ | (hanya beberapa) |
| Server perlu dikonfigurasi | ❌ | (nginx) |
| Bekerja dengan pemuatan malas | ✅ | ✅ |
Bagaimana cara menyajikan gambar di WebP di WordPress?
Metode #1 - Gunakan CDN hanya dengan konversi WebP terbang
Ini mungkin solusi paling sederhana. Beberapa penyedia CDN saat ini mendukung konversi gambar langsung ke WebP bersama dengan pengoptimalan gambar.
Berikut adalah beberapa:
- KelinciCDN
- Cloudflare dengan bahasa Polandia (Paket Pro)
- mendung
- Gambar Adaptif ShortPixel (menggunakan StackPath CDN)
- Kompres WP
Anda juga dapat menghemat ruang disk menggunakan metode ini karena Anda tidak perlu menyimpan gambar WebP normal dan yang dikonversi.
KelinciCDN
BunnyCDN hadir dengan Bunny Optimizer, yang dapat mengompresi gambar dan mengonversinya ke WebP dengan cepat.
Metode #2 - Menggunakan Beragam Respon + CDN
Seperti dijelaskan di atas, "tanggapan beragam" akan memiliki satu URL gambar yang dapat menyajikan gambar WebP dan non-webp bergantung pada browser yang diminta.
Kita juga perlu memilih CDN yang tepat yang mendukung header permintaan WebP sebagai kunci cache. Jika tidak, setelah gambar WebP di-cache di server, gambar tersebut akan dikirimkan ke browser yang tidak mendukung WebP.
Menyesuaikan Berbagai Respon di WordPress
Cara termudah untuk menyiapkan respons kaya untuk WebP di WordPress adalah dengan menggunakan plugin WebP Express. Cukup instal plugin dan klik "Simpan pengaturan dan paksa aturan .htaccess baru".
WebP Express akan mengonfigurasi konverter WebP dan menimpa aturan sehingga ketika menerima permintaan, itu akan mengonversi gambar ke WebP dengan cepat, dan jika browser tidak mendukung WebP, gambar default akan dikirimkan.
Jika Anda berada di Nginx
WebP Express menambahkan aturan penulisan ulang '.htaccess' yang diperlukan, tetapi hanya berfungsi pada server Apache, LiteSpeed, atau OpenLiteSpeed. Jika Anda menggunakan Nginx, Anda perlu mengeditnginx.configdan tambahkan kode berikut:
# Aturan WebP Express# --------------------lokasi ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Terima;kedaluwarsa 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Merutekan permintaan untuk webps yang tidak ada ke lokasi konverter ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (Aturan WebP Express berakhir di sini)Kode di atas menambahkan header respons yang diperlukan (manajemen cache juga bervariasi) dan mencoba mengirimkan WebP jika ada, jika tidak, alihkan ke konverter (berdasarkan dukungan browser)
Penyedia CDN mendukung Respons Beragam
Jika penyedia CDN Anda tidak mendukung WebP sebagai kunci cache, file WebP akan dikirimkan ke browser yang tidak mendukung WebP. Demikian pula, ada kemungkinan gambar non-webp akan dikirimkan ke browser yang didukung.
KelinciCDN , KeyCDN , Google CDN dan banyak penyedia CDN lainnya mendukung WebP sebagai kunci cache. Pastikan Anda mengaktifkannya di pengaturan.
VKelinciCDN :
VKeyCDN :
Apakah Anda menggunakan paket gratis Cloudflare?
Sayangnya, paket gratis Cloudflare tidak mendukung WebP sebagai kunci cache. Gunakan CDN seperti BunnCDN atau tingkatkan ke paket profesional mereka.
Siapkan respons yang beragam + CDN dengan penyedia hosting populer
Pastikan WebP Express diinstal.
- Kinsta atau WP Engine - hubungi tim dukungan mereka untuk menambahkan konfigurasi Nginx di atas dan sertakan kunci cache WebP di CDN (KeyCDN) mereka.
- Cloudways - cukup instal WebP Express dan simpan pengaturan menggunakan .htacess. Karena Cloudways menggunakan pendekatan Apache + Nginx hybrid, ini bekerja di luar kotak.
- SiteGound - Hubungi dukungan untuk menambahkan konfigurasi Nginx. Gunakan CDN yang didukung seperti di atas.
- Server LiteSpeed / OpenLiteSpeed / Apache - cukup instal WebP Express dan simpan pengaturan dengan '.htacess'. Gunakan juga CDN yang didukung seperti di atas.
- VPS Kustom dengan Nginx (LEMP Stack) - Pengaturan
nginx.confdan gunakan CDN yang didukung seperti di atas.
Metode #3 - Menggunakan Tag Gambar
Jika kedua metode di atas tidak berhasil, Anda dapat menggunakan tag gambar. Itu tidak memerlukan konfigurasi server (mengedit nginx.conf) dan mendukung semua penyedia CDN.
Menggunakan metode ini akan mengubah HTML untuk pengiriman WebP. Ini tidak akan berfungsi dengan gambar latar belakang, tidak kompatibel dengan beberapa tema, plugin caching, plugin pemuatan malas, dll.
Jika Anda menggunakan metode ini, semua tag img akan dikonversi seperti ini:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Jika browser mendukung WebP, file yang sesuai akan dikirimkan; jika tidak, gambar normal akan dikirimkan.
Menyesuaikan tag gambar untuk WebP di WordPress
Cara termudah untuk menyiapkan tag gambar adalah melalui WebP Express.
Atur mode operasi ke "CDN friendly" dan aktifkan "Alter HTML".
Kesimpulan
Saya berharap hari itu akan tiba ketika semua browser mendukung WebP!
Jika Anda dapat menghabiskan beberapa dolar sebulan, maka cara termudah dan paling efisien adalah menggunakan CDN seperti BunnyCDN, yang akan mengonversi gambar ke WebP dengan cepat. Jika tidak, tetap gunakan metode # 2 yang saya sebutkan di atas.
