WordPress’te WebP görüntüleri nasıl kullanılır (%35’e kadar büzülme görüntü dosyası boyutları)

WordPress sitenizi hızlandırmak istiyorsanız, resim dosyası boyutunuzu azaltmak önemli bir yatırım getirisi sunar. Ortalama olarak, görüntü web sayfası dosyasının boyutunun yaklaşık yarısına ulaşır, böylece küçük onarımlar bile çok büyük sonuçlar üretebilir. WebP bu konuda size gerçekten yardımcı olabilir!
WebP, görünümünü değiştirmeden görüntünün boyutunu azaltmanıza yardımcı olabilecek modern bir görüntü formatıdır. Ortalama olarak, görüntüleri WebP’ye nasıl dönüştüreceğini öğrenmek, gerçek kaliteyi kaybetmeden dosya boyutlarını ~% 25-35’e kadar azaltabilir. Çoğu modern tarayıcı ve WordPress 5.8+, kutunun dışında WebP’yi destekler. Bu makalede, bu ilginç yeni görüntü formatında daha fazla bilgi edineceğiz ve size büyüklüğünden nasıl yararlanabileceğinizi göstereceğiz.
Hazır? Başlayalım!
WebP nedir? Peki, webp dosyası nedir? Kısacası, WebP, görüntüleri popüler görüntü formatlarından daha iyi optimize etmek için Google tarafından geliştirilen bir resim biçimidir (o zaman). Örneğin, JPEG veya JPG ve PNG gibi bir görüntü formatınız var. Not: Çeşitli görüntü dosyalarının web sitenizin hızını nasıl etkileyebileceğine bakın. WebP, yalnızca daha küçük dosya boyutlarında aynı resim dosyasını göndermeye odaklanır. Görüntü dosyasının boyutunu azaltarak, yine de web sitenize ziyaretçilere aynı deneyimi sağlayabilirsiniz, ancak siteniz daha hızlı yüklenecektir.
Örneğin, Google’ın WebP Sıkıştırma Çalışmasında Google, ortalama WebP görüntü dosyasının bulunduğunu buldu:
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.
Sitenizi PagePeed Insights aracılığıyla çalıştırırsanız, birçok öneriden biri WebP: Google PagePeed Insights gibi yeni nesil formatta görüntüleri sunmaktır WebP görüntülerini kullanmayı önerir, böylece Google WebP formatının bir indirgeme nasıl ulaşması Bu dosya boyutunda mı? İlk olarak, bu kayıplı ve kayıpsız sıkıştırmayı destekler, bu nedenle doğru azalma kayıplı veya kayıpsız sıkıştırma kullanıp kullanmadığınıza bağlı olacaktır.

Kayıplı sıkıştırma ile WebP, dosya boyutunu azaltmak için “öngörücü kodlama” adı verilen bir şey kullanır. Öngörücü kodlama, değeri tahmin etmek ve daha sonra sadece farkı kodlamak için görüntüdeki komşu piksel değerlerini kullanır. Bu, VP8 anahtar çerçevesinin kodlanmasına dayanır. Kayıpsız WebP, WebP ekibi tarafından geliştirilen çok daha karmaşık bir dizi yöntem kullanır. WebP sıkıştırma teknikleri hakkında ayrıntılı olarak öğrenmek istiyorsanız, bu makale iyi bir başlangıç ​​noktasıdır. WebP’yi hangi web tarayıcısı destekliyor? Böylece WebP görüntüleri işlev görür, ziyaretçi web tarayıcıların bunu desteklemesi gerekir. Ne yazık ki, tarayıcı desteği hızla gelişmiş olsa da, WebP uyumluluğu hala evrensel değildir.
Popüler tarayıcılar tarafından desteklenen WebP resimleri aşağıdakiler gibi:
Chrome (masaüstü ve hücresel)
Firefox (masaüstü ve hücresel)
Microsoft Edge
iOS ve MacOS Safari (özellikle MacOS 11 Big Sur ve daha yeni)
Opera (masaüstü ve hücresel)
Bu yazıyı yazdığımızda, Safari sadece kısmi bir webp görüntüsünü destekledi. Internet Explorer’ın WebP desteği de yoktur (ancak Krom’a dayandığı için Edge WebP’yi destekler). Bununla birlikte, IE kullanımı toplam internet kullanıcılarının% 1’inden daha azına küçülmüştür. Bu, web’deki herkes için bir avantaj! Toplamda, İnternet kullanıcılarının yaklaşık% 95’i WebP’yi destekleyen bir tarayıcı kullanıyor. Bu nedenle, çoğunluk desteğine sahip olmasına rağmen,% 5, özellikle daha uzun macOS sürümünde bir safari kullanıcısı olduğunda küçük bir engeldir. Aşağıdaki WordPress WebP öğreticimizde, tüm ziyaretçilerinizin olağanüstü deneyime sahip olması için bunu nasıl ele alacağınızı göstereceğiz. Tüm ana tarayıcılarda WebP desteği. WebP Boyutunun Karşılaştırılması VS JPG vs PNG Google Testine göre WebP görüntüleri:
Karşılaştırılabilir bir JPEG görüntüsünden% 25-34 daha küçük.

