WordPress'te WebP Görüntüleri Nasıl Kullanılır (3 Yöntem)

WordPress'te WebP görüntüleri kullanmak ister misiniz?

WebP görüntüleri, dosya boyutunu küçülterek daha iyi görüntü sıkıştırması sunan modern bir görüntü formatıdır. Bu, web sitenizin daha hızlı yüklenmesini sağlar ve bant genişliğinden tasarruf sağlar.

Bu yazıda, WordPress'te WebP görüntülerinin nasıl kolayca kullanılacağını göstereceğiz.

WebP Nedir ve Neden WordPress'te WebP Görüntüleri Kullanılır?

WebP, web'de kullanılacak görüntüler için yeni bir dosya biçimidir. WebP resim formatını kullanarak, resimleriniz kalite kaybı olmadan PNG ve JPEG dosya boyutundan %25-34 daha küçük olacaktır.

Resimler web sitenizi yavaşlatıyorsa, bunları WebP formatına dönüştürmek sayfa yükleme hızı testi puanlarınızı iyileştirebilir.

Görüntü sıkıştırma hakkında daha fazla bilgi edinmek için web için görüntülerin nasıl optimize edileceğine ilişkin kılavuzumuza bakın.

WebP yeni bir dosya formatı olduğu için henüz tüm tarayıcılar tarafından desteklenmemektedir. Ancak, Google Chrome, Firefox ve Microsoft Edge gibi çoğu modern tarayıcı, WebP görüntülerini destekler.

WordPress'te WebP görüntüleri Kullanmalı mısınız?

WebP görüntüleri, WordPress web sitenizi hızlandırmanıza yardımcı olabilir. Bir WordPress önbelleğe alma eklentisi, CDN ve daha fazlasıyla birlikte kullanılması önerilen bir en iyi uygulamadır.

Varsayılan olarak, WordPress WebP görüntülerini desteklemez ve bir WebP görüntüsünün yüklenmesi bir hata gösterecektir.

Bunu düzeltmek için, görüntüleri WebP görüntü formatına dönüştürmek için bir görüntü sıkıştırma eklentisi kullanmanız gerekecek. Resimlerinizi, yedek olarak kullanılabilmesi için PNG, JPEG ve GIF gibi WordPress destekli dosya biçimlerinde yüklemeye devam edeceksiniz.

Siteniz çok sayıda görsel kullanıyorsa ve bunlar WordPress blogunuzu yavaşlatıyorsa, kesinlikle WebP görsellerini kullanmayı düşünmelisiniz.

WebP görüntülerini WordPress'te nasıl kullanacağınız aşağıda açıklanmıştır. Size en uygun olanı seçebilmeniz için size birden fazla yöntem göstereceğiz:

• EWWW Optimizer ile WordPress'te WebP Görüntülerini Kullanma
• WP Rocket ile WordPress'te WebP Görüntülerini Kullanma
• SG Optimizer ile WordPress'te WebP Görüntülerini Kullanma

Yöntem 1. WordPress'te WebP Görüntülerini EWWW Optimizer ile Kullanma

EWWW Image Optimizer eklentisi, WordPress resimlerinizi optimize etmenize izin veren en iyi WordPress resim sıkıştırma eklentilerinden biridir. Ayrıca WebP Görüntülerini destekler ve bunları desteklenen tarayıcılarda otomatik olarak gösterebilir.

Yapmanız gereken ilk şey, EWWW Image Optimizer eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti seçeneklerini yapılandırmak için Ayarlar » EWWW Image Optimizer sayfasına gidin. Bir kurulum sihirbazı tarafından karşılanacaksınız, ancak sihirbazdan çıkmak için 'Ne yaptığımı biliyorum' bağlantısını tıklayabilirsiniz.

Bir sonraki ekranda, bir sürü eklenti seçeneği göreceksiniz. Aşağı kaydırın ve 'WebP Dönüştürme' seçeneğinin yanındaki kutuyu işaretleyin.

Bundan sonra, ayarlarınızı saklamak için Değişiklikleri Kaydet düğmesine tıklayın.

Ardından, WebP Dönüştürme bölümüne kaydırmanız gerekir. Eklenti şimdi size kırmızı bir önizleme görüntüsü ile bazı yeniden yazma kuralları gösterecektir.

'Yeniden Yazma Kuralları Ekle' düğmesine tıklamanız gerekir ve eklenti bu yeniden yazma kurallarını otomatik olarak .htaccess dosyanıza eklemeye çalışacaktır.

