Çoğu sayfanın geç yüklenmesindeki en büyük faktör genellikle sayfada yer alan resimlerin sayısı ve boyutudur. Bir sayfaya görüntü olarak yükleyebileceğimiz üç tür dosya türü olduğunu biliyoruz: GIF, JPG ve PNG. Bu bağlamda, GIF uzantısı, basit animasyonlar içerebilen tek görsel dosyası türüdür.

JPG ve PNG, iyi bir bilgisayar monitörünün 64000’den fazla farklı renk varyasyonunu görüntüleyebildiği bir zamanda tanımlanmış dosya formatlarıdır. Bugün kullandığımız monitörler en az 16 milyon farklı renk varyasyonu gösterebiliyor. Gözlerimizin görebileceğinden çok daha fazlası. ‘Daha düşük kaliteli’ bir JPG o zamanlar sorun değildi ancak monitörlerimiz de büyüdü ve gelişti. JPG, gerçekten de internette HD görüntüler kullanmak için harika bir çözümdü. Görsel kalites,  monitörünüzün kaldırabileceğinden bile daha yüksekti ve dosya boyutu nispeten küçüktü.

Artık monitörlerdeki renk paleti (bit) daha geniş. Hâlen görüntüleri, algılayabileceğinizden daha fazla renge ve daha yüksek çözünürlüğe sahip JPG dosyalarında saklayabilirsiniz. Ancak dosya boyutları hakkında aynısını söylemek mümkün değil.

JPG vs PNG Farkı Nedir?

JPEG, fotoğraflar ve görüntüler için yaygın olarak kullanılan kayıplı bir görüntü formatıdır.

Öte yandan PNG, metin, çizim veya keskin, tanımlanmış kenarları olan diğer görüntüleri içeren görüntüler için sıklıkla kullanılan kayıpsız bir görüntü formatıdır. Herhangi bir görüntü verisini atmayan farklı türde bir sıkıştırma algoritması kullanır, bu nedenle görüntü PNG biçiminde kaydedildiğinde görüntü kalitesi düşmez. Ancak, PNG dosyaları genellikle .PEG dosyalarından daha büyüktür, bu nedenle bilgisayarınızda daha fazla yer kaplayabilir veya indirmeleri daha uzun sürebilir.

WebP Nedir?

WebP, Google tarafından geliştirilmiş, yüksek görüntü kalitesini korurken görüntülerin dosya boyutunu azaltmak için kayıplı ve kayıpsız sıkıştırma kullanan bir görüntü biçimidir. Web’de kullanılmak üzere tasarlanmıştır ve Google Chrome, Mozilla Firefox, Safari, Opera ve Microsoft Edge dahil olmak üzere birçok popüler web tarayıcısı tarayıcısı ile uyumludur.

WebP neden avantajlıdır? WEBP, JPEG ve PNG gibi diğer formatlara kıyasla görüntülerin dosya boyutunu önemli ölçüde azaltabilmesi ve aynı zamanda iyi görüntü kalitesini koruyabilmesidir. Bu, daha hızlı yükleme sürelerinin ve daha küçük dosya boyutlarının kullanıcı deneyimini iyileştirebileceği web’de kullanım için iyi bir seçimdir. SEO için olmazsa olmaz web site hız problemlerinin önüne geçilmesini sağlar.

WordPress WEBP Nasıl Aktifleştirilir?

WordPress geliştirme ve performans ekipleri WP için WebP desteğini uygulama konusunda derin bir tartışma içindeler. WebP, Google’ın herhangi bir kalite kaybı olmadan görüntü boyutlarını küçülten bir görüntü formatıdır. Ya da bu görüntüler, kalitede küçük bir maliyetle görüntüleri daha da optimize etmek için kullanılabilir.

Bu kulağa harika gelse de, şu anda hem kaynak JPG ve PNG dosyalarını hem de oluşturulan WebP dosyalarını sunucuda tutmamız gerekiyor çünkü WebP görüntüleri tarayıcıların eski sürümleri tarafından desteklenmiyor. Bu, sunucunun oluşturulan WebP görüntüleri için ek disk alanı gerektirdiği anlamına gelir; WordPress geliştiricilerinin aralarındaki tartışmanın asıl nedeni budur.

Ancak sunucunuzda gereğinden fazla disk alanınız varsa ve web sitenizi hızlandırmak istiyorsanız, WebP kullanmaya başlamak için WordPress eklentilerini kullanabilirsiniz. Böylece bandwidth (bant genişliği) kullanımızda dolaylı yoldan azalacaktır.

WordPress WebP Express Ayarları Nelerdir?

WordPress yönetim panelinden eklentiler bölümünde Bjørn Rosell tarafından geliştirilen “WebP Express” eklentisini arayın. Eklentiyi sitenize kurun ve etkinleştirin. Daha sonra yüklediğiniz WebP Express ayarlarına gidin.

1-) Operation mode settings:

İlk ayarımız, WebP içeriklerinin nasıl görüntüleneceğini seçtiğimiz çalışma işletmi modu. Varied image responses (uyumlu görüntü varyasyonları) seçeneğini seçiyoruz. Kullanıcıların tarayıcısında WebP desteği varsa, bu seçenek istek üzerine JPG ve PNG’yi WebP formatına dönüştüren bir kural oluşturur.

2-) “General” settings:

“Genel” alanındaki ayarları inceleyelim:

