Görüntüler Yeni Nesil Biçimlerde Nasıl Sunulur (WordPress'te)

Lighthouse raporu, kullanıcıları görüntüleri WebP ve AVIF ^[1] gibi yeni nesil formatlarda sunmaya teşvik ediyor. PNG ve JPEG gibi geleneksel biçimlerle karşılaştırıldığında bu dosya türleri, web sitenizdeki yükleme sürelerini iyileştirmenize ve daha iyi bir kullanıcı deneyimi (UX) sunmanıza yardımcı olabilir. Ancak, bu işlevi sitenize nasıl ekleyeceğinizi bilmiyor olabilirsiniz.

İyi haber şu ki, görüntüleri WordPress'te yeni nesil formatlarda sunmak çok kolay. Bazı durumlarda, yalnızca WordPress sürümünüzü güncellemeniz gerekebilir. Alternatif olarak, süreci otomatikleştirmek için bir görüntü optimizasyonu eklentisi kurmayı tercih edebilirsiniz.

Lighthouse, görüntüleri yeni nesil biçimlerde sunmanızı neden önerir?

Lighthouse, Google tarafından sunulan otomatikleştirilmiş, açık kaynaklı bir araçtır. Web sitenizin kalitesini artırmanıza yardımcı olmak için tasarlanmıştır. Sayfalarınızın her birinin performansı ve erişilebilirliği hakkında bilgi almak için kullanabilirsiniz.

Tek yapmanız gereken, Lighthouse'un denetlemesi için bir URL sağlamak. Ardından, sayfalarınızın ne kadar iyi performans gösterdiğini ayrıntılandıran bir rapor alacaksınız. Değerlendirmelerden herhangi birinde başarısız olursanız, altta yatan sorunları nasıl ele alacağınız ve web sitenizi nasıl geliştireceğiniz konusunda da tavsiye alacaksınız.

Lighthouse'u kullanmanın en kolay yolu, PageSpeed ​​Insights'a gitmektir. Sitenizi Lighthouse aracılığıyla çalıştırdıktan sonra, Fırsatlar bölümüne gidin. Orada, sayfanızın performansını artırmak için eyleme geçirilebilir birçok ipucu bulacaksınız. Gördüğünüz gibi, Lighthouse'un önerdiği şeylerden biri, görüntüleri yeni nesil formatlarda sunmanızdır:

Öneriye tıklarsanız, konu hakkında daha fazla ayrıntı bulabilirsiniz. Örneğin Lighthouse, WebP ve AVIF'in genellikle JPEG ve PNG'den daha iyi sıkıştırma sağladığını size bildirir.

Sonuç olarak, bu dosya türleri daha hızlı indirme ve daha az veri tüketimi sağlar. Bir sonraki bölümde yeni nesil biçimlerin avantajlarını daha ayrıntılı inceleyeceğiz.

Yeni nesil formatlara giriş

Geçmişte, JPG ve PNG, resimler için geleneksel dosya formatları olmuştur. Ancak 2010'da Google bizi WebP ile tanıştırırken AVIF 2019'da kuruldu. Bu yeni nesil formatlar birlikte, daha küçük dosya boyutları kullanırken yüksek kaliteli görselleri korumayı hedefliyor.

Örneğin, WebP dosyaları geleneksel JPEG biçimlerinden %34'e kadar daha küçüktür, ancak yine de daha fazla piksel görüntülemenizi sağlar. Öte yandan AVIF, görüntü dosyasından gereksiz verileri kaldırarak kayıplı sıkıştırma kullanır.

Yeni nesil resim biçimleri daha küçük dosya boyutlarına sahip olma eğiliminde olduğundan, web sitenizde hızlı yükleme süreleri sağlamanın harika bir yoludur. Yavaş sayfalar kullanıcıları uzaklaştırma eğiliminde olduğundan bu çok önemlidir. Bu arada, her görüntüyü görüntülemek için daha az sunucu kaynağı gerektiğinden, bant genişliği maliyetlerinizi azaltabilirsiniz.

Bunun da ötesinde, yeni nesil görüntüler, En Büyük İçerikli Boyama (LCP) gibi belirli Temel Web Verilerini geliştirmenize olanak tanır. Bu, sitenizin kullanıcı deneyimini (UX) artırmanıza yardımcı olur. Ayrıca, hız/kullanıcı deneyimi Google için bir sıralama faktörü olduğundan, arama motoru optimizasyonunuzu (SEO) iyileştirmenin ve daha fazla organik trafik getirmenin harika bir yoludur.

En popüler tarayıcılar WebP'yi desteklerken, AVIF'in hala evrensel olarak desteklenmediğini not etmek önemlidir. Ancak, yaklaşıyor. Bu yazı yazıldığı sırada, web kullanıcılarının yüzde 80'den fazlası Chrome ve Opera dahil olmak üzere AVIF uyumlu tarayıcılar ^[2] kullanıyor. Bu, web sitenizde bu resim türlerini kullanmaya başlamanın tam zamanı olduğu anlamına gelir.

Ayrıca, bu gönderideki çözümü kullanırsanız, araç otomatik olarak her kullanıcının tarayıcısına göre en uygun biçimi sunar, böylece uyumluluk konusunda asla endişelenmenize gerek kalmaz.

WordPress sitenizde yeni nesil formatlarda resimler nasıl sunulur?

Çoğu durumda, WordPress web sitenizde WebP kullanmaya başlamak için tek yapmanız gereken WordPress sürüm 5.8 veya üstünü kullandığınızdan emin olmaktır. Değilse, temel yazılımınızı güncelleyebilirsiniz (bu zaten performans ve güvenlik için iyi bir fikirdir). Bu, WebP görüntülerini normalde yaptığınız gibi yüklemenizi sağlayacaktır.

Ancak, WordPress'in daha eski bir sürümünü kullanıyorsanız ve yükseltmek istemiyorsanız, görüntüleri yeni nesil biçimlerde sunmak için bir eklenti kullanabilirsiniz. Bu aynı zamanda web sitenizde AVIF biçimini etkinleştirmenin en kolay yoludur, çünkü WordPress şu anda bu görüntü türünü varsayılan olarak desteklememektedir.

1. Adım: Optimole eklentisini kurun ve etkinleştirin

Aralarından seçim yapabileceğiniz çok sayıda görüntü optimizasyon eklentisi var. Sitenizde zaten bir tane yüklüyse, size yeni nesil resim formatlarını etkinleştirme seçeneği sunup sunmadığını kontrol etmeye değer.

Değilse, Optimole mükemmel bir seçenektir. Görüntüleri yeni nesil biçimlerde sunmanıza izin vermekle kalmaz, WordPress görüntülerinizi otomatik olarak sıkıştırır, optimize eder ve yeniden boyutlandırır:

Daha da iyisi, içerik teslim sürelerinizi iyileştirmek için birçok yararlı özelliğe (geç yükleme gibi) erişebilirsiniz. Optimole, yükleme sürelerinizi daha da artırmak için kendi içerik dağıtım ağını (CDN) bile içerir. Tüm bunlar, aracı, web sitenizin resimlerinden en iyi şekilde yararlanmak için kullanışlı, hepsi bir arada bir paket haline getirir.

Optimole'nin en iyi yanlarından biri, ücretsiz bir araç olmasıdır, bu da ihtiyaçlarınıza uyan sürümü seçebileceğiniz anlamına gelir. Ücretsiz eklenti ile ayda 5.000 kullanıcıya görsel sunabilirsiniz. Oldukça küçük veya kişisel bir web sitesi işletiyorsanız, ihtiyacınız olan tek şey bu olabilir.

Öte yandan, yüksek trafikli bir web sitesi işletiyorsanız, daha fazla ziyaretçiyi ağırlamak ve uzman desteğine erişmek için premium bir plan seçebilirsiniz. Bu planlar, yıllık olarak faturalandırıldığında aylık 19,08 ABD dolarından başlar.

Ücretsiz eklentiyi kullanmaya başlamak için tek yapmanız gereken WordPress kontrol panelinizde Eklentiler > Yeni Ekle'ye gitmek . "Optimole" bulmak için arama çubuğunu kullanın, ardından eklentiyi kurun ve etkinleştirin:

Eklentiyi etkinleştirdikten sonra, sadece birkaç saniye süren ücretsiz API anahtarınızı oluşturmanız istenecektir.

2. Adım: AVIF dönüştürme özelliğini etkinleştirin

Optimole eklentisini etkinleştirdikten sonra, siteniz otomatik olarak WebP formatındaki görüntüleri sunabilecektir. Başka bir deyişle, WebP dosya türünü etkinleştirmek için eklentiyi yüklemek yeterlidir.

Ancak, AVIF görüntü türünü de etkinleştirmek için ayarları değiştirmeniz gerekecek. Neyse ki, bu çok basit.

Tek yapmanız gereken WordPress kontrol panelinizde Medya'ya gitmek. Ardından Optimole'u seçin. Optimole kontrol panelini açtıktan sonra Ayarlar sekmesine geçin:

İlk başta, eklentinin genel ayarları size sunulacak. AVIF dönüştürmeyi etkinleştirmek için soldaki menüden Gelişmiş'i seçin ve Sıkıştırma'ya tıklayın.

Burada keşfetmeniz için pek çok seçenek var. Örneğin, GIF'ten videoya dönüştürmeyi etkinleştirebilir veya Optimole üzerinden CSS ve JavaScript sunabilirsiniz. Mevcut tüm seçenekleri tanımak için eklentinin belgelerine göz atmanızı öneririz.

Ancak şimdilik, avif dönüştürmeyi etkinleştir seçeneğini bulun:

WordPress resimlerinizi AVIF formatlarında sunmak için ayarı açmanız yeterlidir. Tüm yapman gereken bu!

Bu özelliğin yalnızca tarayıcıları AVIF biçimlerini destekleyen ziyaretçilerle çalışacağını unutmamak önemlidir. Ancak, iyi haber şu ki, yerinde bir geri dönüş var. AVIF'i desteklemeyen tarayıcılar kullanan ziyaretçilere bunun yerine WebP formatında resimler sunulacaktır. Bu nedenle, sitenize gelen hemen hemen herkes bu yeni nesil biçimlerden yararlanabilir.

Görüntüleri yeni nesil biçimlerde sunmaya başlayın

Buna karşılık, bu, sitenizin Önemli Web Verileri'ndeki performansını iyileştirmenize ve daha iyi arama sıralamaları elde etmenize yardımcı olabilir. Ayrıca, resimleriniz yine de harika görünecek!

Gördüğümüz gibi, görüntüleri WordPress'te yeni nesil formatlarda sunmak için gereken tek şey iki basit adım:

1. Optimole eklentisini yükleyin ve etkinleştirin.
2. AVIF dönüştürme özelliğini etkinleştirin.

Lighthouse'da sitenizin performansını iyileştirmenin başka bir yolu için, Toplu Düzen Kaymasını nasıl azaltacağınızla ilgili kılavuzumuza göz atabilirsiniz.

WordPress'te yeni nesil formatlarda görüntülerin nasıl sunulacağı hakkında hala sorularınız var mı? Yorumlarda bize bildirin!