Eklenti bu kuralları eklemede başarılı olursa, kırmızı görüntü önizlemesi 'WebP' metniyle yeşile döner.

Bazen eklenti kuralları ekleyemeyebilir. Bu durumda, eklentinin ayarlar sayfasından yeniden yazma kurallarını kopyalamanız ve bunları .htaccess dosyanızın altına manuel olarak yapıştırmanız gerekir.

İşiniz bittiğinde, eklentinin ayarlar sayfasına geri dönün ve Değişiklikleri Kaydet düğmesine tekrar tıklayın. Önizleme görüntüsü yeşile dönerse, bu, WordPress sitenizde WebP görüntü dağıtımını başarıyla etkinleştirdiğiniz anlamına gelir.

Alternatif olarak, WebP teslim seçenekleriniz olarak JS WebP Yeniden Yazma veya <resim> WebP Yeniden Yazma yöntemlerinden birini seçebilirsiniz. Bunlar .htaccess yönteminden biraz daha yavaştır, ancak işi halledecektir.

Eski Resimlerinizi Toplu Olarak WebP Versiyonuna Dönüştürün

EWWW Image Optimizer, önceden yüklediğiniz görüntü dosyalarınızı kolayca WebP görüntülerine dönüştürmenize olanak tanır. Medya » Kitaplık sayfasına gidin ve liste görünümüne geçin.

Ardından, Ekran Seçenekleri düğmesine tıklamanız ve 'Sayfa başına öğe sayısı'nı 999 olarak değiştirmeniz gerekir. 1000'den fazla görseliniz varsa, bu görseller bir sonraki sayfada görünecektir.

Bu şekilde, toplu optimizasyon için çok sayıda görüntüyü hızlı bir şekilde seçebileceksiniz. Ardından, tüm görüntüleri seçmek için üstteki Tümünü Seç onay kutusuna tıklayın.

Bundan sonra, Toplu İşlemler açılır menüsüne tıklayın ve Toplu Optimize Et seçeneğini seçin. Son olarak, Uygula düğmesine tıklayın.

Bir sonraki ekranda, eklenti size görüntü sıkıştırmayı atlama ve bunları yalnızca WebP'ye dönüştürme seçeneği sunacaktır. Resimleriniz zaten optimize edilmişse bu seçeneği işaretleyebilirsiniz.

Bundan sonra, devam etmek için 'Optimize Edilmemiş Görüntüleri Tara' düğmesine tıklayın. Eklenti daha sonra bulduğu görüntü sayısını size gösterecek, böylece devam etmek için Optimize Et düğmesine tıklayabilirsiniz.

Resimleriniz şimdi optimize edilecek ve EWWW optimizer resimleriniz için WebP versiyonları oluşturacaktır.

WebP Görüntü Teslimatınızı Test Etme

Resimlerinizi optimize ettikten sonra, birkaç resim içeren bir blog gönderisine veya sayfaya gidebilirsiniz. Fareyi herhangi bir görüntünün üzerine getirin ve görüntüyü yeni bir sekmede açmak için sağ tıklayın.

Bu, resmi yeni bir tarayıcı sekmesinde açacak ve adres çubuğunda bir .webp uzantısına sahip olduğunu görebileceksiniz.

Eklenti webp görüntüsünü sunamıyorsa, eklentinin ayarlar sayfasına geri dönebilirsiniz. Buradan WebP teslim seçeneğini 'JS WebP Yeniden Yazma' veya '<resim> WebP Yeniden Yazma' yöntemlerine değiştirebilirsiniz.

Yöntem 2. WordPress'te WebP Görüntülerini Imagify ile Kullanma

Imagify, en iyi WordPress önbellek eklentisi olan WP Rocket'in arkasındaki kişiler tarafından oluşturulan bir WordPress görüntü optimizasyon eklentisidir. Görüntüleri kolayca optimize etmenize ve WebP görüntü formatına dönüştürmenize olanak tanır.

Yapmanız gereken ilk şey, Imagify eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyon üzerine, eklenti ayarlarını yapılandırmak için Ayarlar » Imagify sayfasını ziyaret etmeniz gerekir. Buradan. Devam etmek için 'Ücretsiz API Anahtarı Oluştur' düğmesini tıklayın.

API anahtarınızı içeren bir e-posta için gelen kutunuzu kontrol ettikten sonra bir iş e-posta adresi girmeniz istenecektir. Anahtarı eklentinin ayarlar sayfasına kopyalayıp yapıştırın ve Değişiklikleri Kaydet düğmesine tıklayın.

