WordPress siteniz var ve Google’ın çok sevdiği imaj formatı WebP dosyalarını yükleyemiyorsunuz. Peki ne yapacaksanız? WordPress sisteminizin WebP görsellerini eklemenize izin vermesini nasıl sağlayacaksınız? Gelin, anlatım,
WebP nedir?
Bildiğiniz üzere internet üzerinde JPEG (1992) ve PNG (1996) dosya formatları, görseller için uzun yıllardır kullanıyor. Bunlar çok eskidiği için, görüntü kalitesini bozmadan daha fazla sıkıştırma sağlamak amacıyla yeni teknolojiler geliştirildi. Bunlardan biri de WebP.
WebP imaj formatı, küçük boyutta yüksek imaj kalitesi sağlıyor. Küçük boyut neden önemli? Çünkü Google’ın artık en değer verdiği konulardan biri sayfa açılış hızları. Kaynakları geç yüklenen, kocaman imajlarla bezeli sayfaları sevmiyor Google amca.
WebP, 2010 Yılında Google Tarafından Geliştirildi
Google, görsel boyutlarını düşürmek için WebP formatını 2010 yılında geliştirdi. Son yıllarda, iyice üzerine düşünüyor. Hatta, site hız skorunu gösteren PageSpeed Insight aracında, WebP formatına geçilmesini öneriyor.
Google’da sitenizin rakiplerinizden önce çıkması için görselleri iyice sıkıştırmalısınız. JPEG ve PNG dosyaları için mutlaka Tinyjpg.com sitesinden sıkıştırma yapıp hatta öncesinde boyut küçültüp Photoshop ya da benzeri uygulamalarla kalite düşürüp (ben 6 kullanıyorum) sonra “tiny” yapmalısınız.
Lakin, daha fazla sıkıştırma mecburiyetine düşerseniz, bu tabii sizin en doğal hakkınızdır, içinde bulunduğunuz durumun zorluğunu düşünüp başınızı öne eğmeyeceksiniz. Sitenizde WebP kullanmayı aklınıza getirmeye başlayacaksınız.
WebP’nin Özellikleri? Neleri Destekliyor?
WebP sadece kayıplı veya kayıpsız sıkıştırmayı destekleyen imaj formatı değil. Animasyon GIF ve alfa transparan katman (PNG gibi), teknolojilere destek sunuyor.
Ama WebP kullanmak öyle kolay değil. Öncelikle WordPress sorun çıkarabiliyor. Onun çözümünü aşağıda vereceğim. Bir de tabii her tarayıcının WebP desteği yok. O sebeple desteği olmayan Internet Explorer, Safari gibi tarayıcılardan girenlere JPEG, PNG versiyonlarını dönüştürüp gösteren ara sistemler (CDN) kullanmalısınız. Bu başka bir yazının konusu olsun. Bizim konumuz WordPress.
Kayıplı ve Kayıpsız Sıkıştırma Nedir?
Kayıplı sıkıştırmada, imaj sıkıştırılırken fazlalık olan veriler saklanmaz. Kayıpsız sıkıştırmada ise bu veriler korunur. Eğer bir metin dosyanız varsa kayıpsız sıkıştırma önemlidir, çünkü sıkıştırma açıldığında eskisi gibi okumak istersiniz.
Kayıplı sıkıştırma yaparken kaybın boyutunu belirleyebilirsiniz. Ne kadar çok kayıp verirseniz, imajınızın kalitesi o kadar düşer. JPEG, kayıplı bir formattır. Sıkıştırma artıkça, kalite bozulur. Çok sıkıştırdığınız dosyalarda bunu görürsünüz.
PNG’de ise kayıp yoktur. Ancak, boyutları JPEG kadar ufak olmaz. Tiny bile yapsanız, JPEG kadar dosya boyutu küçülmez. (Aynı çözünürlük değerine sahip imajlar için konuşuyorum.)
PNG, size dosya sıkıştırmak için PNG 8 paletini sunar. PNG 8 olarak kaydedersiniz, 256 renk desteği ile kalitesi daha düşük ama daha küçük dosya boyutlu bir dosya elde edebilirsiniz. Çok renk gerekmeyen tasarımlarınız varsa, örneğin ikon, PNG 8’i kullanabilirsiniz. Daha kaliteli fotoğraflar için PNG 24‘ü kullanmalısınız.
WebP’nin Faydaları Neler?
- Sayfa boyutunu küçültür. Sayfalarınız daha hızlı yüklenir. (Yine de siz lazy loading yapın.)
- Animasyon GIF gibi hareketli dosyalar hazırlanabilir.
- Alfa transparan katmanını destekler.
- Kayıplı, kayıpsız sıkıştırmayı sorun etmez.
- JPEG ve PNG imajlarından yaklaşık 3’te 2 daha düşük boyutlu dosya oluşturur. (PNG %26, JPEG %25-34)
- Alfa transparan katman varsa sadece %22 ek bayt kaplar.
- Transparan kullanımda, kayıplı RGB formatı kabul edilebilirse (web için elbette kabul edilebilir), PNG’ye göre %33 daha düşük dosya boyutu sağlar.
WordPress’e WebP Desteği Kazandırma
Gelelim, fasulyenin faydalarına. Yazımızın başında WordPress sitenize nasıl WebP dosya yükleme izni verebileceğinizi anlatacağımı söylemiştim.
Aşağıdaki kodu, temanızın function.php dosyasına ekleyin. Hepsi bu kadar. Ancak, CDN çözümü yapmadan (maliyetli işler) WebP imajları web sitenizde kullanmayın!
/**
* Sets the extension and mime type for .webp files.
*
* @param array $wp_check_filetype_and_ext File data array containing 'ext', 'type', and
* 'proper_filename' keys.
* @param string $file Full path to the file.
* @param string $filename The name of the file (may differ from $file due to
* $file being in a tmp directory).
* @param array $mimes Key is the file extension with value as the mime type.
*/
add_filter( 'wp_check_filetype_and_ext', 'wpse_file_and_ext_webp', 10, 4 );
function wpse_file_and_ext_webp( $types, $file, $filename, $mimes ) {
if ( false !== strpos( $filename, '.webp' ) ) {
$types['ext'] = 'webp';
$types['type'] = 'image/webp';
}
return $types;
}
/**
* Adds webp filetype to allowed mimes
*
* @see https://codex.wordpress.org/Plugin_API/Filter_Reference/upload_mimes
*
* @param array $mimes Mime types keyed by the file extension regex corresponding to
* those types. 'swf' and 'exe' removed from full list. 'htm|html' also
* removed depending on '$user' capabilities.
*
* @return array
*/
add_filter( 'upload_mimes', 'wpse_mime_types_webp' );
function wpse_mime_types_webp( $mimes ) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
