WordPress'te WebP Görüntüleri Nasıl Kullanılır (Görüntü Dosyası Boyutlarını %35'e Kadar Küçült)

WordPress sitenizi hızlandırmak istiyorsanız, resimlerinizin dosya boyutunu küçültmek, yatırımınızdan önemli bir geri dönüş sağlar. Ortalama olarak, görüntüler bir web sayfasının dosya boyutunun yaklaşık yarısını oluşturur, bu nedenle küçük iyileştirmeler bile devasa sonuçlar verebilir. WebP bu konuda size son derece yardımcı olabilir!

WebP, görüntülerinizin görünümünü değiştirmeden boyutunu küçültmenize yardımcı olabilecek modern bir görüntü formatıdır. Ortalama olarak, bir görüntünün WebP'ye nasıl dönüştürüleceğini öğrenmek, gözle görülür bir kalite kaybı olmaksızın dosya boyutunu ~%25-35 oranında küçültebilir.

Çoğu modern tarayıcı ve WordPress 5.8+, kutudan çıktığı haliyle WebP'yi destekler. Bu yazıda, bu heyecan verici yeni görüntü formatının derinliklerine ineceğiz ve size onun muhteşemliğinden nasıl yararlanabileceğinizi göstereceğiz.

Hazır? Başlayalım!

WebP Nedir?

Peki, bir WebP dosyası nedir? Özetle, WebP, görüntüleri popüler görüntü biçimlerinden (o zamanlar) daha iyi optimize etmek için Google tarafından geliştirilen bir görüntü biçimidir. Örneğin, JPEG veya JPG ve PNG gibi görüntü biçimleriniz var.

Not: Farklı resim dosyası türlerinin web sitenizin hızını nasıl etkileyebileceğini kontrol edin.

WebP, aynı görüntü dosyasını yalnızca daha küçük dosya boyutlarıyla sunmaya odaklanır. Resim dosyalarınızın boyutunu küçülterek, web sitenizin ziyaretçilerine aynı deneyimi yaşatabilirsiniz, ancak siteniz daha hızlı yüklenir.

Örneğin, Google'ın WebP sıkıştırma çalışmasında Google, bir WebP resim dosyasının ortalama olarak:

• Karşılaştırılabilir bir JPEG görüntüsünden %25-34 daha küçük.
• Karşılaştırılabilir bir PNG görüntüsünden %26 daha küçük.

Bu nedenle, sitenizi PageSpeed ​​Insights aracılığıyla çalıştırırsanız, birçok öneriden biri, görüntüleri WebP gibi yeni nesil biçimlerde sunmaktır :

Peki Google'ın WebP formatı, dosya boyutundaki bu küçülmeleri nasıl sağlıyor?

İlk olarak, kayıplı ve kayıpsız sıkıştırmayı destekler, bu nedenle tam azaltma, kayıplı veya kayıpsız sıkıştırma kullanmanıza bağlı olacaktır.

Kayıplı sıkıştırma ile WebP, dosya boyutunu azaltmak için "tahmini kodlama" adı verilen bir şey kullanır. Tahmine dayalı kodlama, değerleri tahmin etmek için bir görüntüdeki komşu piksellerin değerlerini kullanır ve ardından yalnızca farkı kodlar. VP8 anahtar kare kodlamasını temel alır.

Kayıpsız WebP, WebP ekibi tarafından geliştirilen çok daha karmaşık yöntemler kullanır.

WebP sıkıştırma tekniklerini detaylı olarak öğrenmek istiyorsanız bu makale iyi bir başlangıç ​​noktası olabilir.

Hangi Web Tarayıcıları WebP'yi Destekler?

WebP görüntülerinin çalışması için bir ziyaretçinin web tarayıcısının bunları desteklemesi gerekir. Ne yazık ki, tarayıcı desteği çok artmış olsa da, WebP uyumluluğu hala evrensel değil .

WebP görüntüleri, aşağıdakiler gibi popüler tarayıcılar tarafından desteklenir:

• Chrome ( masaüstü ve mobil )
• Firefox ( masaüstü ve mobil )
• Microsoft Kenarı
• iOS ve macOS Safari ( yalnızca macOS 11 Big Sur ve üstü )
• Opera ( masaüstü ve mobil )

Bu yazıyı yazdığımız sırada Safari, WebP görüntülerini yalnızca kısmen desteklemektedir.

Internet Explorer'da WebP desteği de yoktur (ancak Edge, Chromium'a dayalı olduğu için WebP'yi destekler). Ancak, IE kullanımı toplam internet kullanıcılarının %1'inden daha azına düştü. Bu, web'deki herkes için bir nimet!