Ardından, Optimizasyon bölümüne aşağı kaydırmanız gerekir. Burada, 'Görüntülerin webp sürümlerini oluştur' ve 'Görüntüleri sitede webp biçiminde görüntüle' seçeneklerinin yanındaki seçenekleri işaretlemeniz gerekir.

Bunun altında, WebP görüntülerini WordPress'te görüntülemek için iki dağıtım yönteminden birini seçebilirsiniz. Birincisi .htaccess yöntemi, ikincisi ise <picture> etiketini kullanmaktır.

.htaccess yöntemi daha hızlıdır, ancak bir CDN hizmeti kullanıyorsanız çalışmaz. <picture> etiketi yöntemi CDN'lerle de çalışır, ancak bazı WordPress temalarını bozabilir.

Siteniz için iyi çalışan birini seçebilirsiniz. Bundan sonra, alttaki 'Kaydet ve toplu optimize ediciye git' düğmesini tıklayın.

Bu sizi Medya » Toplu Optimizasyon sayfasına götürecektir. Eklenti, arka planda tüm WordPress resimlerinizi otomatik olarak optimize etmeye başlayacaktır.

Çok fazla resminiz varsa, bu biraz zaman alabilir. Endişelenmeyin, sayfayı kapatabilir ve daha sonra geri dönebilirsiniz çünkü sayfayı kapatmak görüntü optimizasyon sürecini durdurmaz.

WebP Görsellerinizi WordPress'te Test Etme

Optimizasyon tamamlandıktan sonra, birkaç resim içeren bir sayfayı veya gönderiyi ziyaret edebilirsiniz. Farenizi bir görüntünün üzerine getirin ve ardından 'Görüntüyü yeni sekmede aç'ı seçmek için sağ tıklayın.

Bu, resmi yeni bir tarayıcı sekmesinde açacak ve adres çubuğunda .webp uzantısını görebileceksiniz.

Yöntem 3. WordPress'te WebP Görüntülerini SG Optimizer ile Kullanma

SiteGround kullanıcısıysanız bu yöntem önerilir.

SiteGround, en iyi WordPress barındırma şirketlerinden biridir. Kullanıcılarına, WordPress performansınızı optimize etmenize olanak tanıyan ücretsiz bir SG Optimizer eklentisi sunarlar. Ayrıca WordPress resimlerini optimize etme seçeneğini de içerir.

İlk olarak, SG Optimizer eklentisini kurmanız ve etkinleştirmeniz gerekir.

Etkinleştirmenin ardından eklenti, yönetici kenar çubuğunuza 'SG Optimize Edici' etiketli yeni bir menü öğesi ekleyecektir. Üzerine tıklamak sizi eklentinin ayarlar sayfasına götürecektir.

SiteGround'un yerleşik önbelleğe alma sistemini kullanmak istiyorsanız, buradan önbelleğe alma ayarlarını açabilirsiniz.

Bundan sonra, Medya Optimizasyonu sekmesine geçebilir ve 'Yeni Görsellerin WebP Kopyalarını Oluştur' seçeneğini açabilirsiniz.

Bunun altında, 'WebP Dosyalarını Toplu Oluştur' seçeneğini göreceksiniz. Üzerine tıklamak, WordPress medya kitaplığınızdaki tüm görüntü dosyaları için WebP kopyaları oluşturmaya başlayacaktır.

Bittiğinde, WordPress siteniz WebP görüntüleri sunmaya başlayacaktır.

SG Optimizer'da WebP Görüntülerini Test Etme

Web sitenizin WebP görselleri sunup sunmadığını görmek için sitenizde birkaç görsel içeren bir sayfa açmanız gerekir.

Bundan sonra, sağ tıklayın ve Inspect tool'u seçin. Bu, Ağ sekmesine geçmeniz gereken geliştirici konsolunu açacaktır.

Buradan 'img' sekmesine tıklayın ve ardından sayfayı yeniden yükleyin (Windows'ta CTRL+R ve Mac'te Command+R). Web siteniz yeniden yüklenirken, geliştirici konsolunda yüklenen tüm resimleri göreceksiniz.

Bu makalenin, WordPress'te WebP görüntülerini nasıl kullanacağınızı öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, bir e-posta bülteninin nasıl oluşturulacağına ilişkin kılavuzumuza ve web siteniz için en iyi iş telefonu hizmetlerini karşılaştırmamıza da göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.