Imagify ile WordPress'te Görüntüleri WebP'ye Dönüştürme

Yayınlanan: 2021-07-19

Resimlerinizi WordPress'te WebP'ye dönüştürmekle ilgileniyor musunuz? Resimlerinizi optimize eden ve WebP'ye dönüştüren ücretsiz eklentimiz Imagify'a merhaba deyin.

Rehberimizde, sitenizi yavaşlatmadan yüksek kaliteli görselleri nasıl sunacağınızı açıklıyoruz. Web sitenizde zaten yüzlerce PNG veya JPG resminiz varsa, Imagify bunları optimize edecek ve otomatik olarak WebP'ye dönüştürecektir.

Umut verici mi? Görüntü dosyası boyutlarını %35'e kadar küçülterek performansı nasıl etkilediğini görmek için bu modern WebP biçimini inceleyelim!

WebP formatı nedir?

WebP, dosya boyutunu küçülterek ancak kaliteden ödün vermeden görüntü sıkıştırma sunan bir görüntü formatıdır. Google tarafından geliştirilen WebP, kayıpsız ve kayıplı sıkıştırma içeren modern bir resim dosyası formatıdır. Biçim, yüksek kaliteyi korurken görüntü dosyasının boyutunu JPEG ve PNG görüntülerinden %35'e kadar küçültebilir. Her iki dünyanın da en iyisi, değil mi?

Ziyaretçiler kalite VE hızlı bir web sitesi ister. Bu nedenle, son yıllarda kaliteyi korurken dosyaları en aza indirerek tasarlanan yeni biçimler ortaya çıkıyor. “WebP” kesinlikle son 10 yılın en dikkate değer güncellemesidir.

Google WebP web sitesi tarafından sağlanan aşağıdaki örnekte, aynı kalitede iki resmi karşılaştırıyoruz. Biri JPEG, diğeri WebP ve üç şey fark ediyoruz:

  • Görüntünün kalitesi JPEG veya WEBP'de aynı kalır
  • JPEG dosya boyutu 43.84 KB'dir.
  • WebP dosyası, JPEG formatından çok daha hafif olan 29.61 KB'dir.
JPEG ve WebP: aynı kalite ancak farklı boyut - Kaynak: WebP Galerisi

WebP formatı, aşağıdaki dengeyi sağlamanıza yardımcı olur: Yüksek kaliteli görüntüler ve Düşük dosya boyutu .

Neden Görüntüleri WebP'ye Dönüştürmelisiniz?

WebP formatının ana faydası, aynı görüntü kalitesini korurken daha küçük görüntü dosyaları oluşturmaktır. Sonuç olarak, görüntü sıkıştırmaları web sitenizi hızlandırır.

Bunu fark etmeyebilirsiniz, ancak resimler sunucunuzda çok fazla yer kaplıyor. Sadece deli gibi depolama alanı tüketmekle kalmaz, aynı zamanda web sitelerini de yavaşlatabilir ve ziyaretçilerinizin kaçmasına neden olabilir.

JPEG, PNG ve GIF, WebP'ye kolayca dönüştürülebilen biçimlerdir:

  • JPEG : en yaygın biçim, çok zengin renkli fotoğraflar ve görseller için ideal
  • PNG: basit grafikler, simgeler ve logolar için önerilen biçim
  • GIF: mesajlarınızı noktalayan tüm hareketli resimler için

Google, webP'nin dosya boyutu açısından JPEG ve PNG biçimleriyle nasıl karşılaştırıldığını görmek için bir WebP sıkıştırma çalışması yürüttü. Sonuçlar ilginç:

  • Bir WebP görüntüsü, PNG görüntüsünden %25 daha küçüktür.
  • Bir WebP görüntüsü, bir JPEG görüntüsünden %25-35 daha küçüktür.

Bu sonuçlar, WebP'nin JPEG ve PNG'ye göre önemli sıkıştırma geliştirmeleri sağlayabileceğini göstermektedir. Aşağıdaki grafikte, bir WebP görüntüsünün sürekli olarak piksel başına JPEG'den daha az bit gerektirdiğini görüyoruz:


Ayrıca, Google PageSpeed ​​Insights, Görselleri yeni nesil biçimlerde (WebP) sunmanızı önerir, bu da daha hızlı indirme ve daha az veri tüketimi anlamına gelir. Web performans aracı ayrıca, resimlerinizi sıkıştırmak ve en uygun biçimlere dönüştürmek için bir WordPress eklentisi kullanmanızı önerir.

Bilin bakalım listede kim var? Hayal et!

Görüntüleri WebP'ye Dönüştürme

Imagify, resimlerinizi WebP'ye dönüştürmek ve optimize etmek için en iyi WordPress eklentilerinden biridir.

