WordPress’te WebP dosyaları nasıl kullanılır

Artık çoğumuzun görüntü optimizasyonunun çok önemli olduğunu biliyoruz çünkü WordPress sitenizin toplam yükleme süresinde büyük bir rol oynuyor. Bugün sizinle Google WebP dosyalarını WordPress sitenize nasıl entegre edeceğiniz konusunda kolay bir alternatif paylaşmak istiyoruz. Bazı kullanıcılar görüntü dosyası boyutlarında%70’den fazla bir azalma gördü! WebP nedir? WebP’ye aşina değilseniz, bu, daha küçük ve daha hızlı görüntüler oluşturmak amacıyla Google’da web performans ekibi tarafından oluşturulan bir resim dosyası biçimidir. Bu ilk olarak 2010’da açıklandı ve kayıplı ve kayıpsız sıkıştırma yöntemlerine sahipti. Görüntü, kullandığı mim türüne göre web sunucusundan web tarayıcısına gönderilir.
% 26 Kayıpsız WebP görüntüsü PNG’den daha küçüktür ve kayıplı WebP% 25-34 görüntü JPEG’den daha küçüktür. YouTube ve eBay gibi şirketler, sitelerinin çoğuna gizlice güç sağlamak için WebP’yi zaten kullanıyor. Aşağıda, verandalarında ortalama 30 webp dosyası olduğu bir eBay örneği bulunmaktadır.

WebP neden bu kadar önemli? HTTPrachive’a göre, Ağustos 2016’da görüntüler web sayfalarının ortalama ağırlığının% 64’ünden fazlasına katkıda bulundu. Genellikle bu, CSS, JS ve HTML’nizin bir kombinasyonundan daha fazlasıdır. Bu nedenle güçlü bir görüntü optimizasyon yöntemi seçin ve webp gibi görüntü formatları çok önemlidir, böylece sayfanızın ağırlığını mümkün olduğunca azaltabilirsiniz. Genel olarak, sayfanız ne kadar küçük olursa, yükleme o kadar hızlı olur. Ve bu sadece ziyaretçilerinizi değil, aynı zamanda Google’ı da memnun edecek, çünkü sayfa hızı bir sıralama faktörüdür.
WebP desteği artık WebP çok ilginç olsa da, tarayıcı desteğinden bahsetmek de önemlidir. Tüm modern tarayıcılar bugün WebP’yi desteklemiyor. Canuse’a göre, WebP şu anda Chrome 23+, Opera 39+, Opera Mini’nin tüm sürümleri, Android 4.3+ tarayıcı ve Android için Chrome’da desteklenmektedir. Ama bekleyin! Çok hayal kırıklığına uğramayın, çünkü öğreticide aşağıda göstereceğiz, desteklenen tarayıcılara ve JPG/PNG’yi yedekleme olarak göndermek için bir yöntem var. Bu, desteklenmeyen bir tarayıcının hasarlı görüntüleri görmeyeceği, yalnızca daha önce gördüklerini görecekleri anlamına gelir. WebP hakkında düşünün, WordPress sitenize ek olarak, geçiş değil.

W3Schools’a göre, Chrome’un tarayıcı pazar payında%70’in biraz üzerinde bir tekel var. Ancak pazar payını sadece güçlü bir kanıt olarak almayın, kendi ziyaretçi verilerinizi görün ve hangi tarayıcıyı kullandıklarını görün, çünkü nişinize göre farklı olabilir. İstatistiklerin ne kadar eğimli olduğunu görünce şaşırabilirsiniz. “Kitle” altındaki Google Analytics’te “Tarayıcı ve OS” i tıklayabilir ve sitenizi açtıklarında insanların hangi tarayıcı kullandıklarını görebilirsiniz. Rastgele web sitelerini çekiyoruz ve aşağıda görebileceğiniz gibi, ziyaretçilerin% 67’si Chrome’dan ve Opera’nın% 1’inden geliyor. Yani bu kişilerin% 68’i WebP görüntü dosyası biçimini görebilir ve faydalanabilir!
WordPress’te bir webp dosyası nasıl kullanılır bugünün örneğinde WordPress’te WebP’yi etkinleştirmek ve çalıştırmak için iki farklı WordPress eklentisinin bir kombinasyonunu kullanacağız. Bu, Global İçerik Teslimat Ağı (CDN) olan Keycdn’de ekip tarafından yapıldı ve geliştirildi.

