WebP nedir ve WordPress’te bu resim formatının nasıl kullanılacağı
Genellikle web sayfalarının ortalama ağırlığının% 50’sine katkıda bulunan görüntülerle, görüntüleri yalnızca sunucunuzda yerden tasarruf etmekle kalmaz, aynı zamanda sayfanızın daha hızlı sunulduğundan emin olun. Neyse ki, bir WebP görüntü formatı ile, PNG’den% 26 daha küçük ve JPEG’den% 25-34 daha küçük bir boyutta daha küçük ve daha zengin bir görüntü oluşturabilirsiniz-aynı kalitesi korurken. Bu yazıda, WebP’nin ne olduğunu ve görüntü boyutunuzu önemli ölçüde azaltmak için WordPress sitenizde bu görüntü formatını nasıl kullanacağını göreceğiz.
WebP nedir? WebP, sıkıştırma, şeffaflığı ve iyi animasyonu desteklerken, JPEG, PNG ve GIF’in yerine geliştirilen Google’daki Web Performans Ekibi tarafından oluşturulan bir resim dosyası biçimidir. Bu ilk olarak Eylül 2010’da orijinal grafikler için yeni bir açık standart olarak, Web’de sıkıştırılmış kayıplı olarak açıklandı ve JPEG ile karşılaştırılabilir kaliteye sahip daha küçük dosya boyutları üretti. Kayıpsız ve yarı saydam görüntüler için destek 2012 yılında açıklandı ve WebP’yi PNG formatı için bir alternatif haline getirdi. Lossy WebP Sıkıştırma, görüntüleri kodlamak için öngörücü bir kod kullanır – CODEC VP8 Video tarafından videodaki anahtar çerçeveleri sıkıştırmak için kullanılan yöntem. Öngörücü kodlama, bloktaki değeri tahmin etmek ve daha sonra sadece farkı kodlamak için komşunun piksel bloğundaki değerleri kullanarak çalışır.
Kayıpsız WebP Sıkıştırma, yeni pikselleri yeniden yapılandırdığı görülen ve eşleşme bulunmazsa yerel paletleri kullanabilen görüntü parçalarını kullanır. Aşağıdaki örnekte Google WebP Galerisi’nden görebileceğiniz gibi, soldaki JPEG görüntüsü ile sağdaki WebP sürümü arasındaki kalitede gerçek bir fark yoktur. Dosya boyutunu kontrol etmediğiniz sürece, WebP görüntülerinin JPEG görüntülerinden% 30’dan daha küçük olmasıdır. Bu blogda daha önce tartıştığımız gibi, sayfa ağırlığı açısından bu boyut önemlidir. Sonuçta, web sayfası dosyasının boyutu ne kadar küçük olursa, o kadar hızlı yükler. Bunun dikkate alınması gerekmez.
WebP’niz için kısa destek merak ediyor olabilir, çünkü WebP sekiz yıldır oradadır, neden daha popüler olmasın? WebP karşılaştırılabilir kalitede daha küçük dosya boyutları üretebildiğinde neden hala JPEG ve PNG kullanıyoruz?
Web’de temelini bulmakta güçlük çeken birçok teknoloji gibi, tüm modern tarayıcılar WebP’yi desteklemiyor. Can Im’a göre … WebP’yi destekleyen tarayıcılar arasında Chrome, Opera, Opera Mini, Android Tarayıcı ve Android için Chrome bulunur.
Microsoft, geçen Ekim ayında WebP’yi destekleyeceğini açıkladı ve Mozilla Firefox için hemen sonra benzer bir duyuru yaptı. Şimdi, herhangi bir uyumluluk olmadan sadece Apple’s Safari kaldı. Başlangıçta iOS 10 ve MacOS Sierra’ya WebP desteği eklenirken görüntü formatını desteklemek için ilgi gösterdikten sonra, Apple daha sonra HEIF ile değiştirildi, görüntü biçimi HEVC video sıkıştırma standardına dayanıyordu (H.265 ve MPEG-H olarak da bilinir. 2). Apple’ın gelecekte WebP’yi destekleyeceğine dair son göstergeler olmasa da, şirketin şimdi çok fazla seçeneği yok çünkü tüm ana tarayıcılar ve görüntü düzenleme yazılımı bunu destekliyor. WebP’yi kullanmak – JPEG/PNG ile Yedek Olarak Apple WebP’yi desteklemediği için, biçimi kullanmamanız gerektiği anlamına gelmez. Safari kullanıcıları için yedek olarak JPEG ve PNG’yi görüntülerken desteklenen tarayıcı kullanan ziyaretçilere WebP dosyaları göndermek mümkündür. Bu şekilde, tüm kullanıcılara ve riskli Safari kullanıcılarına WebP vermek yerine hasarlı görüntüler görür, tüm site ziyaretçilerinizin resimlerinizi gördüğünden emin olabilirsiniz – desteklenen tarayıcılara sahip kullanıcılar daha hızlı bir deneyim kazanır. Ancak sitenizde WebP’yi kullanıp kullanmayacağınıza karar vermeden önce hatırlanması gereken bazı şeyler var. İlk olarak, Chrome’un%64 pazar payı ile en popüler tarayıcı olduğunu bilin. Bu nedenle, büyük olasılıkla site ziyaretçilerinizin çoğu sitenizdeki herhangi bir WebP görüntüsünü görebilecektir.
Bu yöntemi kullanmayı veya WebP’yi geri almadan görüntüleyip göstermeyeceğini aramadan önce ziyaretçilerinizin hangi tarayıcıyı kullandığını görmek için Google Analytics’inizi kontrol etmenizi öneririz. Burada, sitemdeki ziyaretçileri Chrome ve Firefox’u kullanarak çok görebilirsiniz, bu da WebP kullanırsam ziyaretçilerimin% 83’ünün fayda sağlayacağı anlamına gelebilirsiniz. Öte yandan, Safari geriye dönük görüntü seçeneklerinden yararlanan en popüler üçüncü tarayıcıdır. WordPress ile WebP nasıl kullanılır WordPress 5.8 WebP desteği ekler, böylece WebP görüntüsünüzü kontrol paneline yükleyebilirsiniz. Ancak, WordPress orijinal biçimi WebP’ye dönüştürmedi.
Avustralya’da söylediğimiz gibi drama yok. Resimlerinizi her zaman WebP formatına dönüştürebilirsiniz – eklentileri kullanmanız gerekir. Ücretsiz bir WebP Express eklentisiyle, WebP’yi destekleyen tarayıcılara otomatik olarak oluşturulan WebP görüntülerini Safari kullanıcılarına JPEG/PNG sunarken sunabilirsiniz. Bu seçenek, medya kütüphanesi, galeri ve temalar dahil olmak üzere sitenizdeki herhangi bir resimde işlev görür. JetPack Site Hızlandırıcı özelliği (daha önce Photon olarak bilinir) ayrıca JPEG ve PNG’yi WebP görüntü formatına otomatik olarak dönüştürdü. Aşağıda,%50’ye ayarlandığında yangın fotonu tarafından sunulan sıkıştırmanın kalitesine bir örnektir:
Veya CDN’nizi kullanabilirsiniz. Ücretli paketleri olan CloudFlare kullanıcıları, otomatik WebP dönüşümü sunan Polonya CDN özelliğine erişebilir. Yukarıda bahsettiğim diğer çözümler gibi, Lehçe bu tür dosyaları destekleyen tarayıcılar için JPEG ve PNG sayfalarını WebP sürümleriyle değiştirerek çalışıyor.
Eklentimiz Imagify artık WebP resimlerini destekliyor!Mayıs 2019’un başlarında, WP Media (WP Rocket’in arkasındaki şirket) Imagify 1.9’u başlattı. Bu büyük linil sonunda müşterilerimizin çoğu tarafından beklenen özellikleri tanıttı: WebP Desteği!Şimdi, Imagify eklentisi ile optimize ettiğiniz her resim için WebP sürümünü de alırsınız (Seçenekleri ayarlardaki seçeneği kontrol ederseniz);Medya kütüphanenizde, bu aşağıdaki resim sürümünü üretecektir:
Görüntüler tam boyutlu optimize edilmiş tam boyutlu webp resmi Optimize edilmiş mini görüntüKüçük resim webp
Optimizasyon ayrıca temanız ve eklentinize dahil olan görüntüler için de işlev görecektir.İsterseniz, Imagify ön ucunuzdaki webp görüntülerini iki şekilde görüntüleyebilir:
etiket
.Htaccess dosyasındaki kuralları yeniden yazın.
etiketini etiketi ile değiştirmek için ilk seçenek. Bu tercih edilen bir çözüm olmalı, ancak bazı temaların hasar görebileceğini unutmayın: bu nedenle, bu seçeneği seçerseniz, her şeyin ön uçta doğru görüntülendiğini doğruladığınızdan emin olun. İkinci seçenek, Site Yapılandırma dosyanıza (.htaccess) yeniden yazma kuralları ekler ve sayfa kodunuzu değiştirmez. Dikkate alınması gereken önemli ayrıntılar: Bu seçenek CDN ile çalışmaz! Optimize edilmiş görüntü ne olacak? Orijinal görüntünün bir yedek kopyasını kaydederseniz, WebP sürümlerini ayrı ayrı yapma olanağına sahipsiniz (tek tek veya kütle optimizasyonu yoluyla). Hayali ücretsiz indirin! JPG/PNG vs WebP Web Performans Ekibi’nin karşılaştırılması Google, PNG’den 26 daha küçük kayıpsız WebP görüntüleri vaat ediyor ve kayıplı webp% 25-34 görüntüler JPEG görüntülerinden daha küçük. Bu yüzden WebP ile elde edilebilecek boyut farkını görmek için birkaç karşılaştırma testi yaptım. JPEG ile WebP ile karşılaştırarak Unllash’tan altı rastgele JPEG görüntüsü indirdim, hangi tasarrufları elde edebileceğimi görmek için sıkıştırdım ve daha sonra orijinal görüntüyü karşılaştırılacak WebP’ye dönüştürdüm. WebP’ye dönüşüm, ortalama görüntü boyutunda bir azalmaya neden olur %50. Image4.jpg’den JPEG ve WebP sürümü arasındaki boyut farkını görünce şaşırdım, ancak düz pembe arka plan büyük boyuttaki farkı açıkladı. Aşağıda, iki versiyonu yan yana görebilirsiniz. Soldaki JPEG görüntüsü, sağdaki WebP görüntüsünden biraz daha keskin.
PNG’yi bir kez daha WebP ile karşılaştırarak rastgele altı görüntü seçtim, bu sefer freepngs.com’dan PNG dosyası. Sıkıştırdım ve sonra orijinal görüntüyü karşılaştırılacak webp’e dönüştürdüm. Dosya boyutundaki en büyük fark ayrıntılı yaprak ve kahve makinesi içindir (her bir image4.png ve image5.png), en küçük fark siyah beyaz görüntüler içindir Kedilerin (Image3. PNG). Genel olarak, PNG’den WebP’ye dönüşüm%67’de ortalama bir dosya azalması üretir. WebP dosya biçimini sarmak hala popülerlik ve destek olarak büyür, ancak bu dosya biçiminden birçok avantaj vardır. Bu, JPEG ve PNG (ve GIF!) Dosya biçimlerini kayıplı ve kayıpsız sıkıştırma ile değiştirebilir, ancak çok daha küçük bir dosya boyutu sağlayabilir. Aslında web için WebP’nin yapabileceği gibi gerçek kaliteyi kaybetmeden daha küçük dosya boyutlarına ulaşabilen görüntü biçimi veya başka bir görüntü optimizasyon aracı yoktur. Bu nedenle, sitenizin performansını artırmak için WebP formatını kullanmaya başlamanızı öneririz.