Birçok formatı (örneğin JPG'den PDF'ye) dönüştürebilen çevrimiçi araçları hepimiz biliyoruz. Bu araçlar kullanıcı dostu değildir ve çoğu ücretsiz olarak toplu dönüşümler yapmanıza izin vermez.

Dosyalarınızı WebP'ye dönüştürmek için bir eklenti daha kolay olabilir. Neden görelim. WordPress söz konusu olduğunda işler biraz daha karmaşık hale geliyor. WordPress 5.8, WebP görüntülerini yüklemenize izin verir, ancak orijinal biçimi WebP'ye dönüştürmez .

Bu nedenle PNG ve JPEG resimleri yüklemenizi ve işi Imagify'a bırakmanızı öneririz. Imagify eklentisi, WordPress panonuzdaki resimlerinizi otomatik olarak WebP formatına dönüştürebilir . Kaliteden ödün vermeden daha hızlı bir tarama deneyimi için web sitenizdeki tüm JPG, GIF veya PNG dosyalarını küçülterek optimize eder. Yayınlanmış sayfalarınıza zaten eklenmiş resimleriniz varsa, merak etmeyin, Imagify bunları da dönüştürecektir.

Imagify, WordPress görüntülerini otomatik olarak optimize eder ve WebP'ye dönüştürür:

  • Yeni resimler yüklerken
  • Mevcut olanlarınızda (size değerli zaman kazandıracak toplu özellik)

Dahası, Imagify, fotoğrafların WordPress'te daha hızlı yüklenmesine yardımcı olur. Eklenti, birden fazla görüntüyü orijinal biçimlerinde sıkıştırır ve görüntüleri kaliteden ödün vermeden bir dizi maksimum boyuta yeniden boyutlandırır. Bu sadece bir dönüştürücü aracı değil. Ayrıca WordPress sitenizin daha hızlı çalışmasına yardımcı olan bir eklentidir!

Imagify kullanarak görüntüleri WebP'ye nasıl dönüştüreceğinizi görmek için adım adım kılavuzumuzu izleyin:

Adım 1 – Imagify'ı ücretsiz indirin

Eklentiyi etkinleştirin ve ücretsiz bir API ANAHTARI oluşturun.

(API anahtarınızı almak için e-posta gelen kutunuza gidin ve aşağıdaki kutuya yapıştırın).

Adım 2 – WebP dönüştürme seçeneğinin ayarlanması

Imagify API anahtarınızı ekledikten sonra Ayarlar → Imagify'a gidin ve “Optimizasyon Webp formatı” bölümüne gidin. Her iki kutunun da aşağıdaki gibi işaretlendiğinden emin olun:

Webp format dönüştürme - Imagify kontrol paneli

İlk kutu, Imagify'a resimlerinizi WebP'ye dönüştürmesini söyler; ikincisi, bu WebP görüntülerini desteklenen tarayıcılara sunmak için eklentiyi gösterir.

3. Adım – Resimlerinizi dönüştürme zamanı

Medya -> Toplu Optimizasyon'a gidin ve mavi Imagify'em all düğmesine basın:

Bu kadar! Imagify ile sadece üç adımda daha hızlı bir web sitesine sahip olabilirsiniz.

Imagify'ın fiyatlandırması (ve evet, ücretsiz bir plan mevcuttur!)

Başlangıç ​​planı: Imagify, ayda 20 MB görüntüyü ücretsiz olarak optimize etmenize ve dönüştürmenize olanak tanır (yaklaşık 200 görüntü).

Büyüme planı: Bundan daha fazlasına ihtiyacınız varsa, 500 MB (~5.000 görüntü) için aylık 4,99 ABD doları tutarında ücretli bir plana yükseltebilirsiniz.

Sonsuz plan: Sınırsız veri için ayda 9,99 ABD doları. Optimize edilecek binlerce görsel içeren bir web siteniz varsa bu harika.

Fiyatlandırma, Imagify'ın resmi web sitesinde bulunabilir.

WebP'nin Imagify ile Performans Üzerindeki Etkisi

Şimdi medya dosyalarının boyutunu küçültmek için Imagify'ın nasıl kullanılacağını görelim.

Analiz için WordPress panomuzu kullanarak iki senaryo çalıştıracağız:

  1. Bir GIF, PNG, JPG yükleyeceğim ve her birinin dosya boyutunu kontrol edeceğim.
  2. Imagify'ı etkinleştireceğim, yukarıdan 3 dosyamı WebP'ye dönüştüreceğim ve yeni dosya boyutunu doğrulayacağım.

Analizi çalıştıralım.

  • Imagify'ın GIF dosya boyutum üzerindeki etkisi:
