Ancak görüntüleri WebP aracılığıyla iletmek kolay değildir. Sunucunuzun web sunucusuna, seçilen cdn'ye, temaya, önbelleğe alma eklentilerine vb. bağlıdır.
Bu kılavuz, WebP görüntülerini WordPress'e üç şekilde teslim etmenize yardımcı olacaktır.
WebP nedir?
Web için Yeni Görüntü Formatı
Google tarafından
WebP, Google tarafından geliştirilen bir resim formatıdır (png ve jpg gibi). WebP (.webp) görüntüleri çok daha küçük olma eğilimindedir, bu da web sitelerini hızlandırır ve daha az bant genişliği kullanır.
Resme bağlı olarak, boyutu %25'ten %70'e kadar küçültebilirsiniz.
JPEG, PNG, GIF vb. artıları ve eksileri vardır. Aşağıdaki tablo size bir fikir verecektir:
| JPG | GIF | PNG | SVG | |
| Vektör | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| şeffaflık | ❌ | ✅ | ✅ | ✅ |
| Animasyon | ❌ | ✅ | ✅ | ✅ |
| Kayıp | ✅ | ❌ | ❌ | ❌ |
WebP, yukarıda belirtilen hemen hemen tüm özelliklere sahiptir! O zaman neden WebP'yi her yerde kullanamıyoruz?
Neden WebP'yi her yerde kullanmıyorsunuz?
Gördüğünüz gibi, cihazların yalnızca %80'i yalnızca WebP'yi destekliyor. Yalnızca eski tarayıcılar değil, Safari/iOS Safari de WebP'yi desteklemez.
WebP'ye hizmet etmek neden bu kadar zor?
Fark ettiğiniz gibi, görüntüleri tarayıcıya göre teslim ediyoruz. Tarayıcı WebP'yi desteklemiyorsa, onlara orijinal resmi (jpg/png/gif) sağlamalıyız.
WebP'ye hizmet etmenin iki ana yolu vardır:
Resim etiketini kullanma
Kullanabilirizresimtarayıcıya bir WebP biçimine sahip olduğumuzu söylemek için etiket. Tarayıcı destekliyorsa normal/yedek görüntü yüklenecektir.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Farklı cevapla
Farklı bir cevapta, her zamanki gibi bir dosyanız var. Aynen öyle:
<img src="img.jpg" />Bir resim URL'si, jpg ve webp dosyalarının teslimini destekler. Sunucunun yaptığı budur.
Bir .jpg dosya uzantısı olmasına rağmen, tarayıcı WebP'yi destekliyorsa, yanıt WebP olacaktır. Ayrıca "çeşitli tepki" olarak da adlandırılır.
Resim Etiketi ve Çeşitli Tepki Karşılaştırması
Her birinin artıları ve eksileri vardır. İşte bir karşılaştırma tablosu:
| resim etiketi | Farklı tepki | |
|---|---|---|
| Arka plan resimleriyle çalışır | ❌ | ✅ |
| CDN dostu | ✅ | ✅ (sadece birkaçı) |
| Sunucunun yapılandırılması gerekiyor | ❌ | ✅ (nginx) |
| Tembel yükleme ile çalışır | ✅ | ✅ |
WordPress'te WebP'de görüntüler nasıl sunulur?
Yöntem 1 - CDN'yi yalnızca fly WebP dönüştürme ile kullanın
Bu muhtemelen en basit çözümdür. Bazı CDN sağlayıcıları şu anda görüntü optimizasyonu ile birlikte anında görüntüden WebP'ye dönüştürmeyi desteklemektedir.
Burda biraz var:
- BunnyCDN
- Lehçe ile Cloudflare (Pro Plan)
- bulutlu
- ShortPixel Uyarlanabilir Görüntüler (StackPath CDN kullanır)
- WP Sıkıştırma
Hem normal hem de dönüştürülmüş WebP görüntülerini depolamanız gerekmediğinden, bu yöntemi kullanarak disk alanından da tasarruf edebilirsiniz.
BunnyCDN
BunnyCDN, görüntüleri sıkıştırıp anında WebP'ye dönüştürebilen Bunny Optimizer ile birlikte gelir.
Yöntem #2 - Farklı Yanıt + CDN Kullanma
Yukarıda açıklandığı gibi, bir "çeşitlilik yanıtı", istenen tarayıcıya bağlı olarak hem WebP hem de webp olmayan resimler sunabilen tek bir resim URL'sine sahip olacaktır.
Ayrıca önbellek anahtarı olarak WebP istek başlıklarını destekleyen doğru CDN'yi seçmemiz gerekiyor. Aksi takdirde, WebP görüntüsü sunucuda önbelleğe alındığında, WebP'yi desteklemeyen tarayıcılara teslim edilecektir.
WordPress'te Değişken Yanıtı Özelleştirme
WordPress'te WebP için zengin bir yanıt oluşturmanın en kolay yolu WebP Express eklentisini kullanmaktır. Eklentiyi kurun ve "Ayarları kaydet ve yeni .htaccess kurallarını zorla"yı tıklayın.
WebP Express, WebP dönüştürücüyü yapılandıracak ve bir istek aldığında görüntüleri anında WebP'ye dönüştürecek ve tarayıcı WebP'yi desteklemiyorsa varsayılan görüntü iletilecek şekilde kuralların üzerine yazacaktır.
Nginx'te iseniz
WebP Express, gerekli '.htaccess' yeniden yazma kurallarını ekler, ancak yalnızca bir Apache, LiteSpeed veya OpenLiteSpeed sunucusunda çalışır. Nginx kullanıyorsanız düzenlemeniz gerekirnginx.configve aşağıdaki kodu ekleyin:
# WebP Express kuralları# --------------------konum ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Değişir Kabul et;süresi 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;}# Var olmayan web'ler için istekleri dönüştürücü konumuna yönlendirin ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (WebP Express kuralları burada biter)Yukarıdaki kod, gerekli yanıt başlıklarını ekler (önbellek yönetimi de değişir) ve varsa WebP'yi teslim etmeye çalışır, aksi takdirde onu dönüştürücüye yönlendirir (tarayıcı desteğine göre)
Diverse Response'u destekleyen CDN sağlayıcıları
CDN sağlayıcınız önbelleğe alma anahtarı olarak WebP'yi desteklemiyorsa, WebP dosyaları WebP'yi desteklemeyen tarayıcılara teslim edilecektir. Benzer şekilde, webp olmayan görüntülerin desteklenen tarayıcılara teslim edilme olasılığı vardır.
BunnyCDN , AnahtarCDN , Google CDN'si ve diğer birçok CDN sağlayıcısı, WebP'yi bir önbellek anahtarı olarak destekler. Bunları ayarlarda etkinleştirdiğinizden emin olun.
VBunnyCDN :
VAnahtarCDN :
Cloudflare'ın ücretsiz planını mı kullanıyorsunuz?
Ne yazık ki, Cloudflare'nin ücretsiz planı WebP'yi önbellek anahtarı olarak desteklemiyor. Ya BunnCDN gibi bir CDN kullanın ya da profesyonel planlarına yükseltin.
Popüler barındırma sağlayıcılarıyla çeşitli bir yanıt + CDN oluşturun
WebP Express'in kurulu olduğundan emin olun.
- Kinsta veya WP Engine - yukarıdaki Nginx yapılandırmasını eklemek ve WebP önbelleğe alma anahtarını CDN'lerine (KeyCDN) dahil etmek için destek ekipleriyle iletişime geçin.
- Cloudways - WebP Express'i kurun ve .htacess kullanarak ayarları kaydedin. Cloudways, karma bir Apache + Nginx yaklaşımı kullandığından, kutudan çıktığı gibi çalışır.
- SiteGound - Nginx yapılandırmasını eklemek için desteğe başvurun. Yukarıdaki gibi desteklenen bir CDN kullanın.
- LiteSpeed / OpenLiteSpeed / Apache sunucusu - WebP Express'i kurun ve '.htacess' ile ayarları kaydedin. Ayrıca yukarıdaki gibi desteklenen bir CDN kullanın.
- Nginx ile Özel VPS (LEMP Yığını) - Kurulum
nginx.confve yukarıdaki gibi desteklenen bir CDN kullanın.
Yöntem #3 - Bir Görüntü Etiketi Kullanma
Yukarıdaki yöntemlerin ikisi de işinize yaramazsa, resim etiketini kullanabilirsiniz. Sunucu yapılandırması gerektirmez (nginx.conf'u düzenler) ve tüm CDN sağlayıcılarını destekler.
Bu yöntemin kullanılması, WebP dağıtımı için HTML'yi değiştirecektir. Arka plan resimleriyle çalışmaz, bazı temalar, önbelleğe alma eklentileri, tembel yükleme eklentileri vb. ile uyumsuzdur.
Bu yöntemi kullanırsanız, tüm img etiketleri şu şekilde dönüştürülür:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Tarayıcı WebP'yi destekliyorsa, ilgili dosya teslim edilir; aksi takdirde normal bir resim teslim edilir.
WordPress'te WebP için bir resim etiketini özelleştirme
Bir görüntü etiketi oluşturmanın en kolay yolu WebP Express'tir.
Çalışma modunu “CDN uyumlu” olarak ayarlayın ve “HTML'yi Değiştir”i etkinleştirin.
Çözüm
Keşke tüm tarayıcıların WebP'yi desteklediği gün gelse!
Ayda birkaç dolar harcayabiliyorsanız, en kolay ve en verimli yol, görüntüleri anında WebP'ye dönüştürecek BunnyCDN gibi bir CDN kullanmaktır. Aksi takdirde, yukarıda bahsettiğim yöntem # 2'ye sadık kalın.