Benzer PNG görüntülerinden% 26 daha küçük.
Google’ın metodolojisi hakkında daha fazla bilgi edinmek istiyorsanız, aşağıdaki tüm sonuçlara doğrudan bir bağlantı bulabilirsiniz:
JPEG
Png
Her iki test de 11.000’den fazla görüntüye dayanmaktadır:
Ünlü Lenna görüntüsü
Orijinal Kodak renkli görüntü devresinden 24 resim
Tecnick.com’dan 100 resim
Google görüntülerinden 11.000’den fazla görüntüden rastgele örnek
WordPress’te bir WebP görüntüsü nasıl kullanılır WordPress 5.8 ile başlayarak WebP görüntü biçimini JPEG, PNG ve GIF formatıyla aynı şekilde kullanabilirsiniz. Görüntünüzü medya kitaplığına yükleyin ve içeriğinize ekleyin. WordPress 5.8+ varsayılan olarak WebP biçimini desteklediğinden, WebP resimlerini yüklemek için üçüncü taraflı eklentileri yüklemenize gerek yoktur. Bu, çoğu genel kullanım vakası için yeterlidir. Hemen başlamak için WordPress 5.8+ üzerinde WebP görüntülerinin kullanımı hakkında kısa kılavuzumuza başvurabilirsiniz. WordPress’teki WebP desteği hakkında bir uyarı okumanızı öneririz. Ancak, insanların yaklaşık% 5’i (özellikle eski macOS’taki Safari kullanıcıları) WebP’yi desteklemeyen bir web tarayıcısı kullanır. WebP görüntülerini dönüştürür ve doğrudan içeriğinizde kullanırsanız, bu ziyaretçiler resimlerinizi göremez, bu da bunları keşfetme deneyimlerine zarar verir. Buna ek olarak, WebP görüntüleri üretmek, çoğu kamerada, akıllı telefonlarda ve çevrimiçi görüntü kütüphanelerinde varsayılan görüntü dosyası formatları olan JPG/JPEG görüntülerini almak kadar kolay değildir. WordPress, WebP formatına otomatik görüntü dönüştürmeyi desteklemez (henüz değil!).
Merak etme! Bir çözüm var. Orijinal görüntünüzü WebP formatına dönüştüren bir WordPress eklentisi kullanabilirsiniz ve ayrıca ziyaretçilerin tarayıcısı WebP’yi desteklemiyorsa orijinal görüntüleri yedekleme olarak sağlar. Örneğin, JPEG dosyalarını sitenize yüklerseniz, eklenti:
JPEG dosyalarını WebP’ye dönüştürün ve Chrome, Firefox, Edge, vb.
Orijinal JPEG dosyasını Safari (daha uzun bir macOS sürümünde) ve WebP’yi desteklemeyen diğer tarayıcılarla keşfeden ziyaretçilere gösterin.
Bu şekilde, herkes resminizi görebilir ve herkes en hızlı deneyimi alır. Aşağıda, hepsi Kinsta ve Kinsta CDN ile çalışan en iyi WordPress WebP eklentilerinden bazılarını tartışacağız.
Bilgi Kinsta’da yayınlıyorsanız, bu eklentilerin bazıları için WebP önbellek kovası için Nginx kuralları yapabilmemiz için desteğimizle iletişime geçmelisiniz. Kısa piksel
WordPress ShortPixel ShortPixel eklentisi, boyutu otomatik olarak değiştirmenize ve WordPress sitenize yüklediğiniz görüntüleri sıkıştırmanıza yardımcı olabilecek popüler bir WordPress görüntü optimizasyonu eklentisidir.
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun

Özellikler listesinin bir parçası olarak, ShortPixel, görüntüleri WebP’ye otomatik olarak dönüştürmenize ve görüntüyü destekleyen tarayıcıya sunmanıza yardımcı olabilir. Shortpixel, ayda ~ 100 görüntüyü ücretsiz olarak optimize etmenizi sağlayan sınırlı bir ücretsiz pakete sahiptir. Ücretli paketler ayda 4,99 $ ‘dan 5.000 resim/kredi veya 10.000 kredi paketi için bir kez 9.99 $’ a başlar. ShortPixel, kredi olarak optimize ettiğiniz her WordPress görüntü boyutunu hesaplar. Dolayısıyla, görüntü küçük resimlerinin birkaç boyutunu optimize etmek istiyorsanız, bir görüntü çok fazla kredi kullanabilir. Görüntü için dosya boyutu sınırı yoktur.
Kısa piksel kredinizi sınırsız web sitesine yayabilirsiniz – site başına sınır yoktur (ve tüm web siteleriniz aynı kısa piksel hesabını kullanabilir). WordPress’te WebP görüntülerini sunmak için ShortPixel kullanmak için WordPress.org’dan eklentileri yüklemeniz ve API anahtarınızı (ücretsiz bir kısa piksel hesabına kaydolarak alabileceğiniz) eklemeniz gerekir. Genel sekmede, görüntü optimizasyonunun nasıl çalıştığına dair temel ayarları ayarlayabilirsiniz. Örneğin, hangi sıkıştırma seviyesinin kullanıldığı ve görüntünün boyutunu değiştirip değiştirmeyeceğiniz veya değiştirilmeyeceği: WebP görüntülerini etkinleştirmek için kısa pikselde sıkıştırma ve görüntü boyutlarının seviyesini nasıl ayarlayabilir, :::
WebP resimleri için kutuyu kontrol edin
WebP sürümünü vermek için kutuyu kontrol edin … (Bu, ilk kutuyu kontrol ettikten sonra görünür)
etiket sözdizimini kullanmak için radyo düğmesini seçin (bu, önceki kutuyu kontrol ettikten sonra görünür)

Varsayılanlığı yalnızca WordPress kancalarının seçimi ile bırakın

