Walau bagaimanapun, menghantar imej melalui WebP bukanlah mudah. Ia bergantung pada pelayan web pelayan anda, cdn terpilih, tema, pemalam caching, dsb.
Panduan ini akan membantu anda menghantar imej WebP ke WordPress dalam tiga cara.
Apakah itu WebP?
Format Imej Baharu untuk Web
oleh Google
WebP ialah format imej (seperti png dan jpg) yang dibangunkan oleh Google. Imej WebP (.webp) cenderung lebih kecil, yang mempercepatkan tapak web dan menggunakan kurang lebar jalur.
Bergantung pada imej, anda boleh mengurangkan saiz daripada 25% kepada 70%.
JPEG, PNG, GIF, dll. mempunyai kebaikan dan keburukan mereka. Jadual di bawah akan memberi anda idea:
| JPG | GIF | PNG | SVG | |
| vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Ketelusan | ❌ | ✅ | ✅ | ✅ |
| Animasi | ❌ | ✅ | ✅ | ✅ |
| hilang | ✅ | ❌ | ❌ | ❌ |
WebP mempunyai hampir semua ciri yang disebutkan di atas! Jadi mengapa kita tidak boleh menggunakan WebP di mana-mana sahaja?
Mengapa tidak menggunakan WebP di mana-mana sahaja?
Seperti yang anda lihat, hanya 80% peranti hanya menyokong WebP. Bukan sahaja pelayar lama, Safari/iOS Safari masih tidak menyokong WebP.
Mengapa sukar untuk melayani WebP?
Seperti yang anda perhatikan, kami menghantar imej mengikut penyemak imbas. Jika penyemak imbas tidak menyokong WebP, kami mesti memberikan mereka imej asal (jpg/png/gif).
Terdapat dua cara utama untuk menyediakan WebP:
Menggunakan tag imej
Kita boleh gunagambartag untuk memberitahu penyemak imbas bahawa kami mempunyai format WebP. Jika penyemak imbas menyokongnya, imej biasa/sandaran akan dimuatkan.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Dengan jawapan yang berbeza
Dalam jawapan yang berbeza, seperti biasa, anda mempunyai satu fail. betul-betul:
<img src="img.jpg" />Satu URL imej menyokong penghantaran fail jpg dan webp. Inilah yang dilakukan oleh pelayan.
Walaupun ia adalah sambungan fail .jpg, jika penyemak imbas menyokong WebP, maka responsnya ialah WebP. Juga dipanggil "tindak balas pelbagai".
Tag Imej lwn Respons Pelbagai
Masing-masing ada kebaikan dan keburukan. Berikut ialah jadual perbandingan:
| tag imej | Sambutan yang pelbagai | |
|---|---|---|
| Berfungsi dengan imej latar belakang | ❌ | ✅ |
| mesra CDN | ✅ | ✅ (sedikit sahaja) |
| Pelayan perlu dikonfigurasikan | ❌ | ✅ (nginx) |
| Berfungsi dengan pemuatan malas | ✅ | ✅ |
Bagaimana untuk menyampaikan imej dalam WebP di WordPress?
Kaedah #1 - Gunakan CDN hanya dengan penukaran WebP terbang
Ini mungkin penyelesaian yang paling mudah. Sesetengah penyedia CDN pada masa ini menyokong penukaran imej on-the-fly kepada WebP bersama-sama dengan pengoptimuman imej.
Berikut adalah beberapa:
- BunnyCDN
- Cloudflare dengan Poland (pelan Pro)
- Berawan
- Imej Adaptif ShortPixel (menggunakan StackPath CDN)
- WP Compress
Anda juga boleh menjimatkan ruang cakera menggunakan kaedah ini kerana anda tidak perlu menyimpan kedua-dua imej WebP biasa dan ditukar.
BunnyCDN
BunnyCDN dilengkapi dengan Pengoptimum Kelinci, yang boleh memampatkan imej dan menukarnya kepada WebP dengan cepat.
Kaedah #2 - Menggunakan Respons Pelbagai + CDN
Seperti yang diterangkan di atas, "tindak balas pelbagai" akan mempunyai URL imej tunggal yang boleh menyiarkan kedua-dua imej WebP dan bukan webp bergantung pada penyemak imbas yang diminta.
Kita juga perlu memilih CDN yang betul yang menyokong pengepala permintaan WebP sebagai kunci cache. Jika tidak, sebaik sahaja imej WebP dicache pada pelayan, ia akan dihantar kepada penyemak imbas yang tidak menyokong WebP.
Menyesuaikan Pelbagai Respons dalam WordPress
Cara paling mudah untuk menyediakan respons yang kaya untuk WebP dalam WordPress ialah menggunakan pemalam WebP Express. Hanya pasang pemalam dan klik "Simpan tetapan dan paksa peraturan .htaccess baharu".
WebP Express akan mengkonfigurasi penukar WebP dan menulis ganti peraturan supaya apabila ia menerima permintaan, ia akan menukar imej kepada WebP dengan cepat, dan jika penyemak imbas tidak menyokong WebP, imej lalai akan dihantar.
Jika anda berada di Nginx
WebP Express menambah peraturan penulisan semula '.htaccess' yang diperlukan, tetapi hanya berfungsi pada pelayan Apache, LiteSpeed atau OpenLiteSpeed . Jika anda menggunakan Nginx anda perlu mengeditnginx.configdan tambah kod berikut:
# Peraturan WebP Express# --------------------lokasi ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Terima;tamat tempoh 365d;jika ($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;}# Halakan permintaan untuk webps yang tidak wujud ke lokasi penukar ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (Peraturan WebP Express berakhir di sini)Kod di atas menambah pengepala respons yang diperlukan (pengurusan cache juga berbeza-beza) dan cuba menghantar WebP jika wujud, jika tidak, halakan ia ke penukar (berdasarkan sokongan penyemak imbas)
Pembekal CDN menyokong Respons Pelbagai
Jika pembekal CDN anda tidak menyokong WebP sebagai kunci caching, fail WebP akan dihantar ke penyemak imbas yang tidak menyokong WebP. Begitu juga, terdapat kemungkinan bahawa imej bukan webp akan dihantar ke penyemak imbas yang disokong.
BunnyCDN , KeyCDN , CDN Google dan banyak pembekal CDN lain menyokong WebP sebagai kunci cache. Pastikan anda mendayakannya dalam tetapan.
VBunnyCDN :
VKeyCDN :
Adakah anda menggunakan pelan percuma Cloudflare?
Malangnya, pelan percuma Cloudflare tidak menyokong WebP sebagai kunci cache. Sama ada gunakan CDN seperti BunnCDN atau naik taraf kepada pelan profesional mereka.
Sediakan respons yang pelbagai + CDN dengan penyedia pengehosan yang popular
Pastikan WebP Express dipasang.
- Kinsta atau WP Engine - hubungi pasukan sokongan mereka untuk menambah konfigurasi Nginx di atas dan sertakan kunci caching WebP dalam CDN (KeyCDN) mereka.
- Cloudways - cuma pasang WebP Express dan simpan tetapan menggunakan .htacess. Oleh kerana Cloudways menggunakan pendekatan Apache + Nginx hibrid, ia berfungsi di luar kotak.
- SiteGound - Hubungi sokongan untuk menambah konfigurasi Nginx. Gunakan CDN yang disokong seperti di atas.
- Pelayan LiteSpeed / OpenLiteSpeed / Apache - cuma pasang WebP Express dan simpan tetapan dengan '.htacess'. Juga gunakan CDN yang disokong seperti di atas.
- VPS tersuai dengan Nginx (Timbunan LEMP) - Sediakan
nginx.confdan gunakan CDN yang disokong seperti di atas.
Kaedah #3 - Menggunakan Tag Imej
Jika kedua-dua kaedah di atas tidak berfungsi untuk anda, anda boleh menggunakan teg imej. Ia tidak memerlukan konfigurasi pelayan (mengedit nginx.conf) dan menyokong semua pembekal CDN.
Menggunakan kaedah ini akan menukar HTML untuk penghantaran WebP. Ia tidak akan berfungsi dengan imej latar belakang, tidak serasi dengan beberapa tema, pemalam caching, pemalam malas memuatkan, dsb.
Jika anda menggunakan kaedah ini, semua teg img akan ditukar seperti ini:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Jika penyemak imbas menyokong WebP, fail yang sepadan dihantar; jika tidak, imej biasa dihantar.
Menyesuaikan tag imej untuk WebP dalam WordPress
Cara paling mudah untuk menyediakan tag imej adalah melalui WebP Express.
Tetapkan mod operasi kepada "mesra CDN" dan dayakan "Ubah HTML".
Kesimpulan
Saya berharap hari itu akan tiba apabila semua pelayar menyokong WebP!
Jika anda boleh menghabiskan beberapa dolar sebulan, maka cara yang paling mudah dan paling berkesan ialah menggunakan CDN seperti BunnyCDN, yang akan menukar imej kepada WebP dengan cepat. Jika tidak, ikut kaedah #2 yang saya nyatakan di atas.