Toplamda, İnternet kullanıcılarının yaklaşık %95'i WebP'yi destekleyen bir tarayıcı kullanıyor. Bu nedenle, kesinlikle çoğunluk desteğine sahip olsa da, özellikle eski macOS sürümlerinde Safari kullanıcıları söz konusu olduğunda, bu %5'lik küçük bir engeldir. Aşağıdaki WordPress WebP eğitimimizde, tüm ziyaretçilerinizin harika bir deneyim yaşaması için bununla nasıl başa çıkacağınızı göstereceğiz.

WebP vs JPG vs PNG Boyut Karşılaştırması

Google'ın testlerine göre WebP görselleri:

• Karşılaştırılabilir JPEG görüntülerinden %25-34 daha küçük.
• Benzer PNG resimlerinden %26 daha küçük.

Google'ın metodolojisi hakkında daha fazla bilgi edinmek istiyorsanız, aşağıda tam sonuçlara doğrudan bağlantılar bulabilirsiniz:

• JPEG
• PNG

Her iki test de aşağıdakiler dahil 11.000'den fazla görüntüye dayanmaktadır:

• Ünlü Lenna imajı
• Kodak gerçek renkli görüntü paketinden 24 görüntü
• Tecnick.com'dan 100 resim
• Google Görsel Arama'dan 11.000'den fazla görselden oluşan rastgele bir örnek

WordPress'te WebP Görselleri Nasıl Kullanılır?

WordPress 5.8 ile başlayarak, WebP görüntü formatını JPEG, PNG ve GIF formatlarıyla aynı şekilde kullanabileceksiniz. Görsellerinizi Medya Kitaplığınıza yükleyin ve içeriğinize ekleyin. WordPress 5.8+ varsayılan olarak WebP biçimini desteklediğinden, WebP görüntülerini yüklemek için üçüncü taraf eklentileri yüklemeniz gerekmez. Bu, en yaygın kullanım durumları için yeterli olmalıdır.

Hemen başlamak için WordPress 5.8+ sürümünde WebP görüntülerini kullanmayla ilgili hızlı kılavuzumuza başvurabilirsiniz. WordPress'te WebP desteği ile ilgili uyarıları gözden geçirmenizi öneririz.

Ancak, insanların yaklaşık %5'i (esas olarak eski macOS'taki Safari kullanıcıları) WebP'yi desteklemeyen bir web tarayıcısı kullanıyor. WebP görüntülerini dönüştürür ve bunları doğrudan içeriğinizde kullanırsanız, bu ziyaretçiler görüntülerinizi göremez ve bu da tarama deneyimlerini mahveder.

Ayrıca, WebP görüntüleri oluşturmak, çoğu kamerada, akıllı telefonda ve çevrimiçi görüntü kitaplıklarında varsayılan görüntü dosyası biçimi olan JPG/JPEG görüntüsünü almak kadar kolay değildir. WordPress, WebP formatına otomatik görüntü dönüştürmeyi desteklemez (henüz!).

Üzülme! Bir çözüm var.

Orijinal görüntülerinizi WebP formatına dönüştüren ve ayrıca bir ziyaretçinin tarayıcısı WebP'yi desteklemiyorsa orijinal görüntüyü yedek olarak sağlayan bir WordPress eklentisi kullanabilirsiniz.

Örneğin, sitenize bir JPEG dosyası yüklerseniz eklenti şunları yapar:

• JPEG dosyasını WebP'ye dönüştürün ve Chrome, Firefox, Edge vb. için WebP sürümünü sunun.
• Safari (eski macOS sürümlerinde) ve WebP'yi desteklemeyen diğer tarayıcılarda gezinen ziyaretçilere orijinal JPEG dosyasını gösterin.

Bu şekilde, herkes resminizi görebilir ve herkes mümkün olan en hızlı deneyimi elde eder.

Aşağıda, tümü Kinsta ve Kinsta CDN ile çalışan en iyi WebP WordPress eklentilerinden bazılarını inceleyeceğiz.

KısaPiksel

ShortPixel, WordPress sitenize yüklediğiniz resimleri otomatik olarak yeniden boyutlandırmanıza ve sıkıştırmanıza yardımcı olabilecek popüler bir WordPress resim optimizasyon eklentisidir.

Özellik listesinin bir parçası olarak ShortPixel, görüntüleri otomatik olarak WebP'ye dönüştürmenize ve bu görüntüleri onu destekleyen tarayıcılara sunmanıza yardımcı olabilir.

