Hepimiz web sitelerimizin harika görünmesini ve hızlı yüklenmesini isteriz. WPBeginner’da, iyi görüntü kalitesini hızlı yükleme süreleriyle dengelemeyi anlıyoruz. Birçok web sitesi sahibi performansı artırmak için modern görüntü formatları kullanıyor ve bu zorluğu çözmek için bize WebP görüntülerini kullanmayı soruyor.
WebP görüntüleri, görüntü dosyalarınızı küçültürken aynı zamanda harika görünmesini sağlayan yeni bir görüntü formatı türüdür. Bu, web sitenizin daha hızlı yüklenmesi ve daha az bant genişliği kullanması anlamına gelir.
Ancak WordPress, WebP görüntülerini yüklemek veya görüntülemek için yerleşik desteğe sahip değildir. Resimlerinizi optimize etmeye çalışıyorsanız bu bir sorun olabilir.
Bu makalede, WordPress web sitenizde WebP görüntüleri kullanmanın basit bir yolunu göstereceğiz. Bu, görüntü kalitesinden ödün vermeden sitenizin performansını artırmanıza yardımcı olacaktır.

WebP Nedir?
WebP, web üzerinde kullanılacak görüntüler için daha yeni bir dosya formatıdır. WebP görüntü formatını kullanarak, görüntüleriniz kalite kaybı olmadan PNG ve JPEG’e göre dosya boyutunda %25-34 daha küçük olacaktır.
Görüntüler web sitenizi yavaşlatıyorsa, bunları WebP formatına dönüştürmek sayfa yükleme hızı testi puanlarınızı artırabilir.
Görüntüleri web için optimize etme kılavuzumuzda görüntü sıkıştırma hakkında bilgi edinebilirsiniz.
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 modern tarayıcıların çoğu WebP görüntülerini desteklemektedir.
WordPress’te WebP Görselleri Kullanmalı mısınız?
WebP görüntüleri WordPress web sitenizi hızlandırmanıza yardımcı olabilir. WordPress önbellekleme eklentisi, CDN ve daha fazlası ile birlikte kullanılması önerilen en iyi uygulamadır.
WordPress 5.8‘den bu yana, WordPress varsayılan olarak WebP görüntülerini desteklemektedir. Bu, WebP resimlerinizi bir eklenti kullanmadan kaydedebileceğiniz ve WordPress web sitenize yükleyebileceğiniz anlamına gelir.
Ancak bunu söyledikten sonra, yine de WordPress sitenizde bir görüntü sıkıştırma eklentisi kullanmak isteyebilirsiniz. Kullanıcılarınızın çoğu desteklenmeyen tarayıcılar kullanıyorsa, bir görüntü sıkıştırma eklentisi kullanmayı düşünmelisiniz.
Görüntü sıkıştırma eklentileri mevcut görüntülerinizi WebP formatına dönüştürebilir ve henüz WebP’yi desteklemeyen tarayıcılarda JPEG veya PNG görüntülerini yedek seçenek olarak görüntüleyebilir.
Sitenizde çok sayıda resim kullanılıyorsa ve bunlar WordPress blogunuzu yavaşlatıyorsa, WebP resimleri kullanmayı kesinlikle düşünmelisiniz.
WordPress’te WebP görsellerini nasıl kullanacağınız aşağıda açıklanmıştır. Size birden fazla yöntem göstereceğiz, böylece sizin için en uygun olanı seçebilirsiniz:
Video Eğitimi
Yazılı talimatları tercih ediyorsanız, okumaya devam edin.
Yöntem 1: WordPress’te EWWW Optimizer ile WebP Görüntüleri Kullanma
EWWW Image Optimizer, WordPress görüntülerinizi optimize etmenizi sağlayan en iyi WordPress görüntü sıkıştırma eklentilerinden biridir. Ayrıca WebP Görüntülerini destekler ve bunları 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 yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki 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ı sizi karşılayacaktır, 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üştürme’ seçeneğinin yanındaki kutuyu işaretleyin.

Bundan sonra, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklayın.
Ardından, WebP Dönüştürme bölümüne ilerlemeniz 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 otomatik olarak bu yeniden yazma kurallarını .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önecektir.

Bazen eklenti kuralları ekleyemeyebilir. Bu durumda, yeniden yazma kurallarını eklentinin ayarlar sayfasından kopyalamanız ve .htaccess dosyanızın altına manuel olarak yapıştırmanız gerekir.
İşiniz bittiğinde, eklentinin ayarlar sayfasına 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 web 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 Rewriting veya WebP Rewriting yöntemlerinden birini seçebilirsiniz. Bunlar .htaccess yönteminden biraz daha yavaştır, ancak işi halledeceklerdir.
Eski Görüntülerinizi WebP Sürümlerine Toplu Olarak Dönüştürün
EWWW Image Optimizer, önceden yüklediğiniz resim dosyalarınızı kolayca WebP resimlerine dönüştürmenizi sağlar. 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. Eğer 1000’den fazla resminiz varsa, bu resimler 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 Eylemler’ 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 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örselleri Tara’ düğmesine tıklayın. Eklenti daha sonra size bulduğu görüntülerin sayısını gösterecektir, böylece devam etmek için Optimize Et düğmesine tıklayabilirsiniz.
Resimleriniz artık optimize edilecek ve EWWW Optimizer resimleriniz için WebP sürümleri oluşturacaktır.

WebP Görüntü Teslimatınızı Test Etme
Görsellerinizi optimize ettikten sonra, birkaç görsel içeren bir blog gönderisine gidebilirsiniz.
Fareyi herhangi bir resmin üzerine getirin ve resmi yeni bir sekmede açmak için sağ tıklayın.

