WordPress'te WebP Resimleri Nasıl Kullanılır (3 Yöntem)

WPBeginner olarak, WordPress kullanıcılarının daha hızlı, daha iyi performans gösteren web siteleri oluşturmalarına yardımcı olabilecek yeni teknolojileri sürekli olarak değerlendiriyoruz. WebP görüntüleri bir süredir radarımızda ve henüz kendi sitemizde uygulamamış olsak da, formatın potansiyelinin farkındayız.

WebP'yi ilginç kılan şey, fark edilir bir kalite kaybı olmadan görüntü dosya boyutlarını %35'e kadar azaltabilmesidir. WebP kullanan sitelerin yükleme hızında ve kullanıcı etkileşiminde anlamlı iyileştirmeler elde ettiğini gördük.

Araştırma ve test sürecimize dayanarak, bu modern resim formatının hız avantajlarından yararlanmak için WordPress'te WebP resimlerini nasıl kullanacağınızı göstereceğiz.

WebP Nedir?

WebP, Google tarafından özellikle web kullanımı için geliştirilmiş modern bir resim formatıdır. Onu özel kılan üstün sıkıştırma teknolojisidir. WebP resimleri, aynı görsel kaliteyi korurken genellikle JPEG ve PNG dosyalarından %25-35 daha küçüktür.

Bunu perspektife koymak gerekirse, mevcut PNG görüntünüz 100KB ise, WebP formatındaki aynı görüntü, kalitede görünür bir fark olmadan yaklaşık 65-75KB olacaktır. Bu boyut azaltma doğrudan daha hızlı sayfa yükleme sürelerine ve daha iyi bir kullanıcı deneyimine dönüşür.

Format, hem kayıplı hem de kayıpsız sıkıştırmayı, ayrıca şeffaflık ve animasyon gibi özellikleri destekleyerek birden fazla geleneksel format için çok yönlü bir yedek haline getirir.

Resim sıkıştırma hakkında, web için görüntüleri nasıl optimize edeceğiniz hakkındaki rehberimizde bilgi edinebilirsiniz.

Tarayıcı Desteği: WebP Siteniz İçin Hazır mı?

Şu anda WebP, %95'in üzerinde küresel kapsama alanıyla güçlü tarayıcı desteğine sahip. Chrome, Firefox, Safari (iOS 14'ten beri) ve Edge dahil tüm büyük tarayıcılar WebP resimlerini tam olarak desteklemektedir.

Kalan %5'lik kısım, büyük ölçüde kullanımı hızla azalan eski tarayıcı sürümlerinden oluşmaktadır.

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

Çoğu WordPress sitesi için cevap evet. WebP uygulaması, WordPress sitenizi önemli ölçüde hızlandırabilir ve önbelleğe alma eklentileri ve CDN'ler gibi diğer performans optimizasyonlarıyla mükemmel bir şekilde çalışır.

En son WordPress 5.8 sürümünden bu yana, platform yerel WebP desteğine sahip, bu da herhangi bir eklentiye gerek kalmadan WebP resimlerini doğrudan yükleyip kullanabileceğiniz anlamına gelir. Ancak, bu temel destek otomatik dönüştürme veya geri dönüş seçeneklerini içermez.

En iyi sonuçlar için özel bir resim optimizasyon eklentisi kullanmanızı öneririz. Bu eklentiler, mevcut resimlerinizi otomatik olarak WebP formatına dönüştürür ve desteklenmeyen tarayıcılara sahip kullanıcıların küçük bir yüzdesi için geleneksel JPEG veya PNG sürümlerini sunar.

WebP, özellikle siteniz resim ağırlıklıysa (fotoğraf blogları, e-ticaret mağazaları veya portföyler gibi) veya WordPress blogunuz şu anda büyük resimler nedeniyle yavaş yükleme süreleriyle mücadele ediyorsa özellikle faydalıdır.

İşte WordPress'te WebP görüntüleri nasıl kullanılır. Size en uygun olanı seçebilmeniz için birden fazla yöntem göstereceğiz:

1. EWWW Optimizer ile WordPress'te WebP Görüntüleri Kullanma
2. Imagify ile WordPress'te WebP Resimleri Kullanma
3. SG Optimizer ile WordPress'te WebP Görüntüleri Kullanma
4. WordPress'te Görüntü Kullanımı Hakkında Uzman Rehberleri