ShortPixel, ayda ~100 görüntüyü ücretsiz olarak optimize etmenizi sağlayan sınırlı bir ücretsiz plana sahiptir. Ücretli planlar, 5.000 görsel/krediye kadar aylık 4,99 ABD Dolarından veya 10.000 kredilik bir paket için tek seferlik 9,99 ABD Dolarından başlar.

ShortPixel, optimize ettiğiniz her WordPress görüntü boyutunu kredi olarak sayar. Bu nedenle, birden fazla küçük resim boyutunu optimize etmek istiyorsanız, bir resim makul bir şekilde çok sayıda kredi kullanabilir. Resimler için dosya boyutu sınırı yoktur.

ShortPixel kredilerinizi sınırsız web sitesine yayabilirsiniz - site başına sınırlama yoktur ( ve tüm web siteleriniz aynı ShortPixel hesabını kullanabilir ).

WordPress'te WebP görüntüleri sunmak için ShortPixel'i kullanmak için, WordPress.org'dan eklentiyi yüklemeniz ve API anahtarınızı eklemeniz gerekir ( ücretsiz bir ShortPixel hesabına kaydolarak alabilirsiniz ).

Genel sekmesinde, görüntü optimizasyonunun nasıl çalıştığına ilişkin temel ayarları yapabilirsiniz. Örneğin, hangi sıkıştırma düzeyinin kullanılacağı ve görüntülerin yeniden boyutlandırılıp boyutlandırılmayacağı:

WebP görüntülerini etkinleştirmek için Gelişmiş sekmesine gidin ve:

1. WebP Görselleri için kutuyu işaretleyin
2. WebP sürümlerini teslim etmek için kutuyu işaretleyin (bu, ilk kutuyu işaretledikten sonra görünür)
3. <PICTURE> etiketi sözdizimini kullanmak için radyo düğmesini seçin (bu, önceki kutuyu işaretledikten sonra görünür)
4. Varsayılanı Yalnızca WordPress kanca seçimiyle bırakın

Ardından, değişikliklerinizi kaydedin.

Kinsta'da ev sahipliği yapıyorsanız ShortPixel, Nginx'te sunucu yapılandırma dosyalarının yapılandırılması hakkında size bir uyarı mesajı verecektir. Bu ayarları yapılandırmak için Kinsta desteğine ulaşabilirsiniz, sunucu yapılandırmasını sizin için memnuniyetle kuracağız.

hayal et

Imagify, WP Rocket (Kinsta ile çalışan birkaç önbelleğe alma eklentisinden biri) ile aynı geliştiriciden popüler bir görüntü optimizasyon eklentisidir.

WordPress sitenize yüklediğiniz resimleri otomatik olarak sıkıştırabilir ve yeniden boyutlandırabilir. Ardından, bunları WebP'ye dönüştürmenize ve bu sürümleri, onu destekleyen tarayıcılarla ziyaretçilere sunmanıza da yardımcı olabilir.

Özellikler açısından ShortPixel ve Imagify birçok benzerliği paylaşıyor. En önemli fark, fiyatlandırmaya baktığınızda ortaya çıkıyor. ShortPixel sizi görüntü başına boyut sınırı olmayan görüntülere göre ücretlendirirken, Imagify görüntü sınırı olmaksızın toplam dosya boyutuna göre sizi ücretlendirir.

Bu nedenle, çok sayıda büyük resmi optimize etmeniz gerekiyorsa, ShortPixel'in yaklaşımı daha ucuz olabilir. Ancak çok sayıda küçük resmi optimize etmeniz gerekiyorsa, Imagify'ın yaklaşımı daha uygun maliyetli olabilir.

Imagify, ayda 25 MB optimizasyona izin veren sınırlı bir ücretsiz katmana sahiptir. Bundan sonra, ücretli planlar 1 GB'a kadar ayda 4,99 ABD dolarından veya tek seferlik 1 GB kredi için 9,99 ABD dolarından başlar.

ShortPixel gibi, hesap limitlerinizi sınırsız web sitesine yayabilirsiniz.

WordPress WebP görüntüleri sunmak üzere Imagify'ı kullanmak için, WordPress.org'dan eklentiyi yüklemeniz ve başlamak için API anahtarınızı eklemeniz gerekir.

Eklentiyi etkinleştirdikten sonra, sıkıştırma düzeyinizi seçmek için Genel Ayarlar kutusunu kullanabilirsiniz.

