Yazar Mesaj
Kaan #46   2019-09-30 12:24 GMT        

Yönetici

Çevrimiçi durum

51 mesajları

İnternet’in ve web alışkanlıklarının mobil erişim temelinde değişimler geçirdiği, saniyelerin altın değeri taşıdığı günümüzde web içeriklerinin, özellikle görseller ve videolar gibi medyaların iletiminde iyileştirmeler yapmak bir zorunluluk haline gelmekte. Haliyle, CDN kullanımı, dosyaları sıkıştırmak, görsel sayısını azaltmak… gibi pratikten kapsamlı çalışmalara değin pek çok tercih edilebilecek yöntem ve işleyiş de süreç içerisinde ortaya çıkamakta. Bu ihtiyaçlar temelinde daha önce SIPSjpegoptim ve jpegoptim gibi konulara değinmiştim. Bu yazıda ise PageSpeed Insights değerlendirmesinin SEO performans sürecinde önemli bir kriter olmasıyla birlikte, görsel içeriklerin sunumunda daha da öne çıkan bir formattan; Google tarafından geliştirilen WebP‘den bahsedeceğim.


WebP Nedir?

PageSpeed Insights üzerinden web sayfalarınızı ilk kez analiz ediyorsanız büyük ihtimalle Mobil ve Masaüstü sekmeleri altında, Fırsatlar bölümünde “Resimleri yeni nesil biçimlerde yayınlayın” başlıklı bir madde göreceksiniz. Bu madde içeriğinde de yer aldığı üzere WebP (“Weppy” şeklinde telaffuz ediliyor) bir yeni nesil biçim yani format (next-gen format). Tam olarak ifade etmek gerekirse, WebP eski JPEG ve PNG görsel formatlarına kıyasla daha üstün bir sıkıştırma ve kalite sunan (mümkün olduğu kadar kalite kaybı olmaksızın) yeni nesil, açık kaynaklı bir görsel formatı. Google tarafından 2010 yılında duyurulan ve o zamandan bu zamana pek çok servis bağlamında öne çıkarılan format ile görüntülerin daha hızlı bir şekilde yüklenmeleri ve daha az veri tüketmeleri hedeflenmekte. Bu arada, WebP dosyaları harici bir uygulama olmadan bilgisayarda, örneğin MacOS Preview ve/ya Plugin olmaksızın PhotoShop ile görüntülemek mümkün değil. Ancak, ilgili dosyaları modern internet tarayıcıları ile (Chrome, Opera, Firefox gibi) kolaylıkla görüntüleyebilirsiniz. Safari maalesef WebP formatını desteklememekte (14 Ocak 2019). Unutmadan, ilgili yeni nesil görsel formatları arasında JPEG 2000 ve JPEG XR da var, ancak bu formatlar şimdilik ayrı bir yazı konusu.

WebP Nasıl Çalışır?

Çok teknik detaya girmeden, özet olarak anlatmak gerekirse, WebP görüntüyü kodlamak için tahmini kodlama yöntemini (predictive coding) kullanır. Bu yöntem videolarda anahtar kareleri sıkıştırmak için VP8 video codec bileşeni tarafından da kullanılmaktadır. Tahmine dayalı kodlama, bir bloktaki değerleri tahmin etmek için komşu piksel bloklarındaki değerleri baz alır ve sonrasında yalnızca farkları işler. Çok daha detaylı bilgi ve örneklendirmeler için Compression Techniques sayfasına göz atabilirsiniz.

WebP Nasıl Kullanılır?

Görsellerin sunumunda bir süredir Cloudinary servisinden faydalanıyorum. Bu servis üzerinden oluşturduğum tanımlamalarla birlikte görseller WebP olarak ziyaretçilere sunuluyorlar. Ancak, harici durumlar da söz konusu olabiliyor ya da bir çalışma doğrultusunda sunucuda yer alan görsellerin hızlı bir şekilde WebP olarak düzenlenmeleri gerekebiliyor. En temelinde, web sayfanızdaki (örneğin WordPress blogunuzdaki) görsellerin formatlarını yeniden yapılandırmak isteyebilirsiniz. Bu gibi durumlar için bir reçete paylaşmak istiyorum. İhtiyaçlarınız doğrultusunda süreci kendinize göre şekillendirebilirsiniz.Az önce de bahsettiğim gibi, WebP doğrudan görüntüleyebileceğiniz bir format değil. Dolayısıyla bir kodlayıcıya (encoder) ve bir de kod çözücüye (decoder) ihtiyacınız var. Ancak, web sayfalarında diğer formatlarda olduğu gibi herhangi bir ekleme ve/ya farklılık olmaksızın img etiketi ile kullanılabilmekte.

<img src="./image.webp" alt="Görsel" />