WordPress WebP görüntülerini kısa pikselde nasıl etkinleştirir, ardından değişikliklerinizi kaydedin. Kinsta’da yayınlıyorsanız, ShortPixel size Nginx’te sunucu yapılandırma dosyasını yapılandırma hakkında size bir uyarı mesajı verecektir. Bu ayarı yapılandırmak için Kinsta Destek ile iletişime geçebilirsiniz; sizin için bir sunucu yapılandırması hazırlamaktan mutluluk duyarız. Hayal etmek
Imagify WordPress eklentisinin, WP Rocket (Kinsta ile çalışan birkaç önbellek eklentisinden biri) ile aynı geliştiriciden popüler bir görüntü optimizasyon eklentisi olduğunu hayal edin.
WordPress siteniz için yavaş bir ana bilgisayardan sıkıldınız mı? WordPress uzmanlarından çok hızlı bir sunucu ve 7/24 dünya standartlarında destek sağlıyoruz. WordPress sitenize yüklediğiniz resmin boyutunu otomatik olarak sıkıştırabilecek ve değiştirebilecek planımıza bakın. Ardından, bu, onu WebP’ye dönüştürmenize ve bu sürümü destekleyen tarayıcılarla ziyaretçilere sunmanıza yardımcı olabilir. Özellikler açısından, kısa pikseller ve hayaller birçok benzerliğe sahiptir. En önemli fark, fiyatı gördüğünüzde gelir. Shortpixel sizi görüntü başına sınırsız resimlere göre toplarken, sizi görüntü sınırları olmadan genel dosya boyutuna göre ücretlendirir. Bu nedenle, birçok büyük görüntüyü optimize etmeniz gerekiyorsa, kısa piksel yaklaşımları daha ucuz olabilir. Ancak çok sayıda küçük görüntüyü optimize etmeniz gerekiyorsa, Imagify’ın yaklaşımı daha uygun olabilir. Imafy, ayda 25 MB optimizasyona izin veren sınırlı bir serbest seviyeye sahiptir. Bundan sonra, ücretli paketler ayda 4,99 $ ‘dan 1 GB’a veya bir kerelik kredi için 1 GB’a başlar. ShortPixel gibi, hesap sınırlarınızı sınırsız web sitelerine yayabilirsiniz. WordPress WebP resimlerini göndermek için Imagify’ı kullanmak için, wordpress.org adresinden bir eklenti yüklemeniz ve başlangıç ​​için ateş tuşunuzu eklemeniz gerekir. Eklentiyi etkinleştirdikten sonra, sıkıştırma seviyenizi seçmek için bir Genel Ayarlar kutusu kullanabilirsiniz.
WebP görüntülerini etkinleştirmek, optimizasyon bölümüne doğru ilerlemek ve WebP formatı bölümünü bulmak için Image’daki sıkıştırma seviyesi nasıl ayarlanır:
Resmin bir webp sürümünü oluşturmak için kutuyu kontrol edin

Resimleri WebP biçiminde görüntülemek için kutuyu işaretleyin …

etiketini kullanmak için Radyo düğmesini seçin WordPress WebP görüntüsünü ShortPixel gibi Imagify’da nasıl etkinleştireceğinizi, Kinsta’da yayınlıyorsanız, WebP önbellek kovası (Kinsta Desteği ile iletişime geçin) için NGINX kuralları yapmanız gerekir.Optimol
WordPress Optimol Optimole eklentisi, Imagify ve Shortpixel’den biraz farklı çalışan bir WordPress görüntü optimizasyonu eklentisidir.Optimole, görüntünüzün boyutunu otomatik olarak sıkıştırabilir ve değiştirebilir.Bununla birlikte, diğer iki önemli özelliğe de sahiptir:
Görüntünüzü CDN üzerinden (Amazon Cloudfront tarafından desteklenir) sunabilir.

Optimole’in her ziyaretçi için optimum boyutlu görüntüler sağlayacağı gerçek zamanlı uyarlanabilir görüntüler sunar.Örneğin, küçük bir ekranda araştıran biri, retina ekranında araştıran birinden daha düşük çözünürlüklü bir görüntü alacaktır.
Bu yaklaşım, Cloudiny, Imgix, Keycdn görüntü işleme, vb. Gibi diğer gerçek zamanlı optimizasyon/manipülasyon hizmetlerine benzer.Optimole ayrıca, bu gerçek zamanlı görüntüyü optimize etmenin bir parçası olarak destekleyen tarayıcılarla ziyaretçilere WebP görüntüleri de gönderebilir.Optimole, görüntüleri ayda yaklaşık ~ 5.000 ziyaretçiye işleyebilen sınırlı bir ücretsiz pakete sahiptir.Bundan sonra, ücretli paketler ~ 25.000 ziyaretçi için ayda 19 $ ‘dan başlıyor.Başlamak için, wordpress.org’dan bir eklenti yüklemeli ve bir yangın anahtarı ile etkinleştirmelisiniz (ücretsiz bir optimole hesabı kaydederek alabilirsiniz).Bunu yaptıktan sonra Optimole, görüntünüzü otomatik olarak optimize etmeye ve CDN üzerinden göndermeye başlar.WebP desteği aktif olarak varsayılandır, bu nedenle onu manuel olarak etkinleştirmeye gerek yoktur.Sıkıştırma ve ölçeklendirme davranışı gibi diğer ayarları yapılandırmak için Medya → Optimole → Ayarlar:

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir