WebP formatı ile görsel optimizasyonu

Gelişen web teknolojileri ile birlikte, zengin içerikli web siteleri, günümüzde gittikçe popüler bir hal almaya başladı. Her ne kadar son kullanıcı açısından sitelerin içeği zengin, tasarımları güzel gözükse de, aynı durumu site sahipleri ve Google için söylemek zor. Zengin içerikli sitelerin artması ile birlikte, sayfa açılış hızları ve boyutları da arttı. Bu da SEO (Search Engine Optimization) açısından, zamanla sıralamada olumsuz sinyal olarak algılanmaya başlandı. Bu yazımda sitenizin görselleri WebP formatı ile nasıl optimize edebileceğini anlatacağım.

WebP nedir?

WebP, Google’ın ilk olarak 2010’da duyurduğu, 4 Temmuz 2019’da ise kararlı sürümünü yayınladığı bir görsel uzantısıdır. Tıpkı .JPG, .PNG gibi. Diğer uzantılardan farkı ise aynı kalitede ki bir görseli ortalama %20 ile %35 (kayıplı sıkıştırmalarda bu oran daha fazla) arasında daha düşük boyutlar ile sunması. Örneğin; 1MB boyutunda bir PNG görselimizin olduğunu varsayalım. Bu görseli WebP uzantısına dönüştürdüğümüzde, ortalama boyutu 500–700KB’a kadar düşecektir. Bu da size düşük trafik, saklama alanı olarak dönecektir.

Örnek bir görüntü verecek olursak;

WebM Formatı ile sıkıştırılmış bir GIF. Hareketli resimi yaklaşık olarak 247kb’a kadar düşürebiliyoruz. (Bu boyut görselin kalitesine ve süresine bağlı olarak değişkenlik gösterebileceğini unutmayın)

WebP uzantılı görseller nasıl elde edilir?

Aslında bunun birden çok yolu var. Fakat en sık kullanılan araçlar; Android Studio, Photoshop ve online dönüştürücüler. Bu programlar arasında en sık kullanılanı Photoshop diyebiliriz. Fakat Android Studio kullananlar için de görsellerinizi nasıl WebP formatına dönüştürebileceğinizi aşağıdan öğrenebilirsiniz.

Android Studio ile görselleri WebP’ye dönüştürme

Android Studio konusunda hiç bir bilgisi olmayan kişiler, bu konuda sorun yaşayabilir. Biraz teknik bilgi gerektirdiğinden, normal kullanıcılar açısından zorlayıcı olabilir. Fakat aşağıda ki adımları takip ederseniz, sorunsuz bir şekilde dönüştürme işlemini tamamlayabilirsiniz. Hazırsak, başlayalım!

1. Android Studio’yu açın. Eğer mevcut bir projeniz varsa, mevcut projenizden devam edin. Eğer yoksa da; “Start new a Android Studio project” ile yeni bir proje oluşturun.
2. Daha sonra yukarıda yer alan Project bölümünden Android‘i seçin. App > res > drawable‘ın içine Finder yardımı ile dönüştürmek istediğimiz görseli sürükle — bırak ile ekleyelim.
3. Eklediğimiz görsele sağ tıklayıp, Convert to WebP‘ye tıklayıp, dönüştürme ayarlarını seçin. (Genelde Lossy encoding seçilir. Bu görselin boyutunu ciddi anlamda düşürür. Ortalama %75 kalite ile sıkıştırma işlemi yapıldığından, görseller netliğini kaybetmez.)
4. Tüm işlem bu kadar, artık JPG, PNG gibi formatlı dosyalarınız WebP formatına dönüştürdünüz!

Photoshop ile görselleri WebP’ye dönüştürme

Belki de en basit olan yol, Photoshop. Sadece tek bir eklenti ile WebP formatında görselleri export edebilirsiniz. Bu işlem için gereken eklenti; WebPShop. GitHub üzerinden resmi eklentiyi ücretsiz bir şekilde indirip, aşağıda ki kök klasör’e yapıştırmanız yeterli olacaktır.

Windows üzerinden Photoshop kullananlar

1. C:\Program Files\Adobe\Adobe Photoshop 2020\Plug-ins (genelde kök dizin budur, eğer kök dizininizi bilmiyorsanız; Photoshop kısayoluna sağ tıklayıp, özellikler diyerek kök dizininizi bulabilirsiniz) klasörüne, GitHub üzerinden indirdiğimiz WebPShop > bin > WebPShop_0_2_0_Win_x64 klasörünü kopyala yapıştır yaparak işlemi bitiriyoruz.
2. Photoshop ile dönüştürmek ve sıkıştırmak istediğimiz görseli açıp, File > Save As diyerek, kayıt türünü WebP Shop olarak seçiyor ve sıkıştırma ayarlarını yapıyoruz. Genelde %75 oranında sıkıştırma kullanılır. Daha düşük boyutlar elde etmek için, bu oranı düşürebilirsiniz. Fakat unutmayın ki; değer ne kadar düşerse, görselin kalitesi de o derece de düşecektir.

MacOS üzerinden Photoshop kullananlar

1. GitHub üzerinden indirdiğimiz zip’in içerisinde yer alan bin/WebPShop_0_2_1_Mac_x64 klasörü Finder > Macintosh HD > Kitaplık > Application Support > Adobe Photoshop/Plug-ins içerisine atın.
2. Photoshop ile dönüştürmek ve sıkıştırmak istediğimiz görseli açıp, Save (kaydet) yapıp, sıkıştırma ve dönüştürme seçeneklerini uygulayıp, kaydedebilirsiniz.

ezgif.com ile WebP dönüştürme

Eğer bir Photoshop ya da Android Studio kullanıcısı değilseniz, bu internet sitesi işinizi görecektir. En az Android Studio ve Photoshop gibi efektif bir dönüştürme sitesi. Ücretsiz ve pratik olması, tercih sebebiniz olabilir.

WordPress sitelerde WebP kullanılabilir mi?

Aslında bu sorunun cevabı kısmen evet, kısmen hayır. WordPress’in şimdilik bu formatı desteklemediğini (yükleme işlemlerinde .webp dosyalara izin verilmiyor) belirtmemiz gerekiyor. Bu konuda iki seçeneğiniz var. WebP formatlı görselleri WordPress sitenizde kullanmak isterseniz, birinci seçeneğiniz WebP görsel desteği olan bir CDN (Content Delivery Network) almanız. İkinci seçeneğiniz ise; WordPress için geliştirilen WebP Express eklentisi. WebP Express eklentisi, yüklediğiniz görselleri otomatik olarak WebP formatına dönüştürüp, WebP destekli tarayıcılarda JPG, PNG ya da diğer görsel uzantıları yerine, WebP versiyonunu gösteriyor.

Diğer yazım olan “Neden Bootstrap’i Tercih Etmeliyiz?”i de buradan okuyabilirsiniz!

Bir sonra ki yazıda görüşmek üzere!