GIF dosya boyutu – Imagify Yok WebP Formatı – Imagify ile
816 KB 512 KB
  • Imagify'ın PNG dosya boyutum üzerindeki etkisi:
PNG dosya boyutu – Imagify Yok WebP Formatı – Imagify ile
67 KB 28 KB
  • Imagify'ın JPG dosya boyutum üzerindeki etkisi:
JPG dosya boyutu – Imagify Yok WebP Formatı – Imagify ile
755 KB 525 KB

Imagify, WebP'ye dönüştürürken dosya boyutumu küçülttü mü?

Cevap Evet! Gördüğünüz gibi, Imagify ve WebP formatı kullanıldıktan sonra tüm dosya boyutları önemli ölçüde azaldı. İşte bir özet:

  • GIF → WebP : boyut 816 KB'den 512 KB'ye çıktı
  • PNG → WebP : boyut 67 KB'den 28 KB'ye çıktı
  • JPEG → WebP : boyut 755 KB'den 525 KB'ye çıktı.

Google PageSpeed ​​Insights'ta Performans Notumu Yükseltmek için Imagify'ı Kullanma

Bu performans denetimi için, bazı ortamları görüntüleyen bir sayfa oluşturdum: bir JPG fotoğrafı, bir PNG öğesi ve bir GIF.

Google PageSpeed ​​Insights'ı kullanacağız ve aşağıdaki iki senaryoyu çalıştıracağız:

  1. Senaryo #1 – Sayfamın performans denetimi (PNG ve JPG, görüntüleri + GIF biçimlendirir) – Imagify yok – WebP yok
  2. Senaryo #2 – Tüm medyamı Imagify ile WebP'ye dönüştürdükten sonra sayfamın performans derecesi

Senaryo #1 : Imagify Yok – WebP Yok

Google PageSpeed ​​Insights'ta (88/100) turuncu renkteyim ve Önemli Web Verilerimin tümü yeşil renkte değil:

Imagify olmadan Denetim - Kaynak: PSI

Fırsatlar bölümünde, "Animasyonlu içerik için video biçimlerini kullan" veya "Görüntüleri yeni nesil biçimlerde sunun" gibi görsellerimin biçimiyle ilgili çeşitli sorunlar görebiliriz.

Fırsatlar bölümü - PSI

200 ürün içeren 50 sayfam olsaydı, onları manuel olarak dönüştürmek konusunda çok endişelenirdim… Ama neyse ki, Imagify bunu benim için yapabilir!

2. Senaryo: Imagify ile WebP Formatı

Şimdi tüm medyayı Imagify kullanarak WebP'ye dönüştürdükten sonra sonuçlara bir göz atalım.

Performans notum arttı : 99/100 puanla yeşilliklerdeyim!

Imagify sayesinde yeşil puanım - Kaynak: PSI

Fırsatlar bölümünde, resimlerle ilgili tüm sorunlarım ortadan kalktı:

Görüntülerle ilgili sorunlar Imagify sayesinde çözüldü - Kaynak: PSI

Toplama

WebP, görüntü boyutlarını azaltmanın ve WordPress sitenizin daha hızlı yüklenmesini sağlamanın kesinlikle etkili bir yoludur. Bu modern biçim, JPEG veya PNG dosyalarından ortalama ~%25 daha fazla depolama alanı tasarrufu sağlar. Bir başka iyi haber de, görüntülerin kalitesi aynı kaldığı için kullanıcı deneyiminin etkilenmeyeceği.

Ayrıca, güçlü Imagify Plugin'imiz kaliteden ödün vermeden bunları optimize edilmiş WebP biçimiyle değiştireceğinden, farklı boyutlarda tek türde en az 200 görüntü dosyanız (png veya .jpg) varsa endişelenmeyin.

WordPress 5.8, WebP görüntüleri için destek ekler (ancak bunları orijinal biçimden WebP'ye dönüştürmez). Bu yüzden dosyalarınızı dönüştürmek için bir eklenti kullanmanızı öneririz. İşte nedeni:

  • WebP görüntülerini doğrudan Medya Kitaplığına yükleme yeteneği, tarayıcıları WebP'yi desteklemeyen ziyaretçilerin ~%5'ini düzeltmeyecektir.
  • Görüntüler ve resimler genellikle JPG veya PNG biçimindedir, bu nedenle bunları yüklemek ve toplu olarak dönüştürmek için Imagify gibi bir eklenti size yüzlerce saat kazandırabilir.

Imagify'ı bir test sürüşüne çıkarmaya ne dersiniz? Ayda yaklaşık 200 resim için ücretsizdir.

Ve unutmayın, WordPress sitenizde WebP kullanımıyla ilgili herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlarda bize sorun!