WordPress’te WebP resimlerini kullanmak için kolay kılavuz: Step-Demi-Adım Kılavuzu Komple
WordPress sitenizi bu büyülü iki saniyelik eşiğin altına almak için mi mücadele ediyorsunuz? Sebebin ağır bir görüntü olduğundan şüpheleniyorsanız, sıradan bir PNG veya JPG görüntüsü yerine bir WebP görüntüsü kullanmayı deneyebilirsiniz. WebP görüntüleri, yükleme hızını artırmak için Google tarafından tanıtılan ve önerilen modern görüntü formatlarıdır. Bu kılavuzda, WordPress’te nasıl kullanılacağını göstereceğiz. Sayfaları yükleme hızı her zaman Google ve diğer arama motorlarının endişesidir, ancak şimdi öncekinden daha fazla, yavaş bir yükleme web sitesine sahip olamazsınız.
İlk olarak, yavaş yükleme web sitesinin kullanıcıları web sitenizden çıkardığı kanıtlanmıştır (özellikle hücresel kullanıcılar için). Daha da önemlisi, Google Page Experience algoritması Haziran 2021’de güncellenecek. Bu olduğunda, yavaş bir web sitesine çok az trafik gönderecektir. Görüntüler genellikle çoğu web sayfasında içeriğin sadece küçük bir parçasıdır. Ancak, dosya boyutunun en büyük kısmını dikkate alırlar. Bu nedenle, web sitenizi yükleme hızını artırmaya çalışırsanız, resminize dikkat edin. Peki WebP dosyası tam olarak nasıl yardımcı olur?
WebP dosyaları çok hafif görüntü formatlarıdır ve PNG ve JPG gibi diğer dosya formatlarına kıyasla dosya boyutlarını% 25-34 azaltabilir.
İçindekiler
WebP Vs. Web için JPG vs PNG – Karşılaştırma
WebP dosyalarının bazı avantajları ve dezavantajları
WordPress’e WebP Görüntüleri Nasıl Eklenir – 3 Yöntem
Yöntem 1: CDN kullanın
Yöntem 2: Bir Görüntü Optimizasyonu eklentisi kullanın
Yöntem 3: WordPress’e WordPress’e manuel olarak ekleyin
WebP görüntüsü ile başlayarak
Webp Vs. Web için JPG vs PNG – WebP görüntülerini bu kadar özel kılan şeyleri anlamanıza yardımcı olmak için karşılaştırma, PNG ve JPG.Prartuan görüntülerine kıyasla WebP görüntülerinin ayrıntılı karşılaştırmasını tartışacağız, biraz jargon tartışalım. Görüntü dosyası sıkıştırıldığında, dosya kayıpsız veya kayıplıdır. Kayıpsız sıkıştırma, kayıplı görüntülere kıyasla biraz kaliteyi kaybeden görüntüler üretir. Ayrıca bozulabilir ve orijinal durumlarına geri dönebilirler. Bunun mümkün olmasının nedeni, kayıpsız görüntüler için sıkıştırma işleminin yalnızca görüntüye kodlanan alakasız veri bitlerini kaldırarak çalışmasıdır. PNG dosyaları genellikle kayıpsız dosyalardır. Temel kayıp görüntüler değiştirilir ve kalıcı olarak kaldırılan çok az temel bilgilere sahiptir. Bu, kayıpsız görüntüden daha küçük bir dosya boyutu üretir, ancak büyütmeye çalıştığınızda görülen kalitede bir azalma ile.
Kayıp görüntülere örnek olarak JPG/JPEG dosyalarıdır. Sonra bir webp resmi var. WebP görüntüleri sahip olmak için iyi bir seçimdir çünkü kayıplı veya kayıpsız sıkıştırma yaşayabilir. Her iki durumda da, üstün sıkıştırma sağlarlar, ancak PNG ve JPG dosyalarına kıyasla orantılı kalite kaybetmeden.
Bir Google çalışması, kayıpsız WebP görüntülerinin sıkıştırılmış PNG dosyalarından% 26’ya kadar daha küçük olabileceğini gösteriyor. Kayıp WebP görüntüleri genellikle JPG dosyalarından% 25-34 daha küçüktür. Bu büyük avantajın görüntü kalitesinden ödün vermeden geldiğini düşündüğünüzde, WebP görüntülerini mümkün olduğunca kullanmak mantıklıdır.
Bu, düşmanca tarayıcılar kullanan okuyuculara daha hızlı bir web sitesi veya çekici olmayan içerik sunmanız gerektiği anlamına gelmez. Tek yapmanız gereken resimlerinizin PNG/JPG ve WebP sürümlerini korumak ve kullandıkları tarayıcıya bağlı olarak farklı kullanıcı gruplarına farklı sürümler sunmaktır.
Örneğin, WordPress eklentisini kullanarak, web siteniz onu destekleyen tarayıcının WebP sürümünü görüntüleyebilirken, aynı görüntünün PNG veya JPG sürümünü tarayıcıya desteklemeyen otomatik olarak görüntüler. Geçmişte, WordPress WebP görüntüleri için orijinal destek sunmadı, bu nedenle bir eklenti kullanmanız veya WordPress’te çalışmasını sağlamak için birkaç kod yazmanız gerekiyordu. Bu artık doğru değil, en son WordPress güncellemeleri nedeniyle WordPress 5.8, WebP görüntüleri için orijinal destek içeriyor. Ancak, bu gelişmeyi takip etmeyen tarayıcıların işlenmesi için bir yola ihtiyacınız olacaktır. Yakında göreceğiniz gibi çalışmanın birkaç yolu vardır. Şimdi WordPress orijinal webp yüklemelerine izin verir, bu başlamanın en iyi yoludur. Bununla birlikte, bahsettiğimiz gibi, yine de WebP görüntülerini henüz desteklemeyen tarayıcıları göz önünde bulundurmanız gerekir. Aşağıda tartışacağımız yöntem bunu yapmanıza yardımcı olacaktır. Diğerinden daha iyi olan tek bir yöntem olmadığına dikkat edilmelidir, böylece sizin için en uygun olanı seçebilirsiniz. Bunlar: Yöntem 1: CDN Network Dağıtım İçeriğini (CDN) kullanmak WordPress’te WebP görüntülerini kullanmanın etkili bir yoludur. CDN, içerik dağıtımının içeriğini web sitesi sunucunuzdan dağıtmaya yardımcı olan bir sunucu ağıdır. Genel olarak, CDN kullanıyorsanız, CDN web sitesi içeriğinizi saklayacak ve kullanıcılara daha hızlı ve verimli bir şekilde sunacaktır. CDN, PNG/JPG dosyanızı bir WebP dosyasına dönüştürmek ve tarayıcı türüne göre seçilen kitleye sunmak için kolayca kullanılabilir. Kullanım için bazı popüler CDN’ler arasında Max CDN, Sucuri, StackPath, CloudFlare ve Keycdn. WebP formatında resimler. Aslında, görüşümüze göre, önce PNG/JPG biçiminde resim yüklemek ve daha sonra bunları WebP’ye dönüştürmek daha iyidir. Çünkü söylediğimiz gibi, şimdi tüm tarayıcılar WebP görüntülerini desteklemiyor. Bu işe yarayacak şekilde, WebP dosyalarını desteklemeyen bir tarayıcıda görüntülenecek PNG/JPG biçiminde bulunan aynı görüntüye sahip olmanız gerekir. Buna kolayca ulaşmanızı sağlayan bir eklenti var. İşte kullanım için düşünebileceğiniz bazı popüler eklentiler: 1. Hayal edin
Imafy, ücretsiz bir resim optimizasyonu eklentisidir ve resimlerinizi WebP’ye dönüştürmek için önerdiğimiz şeydir. Imagify başlamak ücretsiz olsa da, ne kadar optimizasyon yapabileceğiniz konusunda bir sınırı vardır. Şu anda, kullanıcılar her ay 20MB’a kadar optimizasyon kullanabilirler. Başlamak için önce eklentiyi WordPress deposundan yükleyin ve etkinleştirin. Bir hesap oluşturmanız istenecek (tek yapmanız gereken e -postanızı vermek), bundan sonra size bir yangın anahtarı gönderilecektir. Isıyı girin ve eklentiyi yapılandırmaya devam edin.
Varsayılan olarak, ihtiyacınız olan seçeneklerin çoğu sizin için hazırlanmıştır. Ancak, WebP görüntülerini görüntüleme seçeneğini etkinleştirmeyi unutmayın. Eklentilerin bunu yapmanın iki yolu olduğunu göreceksiniz. Birincisi, yazma kurallarını yeniden yapmanıza izin vererek ve ikincisi yerine etiketini kullanarak. Çoğu durumda, ikinci yöntem tercih edilen şeydir, ancak bu tüm temalarla çalışmaz. Imafy, ücretsiz, kullanımı kolay ve etkilidir, bu da onu önerdiğimiz eklenti yapar. Ancak, bazı alternatif görüntüler optimizasyon eklentilerini ve işi tamamlamanın diğer birkaç yolunu görmek için okumaya devam edin.
Imagify ile Başlayın
2. Smush Smush, WordPress için çok amaçlı bir görüntü optimizasyonu eklentisidir. PNG ve JPG dosyalarını sıkıştırmak veya WebP dosyalarına dönüştürmek için SMUSH kullanabilirsiniz. Smush, yavaş yükleme ve 45 puanlık CDN gibi birçok yararlı özelliğe sahiptir ve bunların hepsi web sitenizin hızını artırmaya yardımcı olur. Bu olağanüstü özelliklerin birçoğu ücretsiz olarak kullanılabilir olsa da, WebP dönüştürme yalnızca Pro sürümünde mevcuttur. Kaç web sitesini işleyeceğinize bağlı olarak, Smush Pro paketinin ayda 6 $, 14 $ ve 29 $ değerinde. Smush ile başlayın
3. Optimal
Optimole, WebP dönüştürme ve Amazon CloudFront kullanarak dinamik olarak sunma yeteneği sunan bir görüntü sıkıştırma eklentisidir. Buna ek olarak, eklenti, görüntü boyutunu otomatik olarak ekranlarına uyacak şekilde değiştirerek web sitenizin her ziyaretçisi için optimum bir izleme deneyimi sağlar. Kullanıcı deneyimi Google Core Web Vitals’in ana parçasıdır, bu nedenle bu kullanılması gereken harika bir özelliktir. Her ay en fazla 5.000 ziyaretçiye hizmet vermenizi sağlayan veya her ay 25.000’e kadar ziyaretçiye izin veren ücretli bir paket seçmenizi sağlayan ücretsiz bir optimole paketiyle başlayabilirsiniz. Ücretsiz bir paket kullanmak için yükleyin ve eklentiyi etkinleştirin. Bir yangın anahtarı almak için bir hesap açmanız istenecektir. Yangın anahtarınızı girdikten sonra, kalan işlem varsayılan olarak sizin için yapılır. Optimole, diğer görüntülerin en iyi uygulamasıyla birlikte görüntünüzü otomatik olarak optimize eder ve varsayılan WebP desteğini sağlar.
Optimol ile başlayın
ShortPixel, popüler bir görüntü dönüştürme ve optimizasyon eklentisidir. Tıpkı bu listedeki diğer eklentiler gibi, WebP görüntüsünüzü optimize etmek veya dönüştürmek için kısa pikseller ayarlayabilirsiniz. WebP dosyasının PNG/JPG sürümünü Safari kullanıcılarına ve diğer boş tarlalara da sunabilirsiniz. ShortPixel, kayıplı ve kayıpsız formatlarda WebP görüntülerine dönüştürmeyi destekler ve Mass Optimal gibi diğer avantajlar sunar. Shortpixel tarafından sunulan olağanüstü özelliklerden biri benzersiz bir parlak dosya biçimidir. Parlak görüntüler, kayıplı kayıplı görüntü dosyası kalitesi ile daha küçük kayıpsız görüntü dosyası boyutları arasında bir uzlaşma sunmak için tasarlanmıştır. Shortpixel ile başlamak için eklentiyi indirin ve etkinleştirin ve bir hesap oluşturarak bir yangın anahtarı alın. Bu noktanın dışında çok fazla işlem yapmanıza gerek yok çünkü seçeneklerin çoğu sizin için hazırlanmıştır. Ancak, WebP dönüşümünü etkinleştirmek için, Gelişmiş sekmesine gitmeli ve WebP dönüşümüne izin verme seçeneğini kontrol etmelisiniz. WebP dönüşümü dönüşüm başına bir kredi tahsil edilecektir. Shortpixel, her ay 100 kredi ile bir hesap açtıktan sonra 100 ücretsiz kredi sunar. Bunu kullanırsanız, daha fazla satın alabilirsiniz.
Shortpixel ile başlayın Yöntem 3: WordPress’e manuel olarak webp görüntüleri ekleyin Bir eklenti veya CDN veya çalışmayı tamamlamak için her ikisinin bir kombinasyonu kullanabilirsiniz. Üçüncü seçenek bir yöntemden kaçınmak ve webp görüntüsünüzü WordPress’e manuel olarak yüklemektir. Aşağıdaki adımlar: Görüntünüzü bir webp olarak değiştirin, WordPress’e yüklemeden önce görüntünüzü bir WebP formatına dönüştürmeniz gerekir. Bu genellikle yapmak kolaydır ve çeşitli şekillerde yapılabilir. 1. Çevrimiçi Görüntü Dönüştürücüleri Kullanın İlk yöntem çevrimiçi bir resim dönüştürücü kullanmaktır. Bunlardan bazıları var ve onu kalite açısından ayıran pek bir şey yok. Daha popüler olanlardan biri çevrimiçi-convert.com. Sadece bir web sitesi oluşturursanız, önce resimleri kolayca dönüştürebilir, ardından yükleyebilirsiniz. Peki ya tamamen oluşturulmuş veya web sitenizi resimlerle doldurmuş bir web siteniz varsa ne olur? Bunun etrafında çalışmak için, toplu dönüşüm özellikleri sunan bir eklenti kullanabilirsiniz. Manuel olarak yapmak istiyorsanız, makine odasına girip küçük bir kod yazarak ellerinizi kirletmelisiniz! Bu işlem boyunca size çok kısaca rehberlik edeceğiz, ancak ilk olarak, görüntünüzü bir WebP formatına dönüştürmek için bir yöntem daha var. Resimler, uygulamanın kendisinden webp formatında saklamak isteyebilirsiniz. Bu varsayılan olarak mümkün olmasa da, Photoshop görüntü dönüştürme eklentisini yükleyerek bunu yapmak kolaydır. Şimdi resimlerinizi WebP formatına dönüştürmeyi başardınız, bu gerçek ağır işin zamanı. WebP görüntülerini WordPress’e manuel olarak yüklemeyi nasıl başardınız? Bunu çözmenin çeşitli yolları vardır. Güvenli Dosya Aktarım Protokolü (SFTP) kullanmaya alışkınsanız, görüntünüzü bir medya kütüphanesinden geçmek zorunda kalmadan doğrudan yükleme klasörüne yükleyin. WordPress sitesi temanıza küçük bir kod da yazabilirsiniz. İşte nasıl:
WordPress kurulumunuzun arkasında, görünüm> WordPress düzenleyicisine gidin.
“Functions.php” adlı bir dosyayı açın ve aşağıdaki kodu sayfanın altına yapıştırın: // *** WebP görüntü dosyaları için yüklemeyi etkinleştirin. Dönüş $ mevcut_times; } add_filter (‘mime_types’, ‘webp_upload_times’); İşte burada! WebP resminize karmaşıklık olmadan devam edebilir ve yükleyebilirsiniz.