Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te WebP Görselleri Nasıl Kullanılır (3 Yöntem)

Görüntü kalitesini daha hızlı yükleme süreleriyle dengelemenin önemini biliyoruz. Birçok web sitesi sahibi bize tam da bunu yapmak için WebP görüntülerini kullanmanın en iyi yolunu soruyor.

WebP görüntüleri, görüntü kalitesinden önemli ölçüde ödün vermeden dosya boyutunu azaltarak 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.

Sorun şu ki, WordPress WebP görüntülerinin yüklenmesini veya görüntülenmesini yerel olarak desteklemiyor.

Bu makalede, WordPress’te WebP görsellerini nasıl kolayca kullanabileceğinizi göstereceğiz.

Adding WebP images in WordPress

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

Subscribe to WPBeginner

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.

EWWW Wizard

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.

WebP conversion in EWWW

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.

Insert rewrite rules

‘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.

WebP Delivery method successful

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.

Select files in Media

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.

Bulk Optimize

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.

Run optimization

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 image conversion finished

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.

checking image

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.

Verify WebP image is served

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.

Create Imagify API key

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.

Imagify WebP Settings

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.

Save settings and start image optimizer

Bu sizi Medya ” Toplu Optimizasyon sayfasına götürecektir.

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

Optimization status

Ç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.

checking image

Bu, görüntüyü yeni bir tarayıcı sekmesinde açacaktır.

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

Verify WebP image is served

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.

SG Optimizer settings

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.

Enable WebP images in SG Optimizer

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.

Bulk generate WebP images

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.

Viewing WebP Images in developer tools

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ı

Artık WordPress’te WebP görsellerini nasıl kullanacağınızı bildiğinize göre, WordPress sitenizde görselleri kullanmak için diğer bazı kılavuzları görmek isteyebilirsiniz:

Umarız bu makale WordPress’te WebP görsellerinin nasıl kullanılacağını öğrenmenize yardımcı olmuştur. Ayrıca e-posta bülteni oluşturma kılavuzumuza ve web siteniz için en iyi iş telefonu hizmetlerine yönelik uzman seçimlerimize de göz atmak isteyebilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

16 yorumBir Cevap Bırakın

  1. 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 :)

      Yönetici

  2. 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.

      Yönetici

  3. 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!

      Yönetici

  4. 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.

      Yönetici

  5. 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.

      Yönetici

  6. Theo

    here’s what I’m looking for,
    Very helpful

    • WPBeginner Support

      Glad our guide was helpful!

      Yönetici

  7. Kim

    Thanks so much for the quick reply!

    • WPBeginner Support

      Glad we could help :)

      Yönetici

  8. 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 :)

      Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.