Bu, görüntüyü yeni bir tarayıcı sekmesinde açacaktır.
Adres çubuğunda .webp
uzantısına sahip olduğunu görebileceksiniz.

Eğer eklenti WebP görüntüsünü sunamıyorsa, eklentinin ayarlar sayfasına geri dönebilirsiniz. Buradan, WebP teslim seçeneğini ‘JS WebP Rewriting’ veya ‘WebP Rewriting’ yöntemleriyle değiştirebilirsiniz.
Yöntem 2: Imagify ile WordPress’te WebP Görüntülerini Kullanma
Imagify, en iyi WordPress önbellekleme 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 etmenizi ve WebP görüntü formatına dönüştürmenizi sağlar. 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 ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, 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. Bundan sonra, 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 ilerlemeniz gerekir. Burada ‘Görsellerin webp versiyonlarını oluştur’ ve ‘Görselleri sitede webp formatında görüntüle’ seçeneklerinin yanındaki seçenekleri işaretlemeniz gerekir.

Bunun altında, WordPress’te WebP görüntülerini görüntülemek için iki dağıtım yönteminden birini seçebilirsiniz. Bunlardan ilki .htaccess yöntemi, ikincisi ise bir etiket kullanmaktır.
.htaccess yöntemi daha hızlıdır, ancak bir CDN hizmeti kullanıyorsanız çalışmaz. Etiket yöntemi de CDN’lerle çalışır, ancak bazı WordPress temalarını bozabilir.
Siteniz için uygun olan herhangi birini seçebilirsiniz. Bundan sonra, alttaki ‘Kaydet ve Toplu Optimize Ediciye Git’ düğmesine tıklayın.

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

Çok sayıda görseliniz varsa, bu işlem biraz zaman alabilir. Endişelenmeyin, sayfayı kapatıp daha sonra geri dönebilirsiniz çünkü sayfayı kapatmak görüntü optimizasyon sürecini durdurmayacaktır.
WebP Görüntülerinizi WordPress’te Test Etme
Optimizasyon tamamlandıktan sonra, birkaç resim içeren bir sayfayı veya gönderiyi ziyaret edebilirsiniz. Farenizi bir resmin üzerine getirin ve ardından sağ tıklayarak ‘Resmi yeni sekmede aç’ seçeneğini seçin.

Bu, görüntüyü 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ülerini 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 etmenizi sağlayan ücretsiz bir SG Optimizer eklentisi sunuyorlar. Ayrıca WordPress görüntülerini optimize etme seçeneğini de içerir.
İlk olarak, SG Optimizer eklentisini yüklemeniz ve etkinleştirmeniz gerekir.
Etkinleştirmenin ardından eklenti, yönetici kenar çubuğunuza ‘SG Optimizer’ etiketli yeni bir menü öğesi ekleyecektir. Üzerine tıkladığınızda sizi eklentinin ayarlar sayfasına götürecektir.

SiteGround’un yerleşik önbellekleme sistemini kullanmak istiyorsanız buradan önbellekleme ayarlarını açabilirsiniz.
Bundan sonra, Medya Optimizasyonu sekmesine geçebilir ve ‘Yeni Görüntülerin WebP Kopyalarını Oluştur’ seçeneğini açabilirsiniz.

Bunun altında, ‘WebP Dosyalarını Toplu Oluşturma’ seçeneğini göreceksiniz.
Bu seçeneğin geçiş düğmesine tıklamak, WordPress medya kitaplığınızdaki tüm görüntü dosyaları için WebP kopyaları oluşturmaya başlayacaktır.

Tamamlandığında, WordPress siteniz WebP görüntüleri sunmaya başlayacaktır.
WebP Görüntülerini SG Optimizer’da Test Etme
Web sitenizin WebP görüntüleri sunup sunmadığını görmek için sitenizde birkaç görüntü içeren bir sayfa açmanız gerekir.
Bundan sonra, sağ tıklayın ve İncele aracını 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üklendiğinde, geliştirici konsolunda tüm görsellerin yüklendiğini göreceksiniz.
WordPress’te Görsel Kullanımına İlişkin Uzman Kılavuzları
Bu makalenin WordPress’te WebP görsellerini nasıl kullanacağınızı öğrenmenize yardımcı olacağını umuyoruz. WordPress sitenizde görselleri kullanmak için diğer bazı kılavuzları da görmek isteyebilirsiniz:
- WordPress’te Görseller Nasıl Doğru Şekilde Eklenir (Adım Adım)
- WordPress’te Öne Çıkan Görseller veya Yazı Küçük Resimleri Nasıl Eklenir
- WebP vs. PNG vs. JPEG: WordPress için En İyi Görüntü Formatı
- Görüntüleri Kaliteden Ödün Vermeden Web Performansı İçin Optimize Etme
- En İyi WordPress Görüntü Sıkıştırma Eklentileri Karşılaştırıldı
- Blog Yazılarınız İçin Daha İyi Görseller Oluşturmanıza Yardımcı Olacak Araçlar
- Görselleri Yönetmek için Harika WordPress Eklentileri (Güncellendi)
- WordPress’te Resim Alt Metni ve Resim Başlığı – Aradaki Fark Nedir?
- WordPress Sitenizdeki Görselleri Nerede Depolar?
- WordPress’te Görseller Nasıl Kolayca Tembel Yüklenir?
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
MOINUDDIN WAHEED
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Admin
emir
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Admin
Ashikur Rahman
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Admin
Rebecca
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support
It is not required but is useful for the sites that use that information.
Admin
Theo
here’s what I’m looking for,
Very helpful
WPBeginner Support
Glad our guide was helpful!
Admin
Kim
Thanks so much for the quick reply!
WPBeginner Support
Glad we could help
Admin
Kim
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support
The plugin will automate the process for new uploads
Admin