[Premium] Optimus Görüntü Optimize Edici: WordPress için Kayıpsız Görüntü Sıkıştırma Eklentisi, görüntüleri WebP’ye dönüştürür [ÜCRETSİZ] WordPress Cache Enabler: WebP’yi desteklenen tarayıcılara sunmanızı sağlayan önbellek eklentisi
Optimus Optimus Image Optimus Image Optimer’ı WordPress deposundan, Optimus.io’dan veya eklenti kontrol panelinizden indirebilirsiniz. Not: Görüntünüzü WebP’ye dönüştürmek istiyorsanız premium lisans gerektirir. Yüklendikten sonra, eklenti ayarlarında “WebP dosyasını” etkinleştirebilirsiniz.
WebP etkinleştirildikten sonra, bu temel olarak dönüştürülen her şey için ek görüntüler yapar. Yani, PNG veya JPG dosyalarını yüklerseniz, şimdi resminizin .Webp sürümü de var. Unutmayın, PNG/JPG hala gereklidir, çünkü bu hala desteklenmeyen bir tarayıcıya hizmet etmek için kullanılır. Optimus kayıpsız sıkıştırmadır, böylece PNG ve JPG’niz de sıkıştırılır.
Önceki resminizi sıkıştırdıysanız ve yine de WebP’ye dönüştürmeniz gerekiyorsa, bir kitle seçeneği de vardır.

WordPress Cache etkinleştirme Şimdi bir WebP görüntüsünüz var, WordPress’e desteklenen tarayıcılara WebP görüntüleri sunmak için ve diğer tarayıcılara PNG/JPG’yi sunmak için bir yola ihtiyacınız var. Bu, ücretsiz bir WordPress önbellek etkinleştiricisi eklentisi ile yapılabilir. Eklentiyi WordPress deposundan indirebilir veya eklenti gösterge panelinizden yükleyebilirsiniz. Yüklendikten sonra, eklenti ayarlarında “Ek bir WebP önbellek sürümü oluştur” i etkinleştirebilirsiniz.

Seçeneği etkinleştirdikten sonra, sayfanızın ek webp önbellek sürümü oluşturulur.

Ve bu kadar!Artık WordPress sitenizde çalışan bir WebP dosyasına sahip olmalısınız.JPG’nin WebP ile karşılaştırılması, elde edebileceğiniz farklılıkları göstermek için bir JPG’den WebP’ye karşılaştırma çalıştırıyoruz. > jpg-to-webp-1.jpg 758 kb 685 kb 109 kb 86% jpg-to-webp-2.jpg 599 kb 529 kb 58.8 kb

td> %90 jpg-to-webp-3.jpg 960 kb 881 kb

td> 200 kb %79 jpg-webp-4.jpg 791 kb 146 kb %83 960 kb 877 kb 71.7 KB % 93

WebP, ortalama görüntü boyutunda% 85.87’lik bir düşüş üretir. PNG WebP ile bir kez daha karşılaştırma,

Ayrıca, elde edebileceğiniz farklılıkları göstermek için WebP ile PNG karşılaştırmaları yapıyoruz. > 30 kb %32 png-to-webp-2.png 46 kb 35 kb 33 kb %28 png-ke-webp -3.png 43 kb 31 kb 25 kb %42

png-ke-webp-4.png 30 kb 24 kb 18 kb %40

td> 15 KB 11 kb 8 kb %47

-6.png 34 kb 24 kb 18 kb %47

png-to-webp-7.png 15 KB 13 kb 8 kb %47 png-to-webp-8. Png 63 kb 47 kb 44 kb %30 36 kb 33 kb %31 17 kb 14 kb 11 kb %35

png-to-webp-11.png 18 kb 13 kb

td> 9 kb %50 png-to-webp-122.png 61 kb 45 kb 39 kb %36 png-to-webp- td> 32 kb 25 kb 21 kb %35 png- to-webp-1.4.png 26 kb 21 kb 17 kb 35%

td> 14 kb 12 kb 9 kb %36

-16.png 36 kb 27 kb 24 kb %33

> png-to-webp-17.png

Td> 14 kb 12 kb 8 kb %43

-18.png 21 kb

td> 18 kb 13 kb %38

> png-to-webp-19.png 42 KB 30 kb 27 kb %36 png-to-webp-20. png 23 kb 20 kb 18 kb % 22

WebP> Ortalama görüntü boyutu%42.8 azalma ile sonuçlar.WebP tasarruflarıyla karşılaştırılabilecek bir görüntü sıkıştırması yoktur.Oh, ve WebP’nin kayıpsız sıkıştırma kullanma yeteneğine sahip olduğunu söylüyor muyuz?Bu, gerçek kalitede bir azalma görmeyeceğiniz anlamına gelir.WordPress’i hızlandırmak için daha iyi bir yol arıyorsanız, WebP iyi bir çözüm olabilir.

WordPress'te WebP dosyaları nasıl kullanılır