Video Eğitim

WPBeginner'a Abone Olun

Yazılı talimatları tercih ederseniz, okumaya devam edin.

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

EWWW Image Optimizer, WordPress resimlerinizi optimize etmenizi sağlayan en iyi WordPress resim sıkıştırma eklentilerinden biridir. Ayrıca WebP Resimlerini destekler ve desteklenen tarayıcılarda otomatik olarak gösterebilir. Daha fazla ayrıntı için EWWW Image Optimizer incelememize bakın.

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 dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, eklenti seçeneklerini yapılandırmak için Ayarlar » EWWW Resim Optimize Edici sayfasına gidin. Bir kurulum sihirbazı ile karşılaşacaksınız, ancak sihirbazdan çıkmak için ‘Ne yaptığımı biliyorum’ bağlantısına tıklayabilirsiniz.

Bir sonraki ekranda bir dizi eklenti seçeneği göreceksiniz.

Aşağı kaydırın ve 'WebP Dönüşümü' seçeneğinin yanındaki kutuyu işaretleyin.

Ayarlarınızı kaydetmek için daha sonra ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

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

‘Yeniden Yazma Kurallarını 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ı başarıyla eklerse, kırmızı resim önizlemesi 'WebP' metniyle yeşile dönecektir.

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

İşiniz bittiğinde, eklentinin ayarlar sayfasına geri dönün ve tekrar ‘Değişiklikleri Kaydet’ düğmesine tıklayın. Önizleme resmi yeşile dönerse, bu, WordPress web sitenizde WebP resim teslimini başarıyla etkinleştirdiğiniz anlamına gelir.

Alternatif olarak, WebP teslim seçenekleriniz olarak JS WebP Yeniden Yazma veya WebP Yeniden Yazma yöntemlerini seçebilirsiniz. Bunlar .htaccess yönteminden biraz daha yavaştır, ancak işi halledeceklerdir.

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

EWWW Image Optimizer, daha önce yüklediğiniz görüntü dosyalarını kolayca WebP görüntülerine dönüştürmenize olanak tanır. Sadece Medya » Kütüphane 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 resminiz varsa, bu resimler sonraki sayfada görünecektir.

Bu şekilde, toplu optimizasyon için çok sayıda resmi hızla seçebileceksiniz. Ardından, tüm resimleri seçmek için üstteki Tümünü Seç onay kutusuna tıklayın.

Ardından, ‘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 resim sıkıştırmayı atlama ve yalnızca onları 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ş Resimleri Tara' düğmesine tıklayın. Eklenti daha sonra bulduğu resim sayısını gösterecektir, böylece devam etmek için Optimize düğmesine tıklayabilirsiniz.

Resimleriniz artık optimize edilecek ve EWWW Optimizer resimleriniz için WebP sürümleri oluşturacaktır.

WebP Resim Tesliminizi Test Etme

Görüntülerinizi optimize ettikten sonra, birkaç görüntü içeren bir blog yazısına gidebilirsiniz.

Fareyi herhangi bir resmin üzerine getirin ve resmi yeni bir sekmede açmak için sağ tıklayın.

Bu, resmi yeni bir tarayıcı sekmesinde açacaktır.

Adres çubuğunda .webp uzantısına sahip olduğunu görebileceksiniz.

Eklenti WebP resmini sunamıyorsa, eklentinin ayarlar sayfasına geri dönebilirsiniz. Buradan WebP teslim seçeneğini 'JS WebP Yeniden Yazma' veya 'WebP Yeniden Yazma' yöntemlerine değiştirebilirsiniz.

Yöntem 2: Imagify ile WordPress'te WebP Resimleri Kullanma

Imagify, WP Rocket'ın arkasındaki kişiler tarafından oluşturulan bir WordPress resim optimizasyon eklentisidir, en iyi WordPress önbellekleme eklentisi. Resimleri kolayca optimize etmenize ve WebP resim formatına dönüştürmenize olanak tanır. Daha fazla bilgi edinmek için Imagify incelememize bakın.

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

Etkinleştirdikten sonra, 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üğmesine tıklayın.