WebP görüntülerini etkinleştirmek için Optimizasyon bölümüne gidin ve WebP Formatı bölümünü bulun:

1. Görüntülerin webp sürümlerini oluşturmak için kutuyu işaretleyin
2. Görüntüleri webp formatında görüntülemek için kutuyu işaretleyin…
3. <picture> etiketlerini kullanmak için radyo düğmesini seçin

ShortPixel'de olduğu gibi, Kinsta'da ev sahipliği yapıyorsanız, WebP önbellek paketleri için bir Nginx kuralı oluşturmanız gerekir (Kinsta desteğine ulaşın).

Optimol

Optimole, Imagify ve ShortPixel'den biraz farklı çalışan bir WordPress görüntü optimizasyon eklentisidir. Optimole, resimlerinizi otomatik olarak sıkıştırabilir ve yeniden boyutlandırabilir. Bununla birlikte, aynı zamanda iki önemli özelliği daha vardır:

1. Görüntülerinizi CDN'si (Amazon CloudFront tarafından desteklenmektedir) aracılığıyla sunabilir.
2. Optimole'nin her ziyaretçi için en uygun boyuttaki görüntüyü sunacağı gerçek zamanlı uyarlanabilir görüntüler sunar. Örneğin, küçük bir ekranda gezinen biri, Retina ekranda gezinen birinden daha düşük çözünürlüklü bir görüntü alacaktır.

Bu yaklaşım, Cloudinary, imgix, KeyCDN Görüntü İşleme vb. gibi diğer gerçek zamanlı optimizasyon/manipülasyon hizmetlerine benzer.

Optimole, bu gerçek zamanlı görüntü optimizasyonunun bir parçası olarak onu destekleyen tarayıcılarla ziyaretçilere WebP görüntüleri de sunabilir.

Optimole, görüntüleri ayda yaklaşık 5.000 ziyaretçiye sunabilen sınırlı bir ücretsiz plana sahiptir. Bundan sonra, ücretli planlar ~ 25.000 ziyaretçi için aylık 19 dolardan başlar.

Başlamak için, WordPress.org'dan eklentiyi yüklemeniz ve bir API anahtarıyla etkinleştirmeniz gerekir ( ücretsiz bir Optimole hesabına kaydolarak edinebilirsiniz ).

Bunu yaptığınızda, Optimole resimlerinizi otomatik olarak optimize etmeye ve bunları kendi CDN'si aracılığıyla sunmaya başlayacaktır. WebP desteği varsayılan olarak açıktır, bu nedenle manuel olarak etkinleştirmeye gerek yoktur.

Sıkıştırma seviyeleri ve ölçekleme davranışı gibi diğer ayarları yapılandırmak için Medya → Optimole → Ayarlar'a gidebilirsiniz:

Optimole, resimlerinizi kendi CDN'si aracılığıyla teslim ettiğinden, Kinsta'da ev sahipliği yapıyorsanız herhangi bir Nginx kuralı ayarlamanıza gerek yoktur.

Özet

WordPress sitenizin resimleri, ortalama bir sayfanın dosya boyutunun büyük bir bölümünü oluşturur. Görsellerinizin boyutunu küçültmenin yollarını bulabilirseniz, kullanıcı deneyimine zarar vermeden sitenizi hızlandırabilirsiniz. WebP, karşılaştırmalı JPEG veya PNG dosyalarına kıyasla dosya boyutunda ~%25'lik bir azalma sunarak tam olarak bunu yapan modern bir görüntü formatıdır.

İnternet kullanıcılarının yaklaşık %95'i halihazırda WebP'yi destekleyen bir tarayıcı kullanıyor. WordPress 5.8+ sürümleri artık WebP'yi de destekliyor. Yani kullanmamanız için hiçbir neden yok.

Ancak, tarayıcıların az bir kısmı, özellikle eski macOS sürümlerinde Safari, hala WebP desteği sunmuyor. Bu nedenle, henüz tüm ziyaretçilere WebP görselleri sunamazsınız. Bu sorunu çözmek için, görüntüleri WebP'ye dönüştüren ve tarayıcıları tarafından desteklenen ziyaretçilere WebP sürümlerini sunan ve tarayıcıları desteklemeyen ziyaretçilere orijinal görüntüleri kullanan bir WordPress eklentisi kullanabilirsiniz.

Görüntüleri optimize etmeye yönelik daha fazla taktik için, web performansı için görüntüleri optimize etmeye yönelik tam kılavuzumuza göz atın.

WordPress'te WebP kullanımıyla ilgili herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlarda bize sorun!