Elbette, ilk paragrafta da belirttiğim üzere WebP formatı modern tarayıcılar tarafından desteklenmekte. Peki, destek sunmayan bir taraycıda işler nasıl yürür?

<picture>
  <source srcset="./image.webp" type="image/webp">
  <source srcset="./image.jpg" type="image/jpeg"> 
  <img src="./image.jpg" alt="Görsel">
</picture>

Tabi bu desteği sunmak sizin kararınız. Ben nezaketen eklemek istedim.CSS kullanımında da yine bir farklılık yok.

.image {
  background-image: url("image.webp");
}

Gelelim uygulama sürecine. PhotoShop uygulaması içerisinde, plugin aracılığıyla WebP formatındaki görselleri görüntüleyebilirsiniz. İlgili plugini telegraphics.com üzerinden ücretsiz olarak indirmeniz mümkün. Linux (Linux adlı işletim sistemi çekirdeği) ve macOS ortamında da kullanılabilecek pek çok araç mevcut. Adetim olduğu üzere, ilk olarak Homebrew aracılığıyla neler yapabileceğimize bakalım;

brew install webp

Bu paket kapsamında kullanadığımız 2 komutumuz var; cwebp ve dwebp.cwebp komutundan var olan görselleri WebP formatına dönüştürmek istediğimizde faydalanıyoruz. Temel kullanımı şu şekilde;

cwebp -q [imaj_kalitesi] [JPEG/PNG_dosya_adi] -o [WebP_dosya_adi]

Daha kapsamlı bilgi almak için cwebp -longhelp komutunu kullanabilirsiniz. Komutu bir örnek ile uygulayacak olursak;

cwebp -q 90 image.jpg -o image.webp

WebP formatı üzerinden JPEG ve PNG dosyalara dönüştürme işleminde ise dwebp komutunu kullanıyoruz. En yalın haliyle komutun kullanımı şu şekilde;

dwebp [WebP_dosya_adi] -o [JPEG/PNG_dosya_adi]

Daha kapsamlı bilgi almak için dwebp -longhelp komutunu kullanabilirsiniz. O halde bir de uygulama üzerinden örnek verelim;

dwebp image.webp -o image.png

Elbette komut satırı yerine pek çok işletim sistemine sahip bir arayüz aracılığıyla da bu işlemleri gerçekleştirebilirsiniz. XnConvert uygulaması bu ihtiyaç doğrultusundan öne çıkan uygulamalardan biri. Ayrıca, Chrome tarayıcı üzerinden de Save Image As PNG eklentisini kullanarak WebP formatındaki görselleri PNG olarak bilgisayarınıza indirebilirsiniz.Sanırım, Linux için önerebileceğim en uygun araç gthumb olacaktır. DigitalOcean tarafından yayınlanan şu içeriği de inceleyebilirsiniz.

Klasör İçeriğinde Çoklu WebP Dönüştürme İşlemi

Temel açıklamaların ardından daha işlevsel ve çözüm odaklı konulara geçebiliriz. Örnek olarak WordPress web sayfanız olduğunu ve bu site içerisinde kullandığınız görselleri dönüştürmek istediğinizi varsayalım. Var olan görsellerimizi ilgili klasör içerisinde şu şekilde kullanabiliriz;

for imgFile in *.png ; do cwebp -q 80 "$imgFile" -o "${imgFile%.png}.webp"; done

Elbette burada dikkat etmemiz gereken konu sunucudaki tüm görseller yerine dönüştürülmesini istediğimiz ve içerikler içerisinde yer alan görsellerin işleme alınmasının gerektiği. Peki, var olan görselleri nasıl PNG ve/ya JPEG formatına dönüştürürüz?

for imgFile in *.webp ; do dwebp "$imgFile" -o "${imgFile%.webp}.png"; done

Evet, hepsi bu kadar. Bu işlemlerin ardından veritabanı içeriğinde de ilgili uzantıları güncellemeyi unutmamalısınız. Örneğin;

update wp_posts set post_content = replace(post_content, 'Aranacak kelime' , 'Yerine kullanılacak kelime');

Bu işlemler için eklenti kullanmanızı ve işlem öncesinde veritabanının güncel bir yedeğini almanız gerektiğiniz hatırlatmama gerek yoktur sanırım (:Evet, WebP ile ilgili temel işlemlerimizi bu şekilde özetlemiş olduk. Bundan sonrası biraz daha teknik gereksinimler doğrultusunda gelişecek konular. Bu nedenle Google tarafından sunulan WebP sayfasını da tekrar hatırlatmak istiyorum; Google Developers > WebP.


Bu mesaj Kaan tarafından 2019-09-30 12:35 GMT, 14 Gün önce düzenlendi.