Bir iş e-posta adresi girmeniz istenecektir. Ardından, API anahtarınızı içeren bir e-posta için gelen kutunuzu kontrol edebilirsiniz. Anahtarı kopyalayıp eklentinin ayarlar sayfasına 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. Orada, ‘Görüntülerin webp sürümlerini oluştur’ ve ‘Görüntüleri sitede webp formatında görüntüle’ seçeneklerinin yanındaki kutucukları işaretlemeniz gerekir.

Bunun altında, WordPress'te WebP resimlerini görüntülemek için iki teslim yöntemi arasından seçim yapabilirsiniz. Birincisi .htaccess yöntemidir ve ikincisi bir etiket kullanmaktır.

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

Siteniz için iyi çalışanlardan birini seçebilirsiniz. Ardından, alttaki ‘Kaydet ve Toplu Optimize Ediciye Git’ düğmesine tıklayın.

Bu sizi Medya » Toplu Optimizasyon sayfasına getirecektir.

Eklenti, tüm WordPress resimlerinizi arka planda otomatik olarak optimize etmeye başlayacaktır.

Çok sayıda resminiz varsa, bu biraz zaman alabilir. Endişelenmeyin, sayfayı kapatıp daha sonra geri dönebilirsiniz çünkü sayfayı kapatmak resim optimizasyon sürecini durdurmayacaktır.

WordPress'te WebP Resimlerinizi Test Etme

Optimizasyon tamamlandıktan sonra, birkaç resim içeren bir sayfayı veya gönderiyi ziyaret edebilirsiniz. Fareyi bir resmin üzerine getirin ve yeni sekmede açmak için sağ tıklayın.

Bu, resmi yeni bir tarayıcı sekmesinde açacaktır.

Adres çubuğunda .webp uzantısını görebileceksiniz.

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

Eğer bir 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 etmenizi sağlayan ücretsiz bir SG Optimizer eklentisi sunarlar. Ayrıca WordPress resimlerini optimize etme seçeneğini de içerir.

Öncelikle SG Optimizer eklentisini yükleyip etkinleştirmeniz gerekir.

Etkinleştirildiğinde, eklenti yönetici kenar çubuğunuza ‘SG Optimizer’ etiketli yeni bir menü öğesi ekleyecektir. Buna tıklamak sizi eklentinin ayarlar sayfasına götürecektir.

Buradan, SiteGround'un yerleşik önbellekleme sistemini kullanmak isterseniz önbellekleme ayarlarını açabilirsiniz.

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

Bunun altında, ‘Toplu WebP Dosyaları Oluştur’ seçeneğini göreceksiniz.

Bu seçeneğin geçiş düğmesine tıklamak, WordPress medya kitaplığınızdaki tüm resim dosyaları için WebP kopyaları oluşturmaya başlayacaktır.

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

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

Web sitenizin WebP resimleri sunup sunmadığını görmek için sitenizdeki birkaç resim içeren bir sayfayı açmanız gerekir.

Ardından, sağ tıklayın ve İncele aracını seçin. Bu, geliştirici konsolunu açacaktır, burada Ağ sekmesine geçmeniz gerekir.

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.

WordPress'te Görüntü Kullanımı Hakkında Uzman Rehberleri

Umarım bu makale WordPress'te WebP resimlerini nasıl kullanacağınızı öğrenmenize yardımcı olmuştur. Ayrıca WordPress sitenizde resim kullanmaya yönelik diğer bazı kılavuzları da görmek isteyebilirsiniz:

• WordPress'e Görselleri Doğru Şekilde Ekleme (Adım Adım)
• WordPress'te Öne Çıkan Görseller veya Gönderi Küçük Resimleri Nasıl Eklenir
• WebP vs. PNG vs. JPEG: WordPress için En İyi Görüntü Formatı
• Kaliteyi Kaybetmeden Web Performansı İçin Resimleri Nasıl Optimize Edersiniz
• En İyi WordPress Görüntü Sıkıştırma Eklentileri Karşılaştırıldı
• Blog Yazılarınız İçin Daha İyi Resimler Oluşturma Araçları
• Görsel Yönetimi İçin Harika WordPress Eklentileri (Güncellendi)
• WordPress'te Resim Alt Metni ve Resim Başlığı – Fark Nedir?
• WordPress Görüntüleri Sitenizde Nereye Kaydeder?
• WordPress'te Görselleri Kolayca Yavaş Yükleme

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