• Scope : WebP Express eklentisinin hangi klasörlerde çalışacağını belirler. Biz sadece yükleme dosyasını (uploads) ve tema dosyalarını etkilemesini istedik. (Kapsam)
• Image types to work on: Görüntüleri hangi formatlarda WebP’ye dönüştürmek istediğimizi soruyor. Eğer sitenizde JPG ve PNG kullanıyorsanız “Both jpegs and pngs” seçeneğini seçin. (Üzerinde çalışılacak resim türleri)
• Destination folder: Hedef Klasör anlamına gelir. Bu ayarda dönüştürülen dosyaların hangi klasöre yerleştirilmesini istediğinizi belirtebilirsiniz. Seçenekler arasında Mingled (karışık) ve In separate folder (ayrı klasörde) yer alır. “Mingled” seçeneğini seçerseniz, yüklediğiniz WebP görüntüsünü orijinal dosyayla aynı konuma ekler. “In separate folder” seçeneği ile yüklenen görüntüler farklı bir klasöre taşınır.
• File extension: Dosya uzantısı anlamına gelir. Bu seçenek, Hedef klasör seçiminden Karıştırılmış seçeneğini seçerseniz etkinleşir. Append ve Set seçenekleri bulunmaktadır. “Append” seçeneğinde resimleriniz “image.png.webp” olarak eklenir. “Set” seçeneğinde ise dosyayı “image.webp” olarak değiştirir. Bu seçeneği seçerken dikkatli olmalısınız. Aynı klasörde logo.png ve logo.jpg isimli dosyalar varsa sorun çıkabilir; ikisi de image.webp olur.
• Destination structure: Bu, yüklenen dosyaların yol ayarlarını yapabileceğiniz seçenektir. Her iki seçenek de uygundur; biz “Image roots” seçeneğini seçiyoruz.
• Cache-Control header: Cache-Control başlığı ile dosyaların önbellek sürelerini ayarlayabilirsiniz. Custom (özel) seçeneğini seçin ve varsayılan ayarında bırakın.
• Prevent using WebPs larger than original: Orijinalden daha büyük WebP’leri kullanmayı engelle demektir. Bu seçeneği her zaman etkin bırakın. Bir şekilde bir .WebP dosyası orijinalinden daha büyük olursa, bu seçeneğin seçilmesi ziyaretçiye sunulan uzantının orijinal dosya olmasını sağlayacaktır.

3-) “.htaccess rules for webp generation” settings:

Çoğu durumda, bu seçenekleri devre dışı bırakmaya gerek yoktur. Hepsini tikleyerek “etkin” yapın.

4-) Conversion settings:

Jpeg seçenekleri ve PNG seçenekleri hemen hemen aynıdır. Gelin seçeneklerine birlikte göz atalım.

• WebP encoding: WebP formatını kullanmak iki kodlama türünü destekler: Lossy (Kayıplı) ve Lossless (Kayıpsız). Seçeneklerden Otomatik’i seçerseniz, her iki seçeneği de kullanmaya çalışacak ve en küçük dosya boyutuna sahip olanı seçecektir. “Kayıplı” seçeneği görüntünün kalitesini düşürecektir. “Auto” olarak bırakabilirsiniz.
• Quality for lossy: “Same as the jpeg” seçeneğini seçerseniz, görüntünün kalitesini algılamaya çalışır ve WebP için de aynısını uygular. “Limit” en yüksek kalite sınırıdır ve “Fallback” dosyanın kalitesini tespit edemediğinde kullanılacak kalite değeridir.
• Quality for lossless: WebP görüntüleriniz için maksimum kalite değeri belirlemek üzere burada “Apply preprocessing” seçeneğini seçebilir veya WebP’ye doğrudan dönüştürme için %100 kayıpsız seçeneğini belirleyebilirsiniz.
• Alpha quality (only PNG): PNG görüntülerindeki transparan (saydam) bölümler için kaliteyi buradan ayarlayabilirsiniz. Burada yüksek bir değer ayarlamanızı öneririz.
• Metadata: Görüntülerdeki meta verilere ihtiyacınız yoksa “No metadata in webp” seçeneğini kullanın.
• Conversion method: Bunlar WebP Express eklentisi tarafından desteklenen dönüştürme yöntemleridir. Herhangi bir 3. parti uygulama kullanmıyoruz. PHP Uzantısı olarak Imagick (önerilen), Gmagick veya Gd uzantısını kullanabilirsiniz.
• Convert on upload: Yükleme sırasında dönüştürme demektir. Söylendiği gibi, eklentiyi sunucuya yüklendiğinde görüntüleri hemen dönüştürmeye zorlayabilirsiniz. Aksi takdirde, bir ziyaretçiden gelen ilk istekle birlikte görüntüyü dönüştürecektir. Bu seçeneği etkin bırakın.
• Enable logging: Eklentiyle ilgili sorun yaşıyorsanız, hata ayıklama için bunu açabilirsiniz. Aksi takdirde kapalı bırakın.
• Bulk convert: Burada eklentiyi hedef klasörlerdeki tüm görüntüleri hemen dönüştürmeye zorlayabilirsiniz. Donanımınıza ve resim sayısına bağlı olarak zaman alacaktır. Bir şekilde ihtiyacınız olursa “Delete converted files (dönüştürülen dosyaları sil)” butonunu da kullanabilirsiniz.

5-) Alter HTML settings:

Bu seçenek etkinleştirilirse, <img> etiketlerini <picture> ile değiştirerek HTML5 uyumlu hale getirir ve birden fazla görüntüleme seçeneği varsa (otomatik olarak yeniden boyutlandırılan görüntüler gibi) görüntüyü buna göre yapılandırır.

6-) Web service settings:

Diğer web sitelerinin resimleri dönüştürmek için web sitenizi kullanmasını sağlar; devre dışı bırakın.

Yazı sonu. Konu hakkındaki görüşlerinizi ve sorularınızı bize iletebilirsiniz.